Design Collaboration and Implementation

Partnering with Engineers

• Collaboration: Essential for turning designs into functional code.
• Specifications: Document size, color, typography, and interaction values for engineers.

Design Specifications

• Details: Include size, color (RGB or HEX), typography, padding, margin, and interactions.

Interaction States

1. Default: When the app first opens.
2. Focus: Highlighted through keyboard or mouse interaction.
3. Hover: Indicates interactivity when a cursor is over the element.
4. Disabled: Normally interactive but currently unusable.
5. Pressed: Indication of an impending action.
6. Active: Shows selection, often in menus and lists.

Accessibility Guidelines

• Ensure states are indicated by more than just color.

Design Guidelines

• Purpose: Define usage, variations, and best practices.
• Structure: Include proper usage, anatomy, form factors, best practices, and accessibility.
• Do’s and Don’ts: Effective for communicating rules.

Graduation

• Evolution: Patterns evolve into a comprehensive design system.

For more details, refer to the Salesforce Trailhead module.

Partnering with Engineers

• A strong partnership between design and engineering is necessary to turn designs into functional code.
• The handoff of design should be accompanied by a deliberate knowledge transfer to ensure the design is built as intended.

Design Specifications

• Design specifications document the size, color, typography, and interaction values of a design.
• Specs include the appearance of each element, specifying its width, height, RGB or HEX color values, font size, line-height, padding, and margin.
• Interaction specifications provide the values inputted when a person uses the element being designed.

Interaction Specifications

• Interaction specs show how the design changes based on user interaction.
• There are six main interaction states that all designs must have specifications for.
• Examples of additional interaction states include:
  • Dragged state for elements that can be moved by dragging.
  • On and off states for elements with affordances.
  • Error, success, or warning states for notifications.

Accessibility Guidelines

• Designs must follow Web Content Accessibility Guidelines (WCAG) to ensure apps are usable by users of all abilities.
• The WCAG 2.0 guideline SC 1.4.1 states that states should not be indicated by color alone.
• Examples of accessible design include adding text to error states, in addition to color changes.

Design Guidelines

• Interaction specifications help engineers code designs as intended.
• Design pattern guidelines describe the usage of macro workflows and microinteractive elements.
• Brand style guidelines define the visual style of an app, including layout, typography, color, and branding.

Documenting Design

• Do's and don'ts are an effective way to communicate design rules.
• Examples of do's and don'ts include images accompanied by brief textual descriptions.

Graduation

• A good pattern library evolves over time.
• As patterns are codified, the pattern library graduates to a fully fledged design system.
• Engineering partners build each pattern and its elements as components.