Design Systems and Components

---

Design Systems

Design Systems are exactly what they sound like: a method of architecting our design in a cohesive and identifiable manner. This makes it so the look of what we build has a definable style and is consistent - in all facets - from end to end.

Design Systems take work up front, but that pays off in the long run. Because we're defining the values of our style ahead of time, it makes it less cognitively taxing while in the development phase of our site. Our design system will essentially be a single source of truth telling us what colors to use, which typefaces need to be loaded, what kind of padding inside of components and margins outside of them will make everything 'feel' right, etc. We make the decisions early on so, as we're writing code, we can fly and quickly iterate during the development phase.

Visual Hierarchy

An important component in design is visual hierarchy. Essentially, this is how we arrange elements to signify their importance. However, 'arrange' is a wide-reaching term. We can arrange elements on several axes on the page; reading from top to bottom or left to right can signify importance and imply rank-ordering of elements. Alternatively, as we'll see below, 'arrangements' can refer to how we use color, font size, font weight, negative space, and a multitude of other factors to implicitly communicate information to our users.

When looking at a design and considering the visual hierarchy of the elements in a component, ask yourself these questions: "What is being communicated to me? Where does the designer want my attention? Why?"

Colors

Color can be a lot of fun to work with. It can also be frustrating for people that feel less than super-artistic. There are some great tools out there for generating color palettes for you during your design phase; however, they can be overkill.

We'll focus on using only a few colors with several variations of each. A hallmark of great design is simplicity. As such, we don't want too much on the page distracting the user from our intended points of communication.

We'll see more detail in the video at the end of this lesson, but consider the following points when generating a color palette to use in your design system.

• Choose one a primary color to give your site an identity or 'brand'
• Generate a series of greys and that can be used to layer elements and create a comprehensive feel
• Select an accent color and create some variations that allows you to draw attention to certain areas

Color Values

While we could go into our CSS and assign blue as the color value of a background property, that wouldn't look great. In reality, that string blue is being processed by the browser and, instead, is rendering out a value on an RGB (red, green, and blue) color scale. As such, we have other methods of providing exact color values to the browser so that our iconic red is really our red and unique to the red baked into the browser's rendering engine.

RGB

You're probably most familiar with the idea of RGB values. Maybe not in the sense of how to write them, but in their principle: a certain 'amount' of red, green, and blue together to create a 'new' color.

In CSS, RGB value are written like this:

1body {
2    color: rgb(255, 0, 0) /* This would be 'red' */
3}

Hex

Hex values allow us to be a bit more exacting and, for the past several decades, have been most commonly used to define color schemes on the web. 'Hex' is short for hexadecimal. Hex has been very popular thanks to the sheer volume of colors available (~17 million). Hex is base-sixteen and is commonly used in computer science. For us, we just need to know that it's communicating the same information as the rgb schema above. That red we used in the previous snippet looks like this in hex:

1body {
2    color: #FF0000 /* This would be 'red' */
3}

What's really happening here is that the six digits we see can be split into three pairs to represent that amount of red, blue, and green present in the color.

HSL

HSL, or hue, saturation, and lightness is what we'll opt for in this course. These are concepts that we're much more physiologically familiar with; our eyes can perceive the hue of a color and how saturated/light it is. This method makes for a much more natural way of selecting colors.

An HSL value for red would look like this:

1body {
2    color: hsl(0, 100%, 50%); /* This would be 'red' */
3}

HSL works on a color wheel where the first value - hue - determines the ROYGBIV (red, orange, yellow, green, blue, indigo, violet) color:

• R: 0°
• O: 30°
• Y: 60°
• G: 90°
• B: 240°
• I: 270°
• B: 300°

Type

Type is a place where we can have a lot of fun and provide some subtle clues to our site's personality and identity. Type is not the same thing as a font; a type, or typeface, is typically considered a collection of related fonts; fonts refer the characteristics - such as weight and style - within that typeface. Often you'll hear typefaces referred to as families.

Style

The style of the type will typically fall into one of two categories: serif or sans-serif, commonly referred to in shorthand as sans (meaning without in Latin). The serif refers to the finishing of a stroke on a typeface.

Typically, sans fonts are seen as a bit more fun and communicate that something is meant to not be so serious. They're also seen as more modern. On the other hand, serifs are usually reserved for more formal, corporate-feeling sites.

Font Size

We'll need a few different sizes to denote the hierarchy of our elements, but we want some consistency. Fortunately, there are great tools that allow us to generate a scalable system of moving from really big to really small text on our sites.

Typically, fonts are measured using a pixel, or 'px' unit. However, you'll also see things like rem and em which stand for 'root element', and 'element.' These values are relative to values we define globally for a site or to an element itself; we'll go into more detail about which units to use when we actually develop our first site.

Font Weight

As the name suggests, the weight of a font refers how thick it is. Font weights are a great way of subtly introducing hierarchy into our site. A heavy weight with a large size commands our attention while an incredibly light weight allows our eyes to dance across the information.

Space

Space can come in a few varieties. However, the two most common terms you'll hear are padding and margin.

The padding of an object refers to the space that exists between the content of an element and its boundaries; or, how much 'cushion' it has to its own edge.

Alternatively, the margin is how much space exists outside or around the element. Essentially, how much personal space does it need?

Both of these values can be used to create layouts that ensure our content isn't crowded and claustrophobic.

Components

Components are a helpful way of thinking about your design. Inherently, there will be elements on our sites that repeat; there's no need to redesign or rewrite those elements each time. As such, we can abstract away these pieces and create components, or reusable elements that can be inserted into our design and development. This, again, makes us more efficient and helps to ensure our site has a consistent and thoughtful interface.

As an example, consider this site. Each lesson you visit could be considered a component. There's a layout with content that's filled in from a database; the title goes at the top, the standards are listed out for you, and then the content is piped in. Instead of rewriting the code for each of these lessons, we can use a component as a template to simply feed in the necessary information.

This concept is critical for what will be the end-goal of our course: designing a modern web application using component architecture.

Iteration and Design

It's important to note that this is an iterative process; that means it won't be finished in one pass. The design-development cycle takes time and takes revisiting to ensure the end-product is as good as it can be. As you're working through the activities associated with this lesson, and the project at the end of this module, remember that feedback is critical.

---

Previous and Next Lessons: