Design

Design systems

• Set of design standards used to build an ecosystem of products

  • Technical specs
  • Desing tokens
  • Documentation
  • Principles
  • Processes

• Pattern Library

  • Visual and interactive aspect of components that enable standardizations to minimize discrepancies
    • Templates
    • Layout
    • Interactions
    • Code snippets
    • Components

• Style guide

  • Visual style, tone and voice
    • Colors
    • Typography
    • Icons
    • Logos
    • Illustrations
    • Brand guidelines

• Key parts of a design system

  • Principles
    • clear opinionated values teams believe in.
  • Foundations
    • accessibility
    • color
      • assess vs needs
    • typography
      • aim for consistency
      • type scales
    • elevation
    • iconography
      • functional and recognizable
    • grids,layout and spacing
      • breakpoints
    • patterns
  • Documentation
    • communicates purpose of all aspects of the design aspects and how best to apply them.
    • can be anything from articles and guides to individual component notes.
    • category/use/variation
  • Processes
    • mechanics and governance of managing design system

• UX(user experience) design

  • information architecture - easily find what they looking for.
  • user pyschology
  • usability testing
  • content strategy
  • wireframes
  • interaction design.

• UI(user interface) design

  • color.
  • typography.
  • spacing.
  • sizing.
  • shape.

• Project brief

  • Get the who, what and why of the project straight from the service-customer.

• Wireframes

  • Low fidelity versions of the final design.

• Color Theory

  • Types of color

    • Primary
    • Secondary
    • Tertiary

  • Terms

    • Hue - dominant color
    • Tint / Shades / Tones - Add white / Add black / Add grey
    • Saturation - Rich or dullness

  • Color models

    • CMYK - Cyan, Magenta, Yellow and black. (used esp for printing)
    • RGB - Red, Green, Blue
    • HSB - Hue, Saturation, Brightness
    • Hexadecimal - ##rrggbb

  • Color psychology

    • understand different emotions evoked by colors
    • *not an absolute science

  • Color Harmonies

    • Which colors go well together with the primary.
    • use color.adobe/color-wheel, muzli-color, webgradients
    • color contrasts aid in accessibility.

• Typography

  • Fonts
    • Google and Adobe fonts.
    • Understand your brand and audience.
    • Test effect of size on font.
    • Font attributes(size, weight, family) and roles(where they will be used)
    • Type scales.

• Spacing and sizing

  • Good for visual hierarchy
  • 8pt system
  • Grid system vs Rulers and guide systems.

• Icons and Images.

Parts of a webpage

• Header.

  • top section of a page
  • contains logo, navigation menu, call-to-action and optionally a search form.

• Hero section.