Experience with Design Systems

What is a Design System?

Design system is a design language in which all the people involved can participate, understand and contribute to the product. With the goal of creating a scalable, consistent, intuitive product.

What is part of a Design System?

- Core (Design Tokens)
- Design Guidelines
- Components
- Pages
- Voice & tone, Grammar
- Accesibility
- FAQ

Image for post
Image for post

Why do we need a Design System?

As the product progresses, the level of complexity increases in every sense, control is lost if we do not have a design system that allows us to be in sync with the team and meet requirements, deadlines, etc.

Image for post
https://www.youtube.com/watch?v=Hx02SaL_IH0

Clarity

Eliminate ambiguity, allow people to see, understand and act with confidence.

Unsafety

In the crowd of Modals or pop ups: Which option to use, which one is correct, and are they following good practices?

Image for post

Efficiency

Thanks to pre-tested components we can use them in new projects, allowing us to focus on solving problems, avoiding development / design questions that do not add value to the product.

Consistency

Create an intuitive product thanks to a good consistent user experience across all platforms.

Image for post
Variety of devices

Business-level benefits

  • Greater speed and reduced time to market, thanks to component libraries and documented navigation patterns, is an agile process that allows us to launch new versions more quickly without losing quality.
  • Intuitive interaction with the product, reducing adaptation time and friction for new users, thanks to a good user experience and consistent design on all platforms.
  • Reduction of time and money invested in developing and designing non-reusable solutions.
  • Clean design and code, and the time invested in creating a solid and clear design system for everyone from the beginning, will allow us to make changes as the product scales.
  • Greater collaboration and knowledge exchange among the teams that have access to the design systems allows the entire team to be on the same page so that they can collaborate and contribute to the product.
  • Another benefit is that new team members will have a much more streamlined onboarding process.

Image for post
Impact of investment in design — McKinsey Design Index (MDI)

Design Tokens

A Design Token is an abstraction of a visual property such as color, font, width, animations, etc. These raw values are independent of the application and the programming language used on any platform. Artículo recomendado.

Image for post

Types of Design Tokens

  • Colors
  • Border Colors
  • Background Colors
  • Shadows
  • Text Colors
  • Animation durations
  • Z-Indexes
  • Media Queries
  • Spacing
  • Sizing
  • Rounded Corners
  • Font Weights
  • Font Sizes
  • Line Heights
  • Font Families

Image for post
Design Tokens para Devision Design System
Image for post
Identificación de Design Tokens

Continue reading

Get in touch

Let’s connect and talk about your project and figure out how to work together or if you just want to chat about design and cars.

Contact me
© 2020 Dennis Montes