Design Collaboration and Implementation
16 Questions
0 Views

Choose a study mode

Play Quiz
Study Flashcards
Spaced Repetition
Chat to lesson

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

What is the primary goal of partnering with engineers in the design process?

  • To ensure the designer's creative vision is maintained
  • To facilitate a deliberate knowledge transfer for accurate implementation (correct)
  • To reduce the need for design specifications
  • To assign blame for any design errors

    • What is the purpose of design specifications in the design process?

  • To bypass the need for engineering input
  • To provide a rough estimate of the design's functionality
  • To document the size, color, typography, and interaction values of the design (correct)
  • To showcase the designer's creativity

    • What is typically included in an interaction specification?

  • The hardware and software requirements for implementation
  • Only the visual design elements
  • The values inputted when a person uses the designed element (correct)
  • The design team's meeting notes and discussions

    • How many main interaction states are typically included in design specifications?

    <p>6</p> Signup and view all the answers

    What is an example of an interaction state that may be specific to a type of element?

    <p>Dragged state</p> Signup and view all the answers

    What is an example of an element that may have an affordance with on and off states?

    <p>Light switch</p> Signup and view all the answers

    What is an example of an interaction state that may not involve a visible change?

    <p>Audio feedback</p> Signup and view all the answers

    What is the primary reason for including accessibility guidelines in design specifications?

    <p>To provide a better user experience for all users</p> Signup and view all the answers

    What is the primary goal of Web Content Accessibility Guidelines (WCAG)?

    <p>To make web content more accessible to all people</p> Signup and view all the answers

    What is the purpose of SC 1.4.1 guideline in WCAG 2.0?

    <p>To make sure states are never indicated by color alone</p> Signup and view all the answers

    What is the purpose of design pattern guidelines?

    <p>To outline the usage of macro workflows and microinteractive elements</p> Signup and view all the answers

    What is the benefit of using do's and don'ts in documenting a design?

    <p>It helps readers to quickly absorb rules</p> Signup and view all the answers

    What is the outcome of a well-established pattern library?

    <p>A fully fledged design system</p> Signup and view all the answers

    What is the purpose of interaction specifications?

    <p>To help engineers code designs as intended</p> Signup and view all the answers

    What is part of the typical structure of design guidelines?

    <p>Proper usage, anatomy, use case, form factor, best practices, and accessibility</p> Signup and view all the answers

    What is the term for guidelines that define the visual style of an app?

    <p>Brand style guidelines</p> Signup and view all the answers

    Study Notes

    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.

    Studying That Suits You

    Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

    Quiz Team

    Description

    This quiz covers the importance of partnership between designers and engineers in turning designs into functional code. It focuses on the handoff process and deliberate knowledge transfer to ensure designs are built as intended.

    More Like This

    Use Quizgecko on...
    Browser
    Open
    Browser
    Browser