Skip to content

BuildingDesignSystems.md

Latest commit

 

History

History
196 lines (108 loc) · 6.65 KB

BuildingDesignSystems.md

File metadata and controls

196 lines (108 loc) · 6.65 KB

Design Systems

A Design System is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.

  • Consistency - Ensure uniform design and functionality, enhancing user experience and brand identiy.

  • Efficiency and Speed - Accellerates product evelopment with reusable components, enabling faster iterations.

  • Collaboration - Improves teamwork with a shared language and understanding of design and development.

  • Quality - Raises product quality by standardizing design and development practices.

  • Cost Reduction - Reduces design and development costs by reusing components and patterns.

Building Blocks of a Design System

Styles

  • Typography - Font family, size, weight, line height, and color.
  • Color - Primary, secondary, and accent colors.
  • Spacing - Margins, padding, and grid.
  • Iconography - Icons and symbols.

Elements

  • Buttons - Primary, secondary, and tertiary buttons.
  • Inputs - Text fields, text areas, and checkboxes.
  • Forms - Form fields, labels, and validation messages.

Components

  • Navigation - Menus, tabs, and breadcrumbs.
  • Cards - Containers for content.
  • Modals - Dialogs and popups.

Avoid buying a design system

  • Can be overengineered - May include unnecessary components and styles.
  • Timeconsuming to learn - May require time to understand and implement.
  • Needs customization - May not fit your brand or product.
  • Result in bloated code - May include unused components and styles.

Caveat: Buying a design system to speed up the creation of your design system can work. But avoid using their entire system as is.

Get buy-in upfront

  • Collaborate with developes, desiges, product managers, and stakeholders - Ensure everyone is on board with the design system.
  • Sell the benefits - Explain how the design system will improve efficiency, consistency, and quality.
  • Set expectations - Communicate the time and effort required to build and maintain the design system.

Agree on Objectives

  • Define the Purpose - Clarify the goals and objectives of the design system.

  • Set Scope - Determine the components and styles to include in the design system.

  • Identify Audience - Understand who will use the design system and their needs.

Ask Questions Upfront

  • Accessibility - Will the design system be accessible to all users?

  • Versioning - How will you manage versions of the design system?

  • Responsiveness - Will the design system be responsive for all devices?

  • Dark Mode - Will the design system support dark mode?

Auditing an Existing Application

  • Existing Assets - Identify reusable components and styles.

  • Gaps and Inconsistencies - Note gaps and inconsistencies in the design.

Build as you go

  • Context - Build components and styles as you need them is easier when you have context.

  • Focused - Build components that you are using to keep the system focused and streamlined.

  • Faster and Cheaper - Avoids the upfront investment in a system that may need larger revisions later.

Creating a Design System

1. Define Styles

  • Layout Grid - Define the grid system for the design system.

  • Layout Padding - Define padding within components.

  • Typography - Define font sizes, weights, and line heights. (e.g., headings, body text, and links)

  • Color Palette - Define primary, secondary, and accent colors, modes, and states through variables.

  • Aesthetic Styles - Define rounded corners, shadows, and other aesthetic styles. (e.g., buttons, cards, and modals)

2. Create Elements

  • Buttons - Create primary, secondary, and tertiary buttons.

  • Inputs - Create text fields, text areas, and checkboxes.

  • Forms - Create form fields, labels, and validation messages.

  • etc.

Don't forget states - Define states for each element (e.g., hover, focus, active, and disabled)

3. Build Components

  • Navigation - Create menus, tabs, and breadcrumbs.

  • Cards - Create containers for content.

  • Modals - Create dialogs and popups.

  • etc.

Avoid too much abstraction - Keep components simple and focused on their purpose.

Component Usage

  • Reuse - Reuse components across applications.

  • Customization - Customize components for specific use cases.

  • Consistency - Ensure components are used consistently across applications.

  • Accessibility - Ensure components are accessible to all users.

Step back and look at them as a whole - Ensure components work together harmoniously.

Tools - Storybook https://storybook.js.org/

Maintaining a Design System

  • User Feedback - Collect feedback from users and stakeholders. Useful to highlight impormenets or reaveal usability issues.

  • Brand evolution - Update the design system to reflect changes in brand identity.

  • Technology changes - Update the design system to reflect changes in technology.

  • Component updates - Update components to improve usability and accessibility.

Process to Update a New Component

1.Research

  • Can we reuse an existing component?
  • Can we revise an existing component?
  • Anyone working on a similar component?

2. Design

3. Development

4. Testing

Maintaining Version Control

  • Clear versioning strategy - Use semantic versioning to manage versions of the design system.

  • Documentation changes - Update documentation to reflect changes in the design system.

  • Rolloutstrategy - Plan how to roll out changes to the design system.

  • Depreciation strategy - Plan how to deprecate components and styles.

Adoption and Communication

  • Communicate Value - Explain the benefits of the design system to users and stakeholders.

  • Chamions - Identify champions to promote the design system within the organization.

  • Ownership - Assign ownership of the design system to a team or individual.

  • Training - Provide training on how to use the design system.

Design Principles

Design principles are a framwork that can help make design decisions, ensuring yout service is user-centric and fir for purpose.

Design principles provide:

  • Consistent decision-making
  • A shared understanding of what good looks like
  • A way to evaluate design decisions

Digital Playbook

A digital playbook is a set of guidelines that help teams design and deliver better digital services.

Provides:

  • Agreed set of processes
  • A shared understanding of how to deliver digital services
  • A way to evaluate the success of digital services