App Design Guidelines

App Design Guidelines provide standards for naming and configuring apps, including recommendations on selecting and sequencing tabs, also referred to as items.

App Details & Branding

Naming

We recommend entering an App Name in title case that is as brief as possible, since longer names may not be fully displayed in the user interface. The Developer Name should be the same as the App Name except written in Pascal case.

Learn more about title case and Pascal case in Component Design Guidelines.

For Lightning apps that have a Classic app counterpart, the Developer Name may already by taken and cannot be reused. To create a Lightning version of an app, the Lightning app's Developer Name can include a number after it. For example the Nimble AMS Accounting app has a Developer Name of Accounting2 because the Classic app already has a Developer Name of Accounting.

Description

The app's Description is the primary way to communicate to staff what the purpose of each app is. Use it to provide quickly state the business use for the app or what some of its most important tabs are. We always recommend providing a description.

We recommend restricting the description to a short sentence with no period, to ensure consistency with Salesforce app descriptions. Longer sentences cannot be fully displayed in the user interface.

Lightning App Builder includes an App Launcher Preview so you can see how much text will fit in the App Name and Description before being cropped.

For example, the descriptions for some of the Nimble AMS apps are:

App Image

To be as consistent as possible with Salesforce and Nimble AMS app images, we recommend using an app image that has:

• an icon inside a colored square with rounded corners.
• monochrome colors—generally this means the square is a uniform color tone and there is an all-white icon in the center. If the icon is more complex, multiple tones of a single color can be used although this is less consistent with other app images.
• A smaller icon can also be included in the lower-right corner to indicate the app belongs to a category. For example, a gear icon with Nimble AMS apps indicates it is an app intended for administrators. 

These are only guidelines. If these recommendations would create changes to your logo that contradict your Association's branding guidelines, you can consider simply include your Association's logo without modifications.

It's common to replace the Nimble AMS app's App Image and Primary Color Hex Value with your Association's logo and primary brand color. However, we don't recommend doing this for every app included in Nimble AMS because it becomes visually more difficult to distinguish the apps from one another.

Consider using a different App Image—or at least a different color of the same image—and a different Primary Color Hex Value for your staging org, to easily distinguish whether you are in production or staging.

Salesforce provides several sample images on the App Launcher Logos page, which can be accessed by logging into your org, updating the browser URL to exclude everything after the base url, and then adding /logos after your org's base url.

For example, the org base url for the International Society for the Exceptionally Nimble is https://isen.lightning.force.com, so staff can access the App Launcher Logos page by logging into their org and then visiting the following url: https://isen.lightning.force.com/logos.

Alternatively, if you know the My Domain your association uses, you can also use that. For example, International Society for the Exceptionally Nimble staff can go to https://isen.my.salesforce.com/logos

Learn more about Salesforce icons in the Salesforce Lightning Design System (external).

App Options

The standard and console navigation styles are both useful, but apps using Console navigation may only be available to some staff, depending on their user license. To ensure an app is available to all staff, use the standard navigation style.

One of the primary purposes of an app is to expose the most important tabs, or items, to staff so they can do their job as effectively as possible. They may each use different tabs or need an additional tab that isn't included in the app. For this reason, we do not recommend selecting Disable end user personalization of nav items in this app. Learn more about Personalized Navigation Considerations (external).

Utility Bar

The Utility Bar can be useful for providing quick, universal access to components such as Chatter and recent items. For consistency, consider including the same Utility Bar Items as the Nimble AMS apps:

• Recent Items
• Chatter Feed
• Chatter Publisher
• Recent Accounts—this is a Recent Items component that only shows accounts

Generally, a Panel Width and Panel Height of 480 pixels provides sufficient space for the Utility Bar Item, though some items may work best with more space.

Items (Tabs)

For all non-administrative apps, we recommend beginning every app with these standard items in the following sequence:

1. Home
2. Chatter
3. Reports
4. Dashboards
5. Accounts

For administrative apps, administrators should determine—on a per-app basis—if the app should also include these standard items or if it more effective to exclude some—or all—of these standard items.

After these items, include additional items depending on the app's purpose. Our general recommendations are:

• If there is an item that matches the app name, place it after Accounts.
  • For example, the Membership app in Nimble AMS lists the Membership item after Accounts.
• List all other additional items in alphabetical order, unless a different order would be clearer or more efficient, such as promoting highly used items or promoting a parent object over a child object.