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?
Signup and view all the answers
Which of the following statements best describes how object icons are presented?
Signup and view all the answers
What should be ensured when designing different icon types within Salesforce?
Signup and view all the answers
What should be included with informational icons to enhance accessibility?
Signup and view all the answers
Which type of icon should a screen reader skip over?
Signup and view all the answers
What is the primary design principle for Salesforce icons?
Signup and view all the answers
What is the purpose of using an alt description for images?
Signup and view all the answers
What should the screen reader read for an informational icon like the 'Close' icon?
Signup and view all the answers
Icons are classified into how many main types according to their role in Salesforce?
Signup and view all the answers
How should redundant icons be treated in terms of accessibility?
Signup and view all the answers
What characteristic distinguishes Salesforce icons?
Signup and view all the answers
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.
Studying That Suits You
Use AI to generate personalized quizzes and flashcards to suit your learning preferences.
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.
