Architexture

The notebook of Jamie McCue. A collection of pieces from around the web that inspire my work and thinking.

Design Systems

As I work in a small startup environment some days resources can be spread pretty thin. With multiple applications in development and different team members needing to make decisions independently it only makes sense to follow a plan. This got me thinking about how to best do our job as designers, developers and product managers building a web application together.

I wanted to share some thoughts on a high-level approach I chose to take while learning about and building a design system. As designers, we need to show how products work together, so we don’t have to create something new every time.

“We’re not designing pages, we’re designing systems of components.” —Stephen Hay

I’m interested in what design systems are comprised of and how we can build them in a structured and meaningful way. To do this it’s important to establish some high level goals: organization (structure and approach), maintainability (guidelines and conventions), responsiveness (platform agnostic) and scalability (growth).

Think of an application as made up of modules, components, interfaces, and data. Not as individual pages, but as a design system, a high level architectural blueprint. A design system is bringing all of these conventions together in a way that allows your entire team to learn, build, and maintain consistency over time. The always shifting digital landscape needs this type of modularity. A living design system will save you and your team time by creating a centralized reference point. It’s much easier to understand the workings of a design system in a guide than to fire up Photoshop and look through PSDs.

A design system helps with establishing foundations for visual hierarchy, color, typography, grids, iconography, codebase conventions and the like. When considering the design of a whole product, the system should also include patterns for user-flows, content strategy, copy, even tone of voice.

“Advantages of design systems: promote consistency, establish a consistent vocabulary, create more robust deliverables, establish a system that can be modified and extended.” – Atomic Design

Creating a design system that allows for a cohesive experience across platforms and devices gives the flexibility needed for coping with the unknowns of the future. This consistent user experience is the true sign of a products success. There is a strong need to keep experimenting and testing, particularly in this area of design.

“Designing a system involves working from the content-out to design a toolkit of modular, reusable content components and an underlying grid structure.” – Stuff & Nonsense

The visual design stage of design is much more subjective and easy to get distracted with early on. Better decisions are made by giving weight to the function and purpose of the tools your building. Resolve the function first, and then move onto the more aesthetic decisions once a plan and purpose is in place. Having a design system and styleguide in place directly benefits and compliments the UX, design, front-end and backend stages of development.

One methodology for granular design systems I’ve found particularly interesting in terms of breaking things down into the fundamental building blocks is Atomic Design, which considers its parallels to chemistry. Brad Frost is writing a book about Atomic Design.

For more information on styleguides and design systems see styleguides.io.

I will continue to iterate on this post and add examples.

this way ↝