[MUSIC]

Hi, my name is Anwar.

I'm a designer, a developer and a teacher at Treehouse.

In this course you'll learn the fundamentals of design systems,

what they are and how to understand them.

A design system is a set of rules that guide the design of a website or app.

Design systems help create predictable experiences for users and

help designers work more efficiently.

And build the interfaces consistent with an organization's visual brand

without wasting time exploring design problems that have been solved already.

Imagine sitting in an art classroom.

At each table is a bucket of clay.

The teacher asks each student to take some clay and build a house.

No further instructions, just grab some clay and get building.

That's a lot of freedom, right?

But freedom, total freedom can get messy.

One house might have almost nothing in common with the next.

Now imagine the same scenario.

But replace the clay with a bucket of Legos.

Legos have parameters, they tend to be rectangular and

to interlock in a certain way.

Students can still follow their own unique vision.

But thanks to the restrictions inherent to building with Lego bricks,

you'll notice a lot more similarities and

probably more structural soundness in the Lego houses than the clay ones.

In UX design terms, clay houses are bespoke solutions,

that is individual approaches to individual problems.

Let's look at a real world design example.

In 2015, a design team of federal employees called 18 F,

examined nearly 30,000 websites belonging to the United States government.

The designers began their examination with an interface inventory.

They took screenshots of visual attributes and interface elements

across the various websites and created a document comparing them.

This interface inventory document revealed a totally bespoke process.

Each site is created from scratch, without consideration of the appearance or

behavior of existing government sites.

In total, the 18 F team documented 32 different shades of blue and

64 different types of buttons.

There was little to no consistency in the design of these sites. Talk about messy.

In addition, imagine the duplicated effort as each designer for

each site had to arrive at their own visual language,

their own solution for the same interface elements.

In essence, they were reinventing the wheel for each site.

Now imagine that these designers had guiding principles that helped them work

more quickly and create consistent user experiences.

In other words, swap the messiness of clay for the consistency of Legos.

To do this, the team from 18 F came up with a design system.

A design system is a document providing a set of design principles and

clear standards for visual styles and interface elements.

Many design systems also provide code snippets to help developers

create interactive components, as well as voice and

tone documentation to guide copywriters.

Design system components should be reusable, repeatable and stackable.

When I say stackable, I mean design system components can be assembled together

to build any number of applications, like working with Lego bricks.

Here's the United States Web Design System site.

I see categories of design guidelines,

as well as a showcase gallery of sites built to these specifications.

The design tokens tab contains rules for applying color, type, spacing, and more.

These rules establish a common visual design language for

all government websites and apps.

Imagine I'm designing a site for

the federal government and wanted to include a blue color in my design.

Instead of picking just any blue, I'd reference this document under

theme color tokens to identify a blue that fits the design system.

What if I needed to add a button to my design?

Not long ago,

designers for the federal government used 64 different styles of buttons.

But now, the design system provides greater consistency

with a limited set of options listed here under components.

This limited selection is a good thing as it creates a more uniform

experience across federal government sites for the user.

Defining clear standards remove subjectivity and

ambiguity from the design process.

And steers designers towards a product that only looks better, but

one that is more user-friendly and even more accessible.

Design systems also increase designer efficiency.

Since many basic design decisions are already made for you, you can reuse

visual styles, UI components, even code that's already created.

Working from a design system minimizes what designers term design debt.

Design debt refers to inefficiencies caused by inconsistent and

non reusable styles and conventions.

Inconsistency slows down the design process and

negatively impacts the users of your site or app.

Your goal in guiding your user through an interface is as many mindless taps or

clicks as possible.

No hesitation, no contemplation.

A consistent experience conforms to user expectations and

leads to a more confident user.

An inconsistent interface on the other hand, one where interactive cues

go missing, show up in unpredictable places, or are designed or

labeled in a way that obscures meaning, creates obstacles in the way of usability.

In your role as a UX designer, you'll likely be tasked with applying

the standards described in a design system in order to build apps and products

that can be pieced together efficiently like Legos with a minimum of design debt.

And a maximum of visual consistency.

We'll learn more about the individual parts of the design system

in our upcoming lessons.

And if you'd like to learn more about design system 18 F created for

the US government, check out the links in the teacher's notes.