Design as a System

Design needs to be able to adapt and change with the needs of the project. It can get messy and confusing, especially when you begin to introduce CSS. That is why teams have started to use design systems. They will help your team communicate and deliver a consistent design across all platforms. A design system is all the bits and pieces and components that make up your whole design. A design system is documented as a style guide. It is more important than some realize. A design system is good for the user and will save the sanity of everyone working on and building the project.

The Bits and Pieces

Now that we live in an age of responsive design, it is more important then ever to think of your design as small parts that make up the whole. We shouldn't be designing pages. When you design a system instead of a page, your design becomes much more responsive and powerful, and every element and component will have more purpose. You will stop repeating yourself. It's like being a kid and having every Lego piece that you need organized and accessible as you build your dream castle.

It's like being a kid and having every Lego piece that you need organized and accessible as you build your dream castle.

A design system does take more time up front to find, document and define components. There are a few ways of doing this, including an interface inventory, content inventory, style guide or a content audit. A style guide is indispensable if you are going to create a design system, and a living style guide is best. This will all depend on the size of the project, the size of your team or your client. A loose and agile design process can work as long as you keep your style guide updated!

Style Prototypes

Remember we are not designing pages, so how do you get creative and focus on styles? I use a style prototype for this. A style prototype is a place to experiment with color palettes, button styles, background styles, font stacks and other important style elements. It's just an organized collage of design elements that help you understand what the end project will feel like. I have also heard of people using Style Tiles. I usually use Sketch for this.

Example Style Tile

I prefer to do the majority of my designing in the browser. A style prototype allows me to have fun and experiment without having to worry about layout. I work on specific components in the browser and my actual design might diverge from the style prototype as the project develops. 

Consistency and Experience

The main purpose of a design system is to develop consistency in the user's experience. It will increase the user's learn-ability, scan-ability and memorability. Well-defined colors and buttons, for example, will allow the user to instantly be able to tell what an error means, or what a button does, without even reading the copy. A good example would be using a red button for all actions that are destructive.

You can see how Lonely Planet defines what each color is used for in their style guide. 

Another way of improving your consistency is to use a visual hierarchy and create a typographical rhythm. When you use a visual hierarchy, the user can spatially visualize what content is more important and what is less important just by scanning. This way, your user will have a much better chance of quickly scanning the page and finding what they are looking for. Your interface and website will also have standardized layout elements like margins and padding, which are much easier to develop with than the random, arbitrary amounts that come from "eyeballing" a page design. Just use variables such as .margin—large, .margin, and .margin—small.

Design patterns are a language that the team, the client and the user can all understand.

Consistency in design will also cut back on development time. A developer will not need a ton of documentation to tell them what size a font needs to be, what spacing to use, or what color they should choose for a certain situation. At some point they might learn the design system so well that they can get into the flow without ever checking the design documentation or style guide. QA’ing, debugging and updates will all become so much easier once the team learns to communicate in your project's design language.

Conclusion

Adapting a design system for your project can be a life changer. It takes a bit more work and more discipline but that is a small price to pay to make everyone's experience better. I could go on and on about its benefits, but I will wait to expand on these ideas and show you my process in future posts.