Project Description

Project Description

DESIGN SYSTEMS

A design system is a style guide that includes the interaction patterns and transitions used in digital products. You could have a design system for each digital product, or a big, general system for all products in your company, with specific styles for each individual product.

What it is.

Design systems are visual UI and branding style guides, along with the pattern library for interactions and transitions.

In a design system you would find the logo, fonts and color palettes for your products, along with how login works and how pages transition, and buttons, input boxes and other functional elements. A design system is both the rules for the UI and the rules for the UX.

How it’s used.

The point of a design system is to keep everything within a digital product–and sometimes across digital products–consistant. This advantages both the users who aren’t forced to learn multiple different navigation and interaction patterns, but also your engineers who can work more efficiently by developing one button style that’s used everywhere, or one account creation flow that can be used with all the company’s apps.

Discussion.

Without a rule book for how the designs function and look, each product becomes an example of the whims and biases of the designer, product manager and engineers that worked on it. In a small company with just one product, that’s not such a big deal. But once you have more than a single digital product–even just an app and a website–those inconsistencies across branding, UI and UX begin to drag on the whole team.

It’s easier for everyone if once a decision is made about how users will create an account, that decision applies to all instances of account creation. That means you don’t have to litigate the user flow for each new app or website. Engineers can pull the code and with small tweaks reuse it in new products. And designers don’t waste their time making duplicate user flows and login pages for every product that crosses their desk.

The duplicate efforts alone can extend the production time and cause frustration not just for your design team but also for users. Consistency means less work, less ramping up for users, and less stress for PMs trying to meet deadlines.

These days design tools like Zeplin make creating design systems very easy.

If you haven’t used Zeplin, it’s a platform for handing off design artifacts to engineers (primarily) and stakeholders. One main advantage of tools like this is that they nearly automatically build a design system for you, out of the artifacts you push to the platform.

Another advantage is that they write their own specs, so you don’t have to call out colors, fonts, line spacing or any other spaces. For those of us who’ve lived long enough to remember doing all of that by hand, it’s a godsend. It saves days of work.

There are several drawbacks of design systems that it’s good to be aware of, and work to mitigate:

  • It requires nearly constant updating and management. A messy, stale design system with old artifact and old styles is worse than no design system at all.
  • It can hamper creativity. If a system is already in place–and is fairly unflexible and ridged–you may find it hard to innovate on styles and interaction patterns easily.
  • It can be very complicated to use, especially if you work in a company with many products, requiring you to learn multiple systems and work within them.

But compared to the chaos of not having a defined style guide and established user flows and interaction patterns, none of these drawbacks make it strategic to forego a rigorous design system.

Objectives

  • Understand the uses of design systems

  • Learn the components of a design system

  • Practice creating design systems for your products

Tips & Tricks

  • Create the system on a platform like Zeplin or Google Sites where you can continually update and rearrange elements
  • Separate the visual design requirements from the patterns (e.g. put fonts, colors, headings and logos in one section, put user flows for patterns in another, keep all the buttons, input boxes and other visual elements grouped together for easy finding.)
  • Don’t be afraid to organize and reorganize the system as you use it. UX your design system until you have an organization that works best for you and your team.

Resources

Your Assignment

Create the beginning of a design system for one of your products.

Using either one of your previous flows or sketches, or looking at an established digital product, sketch out the main elements of a design system for that product..

  • Be sure to include visual UI elements (e.g. What do buttons look like? What do input boxes look like?)
  • Be sure to include branding guidelines (e.g. logos, taglines, color pallet)
  • Be sure to include interaction patters (e.g. user flows like creating an account; transitions, like what a submit button does when users tap it)

Deliverables

Create a pdf and share your design system in the comments and/or on Dribbble and Twitter #100daysdesign.