Before we talk about design, let's first talk about food.
Anytime you sit down to eat, you're likely consuming something that was created out of other smaller parts.
For instance, this salad...
Source: newpragmatic.com
While most people would refer to this as a particular type of salad, few would walk up and congratulate you for eating a pile of lettuce with egg, bacon bits, tomatoes, cheese, onions, etc.
Your salad is an example of a larger item that is formed from the combination of many smaller items.
If you look closely, it is easy to find other items in your life that follow this same pattern. A TV is just a carefully constructed collection of smaller parts. The same can be said for a jacket or a pair of shoes.
This dynamic also applies to most of the designs you've ever encountered.
While your favorite shopping site might be made up of numerous pages, those pages can be broken down. Individual sections are just collections of forms, links, images, and buttons. All of these items come together and make it significantly easier to build and maintain digital experiences of all sizes.
Ultimately, this all boils down to scale.
Organizations can do more, both faster and cheaper if they take time to standardize their products. However, before you begin to see images of a Henry Ford assembly line, understand that digital assets are easy to replicate at a low cost. Once a designer has invested time into constructing assets, other designers and developers can begin leveraging that work.
Ultimately, these assets grow together into a more extensive system. Whether you end up calling it a 'Design System' or not, doesn't matter as much as what it will allow you to do. A case study from Lean UX best describes the impact such a resource can have.
General Electric (GE) created a 'living style guide' if they were to ever successfully see design make a meaningful impact on their organization. Unfortunately, designers at the organization were outnumbered by developers 500 to 1. Without a way to successfully collaborate with that army or developers, designers at the company didn't have a chance to make an impact. However, through the careful creation and documentation of their 'style guide,' the companies' legion of developers had a document to work from on small projects and source material for collaborations that would always accompany more significant initiatives.
As a designer, you won't always be working on specific projects. Thinking about your work as a means to empower others around you is the best way to prepare for the growth and success of your organization.
Resources for review
Exercise
One of the best things about Figma is that it is straightforward to get started. One of the worst things about it is the fact that we can very easily create messy, bloated files that are difficult to use.
This series of exercises will undo many of those bad habits. It begins by creating and organizing color, type, and grid styles and while building components using Figma.
Using the provided Figma file carefully read the instructions below before attempting the exercise.
Part One: As a new member of the team, you have the task of creating a new section for the website. Unfortunately, the prior templates were all built-in another program. It is time to build the new assets in Figma.
Using the artifact provided as a starting point, help the team out by creating the color and type styles for elements present.
Of note, the example uses both Mulish and Open Sans as its default typefaces, so you will want to use them both in the styles you create. Be sure to create styles that match the usage shown in the examples provided (I personally wouldn’t use Muli and Open Sans together — but the employer in this project does.)
Watch this video for guidance on loading the typefaces for use in Figma if you do not already have it.
Part Two: Building upon the styles created in Part One, the next logical step forward is to create a component for the elements present. Be sure to organize the components. The rest of the team will eventually use the assets.
Part Three: The marketing team has provided the desired content, but it does not fit any of the existing design components. Create a new component to serve as the foundation for this new material.
///
Once complete, update your Program Journal with links to the assets produced for this exercise. Post your Journal in the #Feedback-Loop channel for review.
Up next Components