Spring – Blog#1 – Design Systems

Prompt:

• A design system is a collection of reusable components with clearly defined standards for use. These components combine pattern libraries, colors, and fonts with standardized design principles to help companies achieve consistent visual design at scale. Design systems embed these building blocks of design into teams and workflows to create consistent user experiences even when design is distributed among numerous designers and other creators.
• In your own words share a few insights from what you observed.
  • Name the three sites you visited, and three specific things you learned about that company.

My response:

• Nike Digital Design System
  (previously known by: “Podium”)
  • Key Features/Design Principles:
    • Unified Design Language
      • NDDS offers a unified design language that maintains consistency across various digital touchpoints
    • Scalability
      • The system is designed to scale effortlessly, supporting everything from small mobile interfaces to extensive desktop applications
    • Flexibility and Customization
      • Allows for flexibility and customization. Designers can adapt components to meet specific needs without compromising on the overall brand integrity
    • Responsive Design
      • The NDDS supports responsive design, ensuring that all components and layouts adapt smoothly to different screen sizes and orientations
    • Accessibility
      • Nike places a strong emphasis on accessibility. The NDDS includes guidelines and best practices for creating accessible digital products, ensuring that all users, including those with disabilities, can interact with Nike’s digital platforms effortlessly
• Google Material Design
  • Key features/design principles:
    • Material as a Metaphor:
      • Inspired by real-world materials, Material Design uses surfaces and edges to provide visual cues and a sense of physicality
    • Bold, Graphic, Intentional:
      • Emphasizes intentional use of color, imagery, and typography to create a bold and vibrant aesthetic
    • Motion Provides Meaning:
      • Animations and transitions are used to guide the user’s attention and provide feedback on their interactions
    • Inclusive Design:
      • Ensures all components are accessible, with guidelines for color contrast, touch targets, and screen reader support
    • Accessibility:
      • Tools and resources to help designers and developers create accessible products, including ARIA (Accessible Rich Internet Applications) practices and accessibility testing tools
    • Very robust and flexible design system that not only serves Google’s ecosystem but also provides valuable resources and tools for everyone to access
• Apple Human Interface Guidelines:
  • Key Features/Design Principles:
    • Clarity:
      • Ensures that text is legible at every size, icons are precise and lucid, and adornments are subtle and appropriate
    • Deference:
      • Uses fluid motion and a crisp, beautiful interface to help users understand and interact with content
    • Depth:
      • Layers and realistic motion convey hierarchy, impart vitality, and facilitate understanding
    • SF Symbols:
      • A library of over 1,500 configurable symbols that integrate seamlessly with Apple’s system fonts
    • Design Kits/Documentation:
      • Provides resources like Sketch and Adobe XD kits containing UI elements and templates for rapid design and prototyping
      • Extensive documentation covering all aspects of UI design, including best practices and implementation details outside of just their format
    • Inclusive Design:
      • Ensures that all users can use Apple products. VoiceOver, Dynamic Type, and other accessibility features
    • Accessibility:
      • Provides developers with tools to make apps more accessible, including APIs for adding accessibility information to custom UI elements
    • Fluid Motion:
      • Similar to Google, guides for creating smooth, natural animations that help users understand the app’s flow and transitions