Salesforce Icon Design Principles

Study Notes

Iconography

Icon Overview

Icons represent features, functionality, or content in Salesforce.
There are five primary types of icons based on use case and representation.

Design Principles

Salesforce icons blend professionalism with a playful touch.
Icons are designed to be simple, approachable, and legible, featuring negative space and rounded corners.
Recognizable and memorable icons enhance user experience.

Accessibility

Screen readers treat informational and decorative icons differently.
Informational icons convey critical information and must include assistive text or aria-labels.
Decorative icons do not convey relevant information and can be skipped by screen readers; use an empty alt tag for these.

Informational Icons

Used to provide information that surrounding text does not convey.
Examples include icon buttons and standalone avatars.
Each icon must have an alt description that explains its function, e.g., "Upload File."

Decorative Icons

Add no essential information and are often redundant; they reinforce the adjacent text.
Should be skipped by screen readers for a streamlined experience.

Grid System and Keyline Shapes

Important for maintaining consistency and spacing, especially when designing for mobile devices.
Adequate space around icons makes them easier to tap on mobile screens.

Icon Categories and Types

Four main icon types in Salesforce: object, utility, action, and doctype, each with a consistent design approach.

Object Icons

Utilized in both mobile and desktop applications.
Designed with white images on colored squares featuring 4px rounded corners.

Utility Icons

Must be scaled appropriately: 32px (2px stroke weight), 48px (4px stroke weight), 60px (6px stroke weight).

Action Icons

Represent user actions within mobile applications.
Typically found in the mobile action bar, facilitating task completion for users.

Doctype Icons

Used to categorize document types, though specific design guidelines were not detailed.

Product Icons

Serve as the branding for each Salesforce product.
Comprise a two-color glyph with a 4px rounded stroke on a white background.
Used as mobile application icons, represented as 48x48px in the App Launcher for each official Salesforce application.

Description

Explore the essential design principles behind icons in Salesforce. This quiz covers the five types of icons used and their specific use cases, helping you understand their functionality and the blend of professionalism and playfulness in their design.

Salesforce Icon Design Principles

Choose a study mode

Podcast

Questions and Answers

What is the primary purpose of adding space around each icon in mobile design?

Which icon type is specifically designed for actions that users can take within a touch device app?

What is the stroke weight for a 32px icon according to the provided guidelines?

What color scheme do product icons in Salesforce use?

Which of the following statements best describes how object icons are presented?

What should be ensured when designing different icon types within Salesforce?

What should be included with informational icons to enhance accessibility?

Which type of icon should a screen reader skip over?

What is the primary design principle for Salesforce icons?

What is the purpose of using an alt description for images?

What should the screen reader read for an informational icon like the 'Close' icon?

Icons are classified into how many main types according to their role in Salesforce?

How should redundant icons be treated in terms of accessibility?

What characteristic distinguishes Salesforce icons?