Imagine building a website using a different color for each button, a different font for each block of copy, and a different company logo variant on each page header. Did you maybe not have to imagine? Did you maybe picture a real live website? Of course you did. This is the current state of over 85% of websites online, according to my frustration. All joking aside, this is what building without design systems often looks like.
This is the biggest UI nightmare facing the design industry. Initially you may think “Yep, that’s what happens when Joe Bob and Sue take their General Store brand into their own hands.” Sometimes this is the case; business owners who lack an understanding of branding and design fundamentals can be seen doing some painfully “creative” designs when left to their own devices. More often than not, however, it’s the fault of the design team!
Bad design doesn’t always come from bad designers, and good designers do not always produce good design. This is because good design doesn’t lead with form, it leads with function. Good design goes beyond uniqueness and creativity. Good design is organized, it has an objective, and if it’s really good, it accomplishes it.
To ensure your designs are built for killer conversions and bad-ass business growth, there are some vital considerations. As the title suggests, crafting a component-based design system is our prescribed answer. The design system building process eliminates design debt, lays the rails for scalability and design consistency, and actually supports creativity!
WTF is Design Debt?
Design debt is when you design for the short-term solution, and build things/styles that can’t be reused again. As more time passes without a focus on a design system, the design debt accumulates more and more in a sort of backlog of garbage. Think of it literally as garbage: used and then thrown away…on top of an ever growing heap of garbage.
No recyclability means no consistency. No direction means no process.
Attaining consistency and eliminating your design debt begins with gaining clarity. This clarity is then used to build your brand piece-by-piece starting from the smallest building blocks. These blocks are inherently recyclable, and when embarking upon larger brand-constructs, the large productions result in consistency as well!
But how does one go about identifying these building blocks? There are many strategies, but “Stylescaping” is our method of choice.
WTF is Stylescaping?
Stylescaping is the process of curating lots of design options and mashing them into several distinct “flavors” or “styles”. Similar to creating a mood board you leave with a handful Stylescapes that showcase the overall look and feel of the brand. More importantly, however, you discover the tiny components that make up the sub-structure.
These design components can be things like border widths, corner elements, gradients, overlays, fonts, stock photography styles, etc. Once you’ve designed several Stylescapes and one champion wins out over the others, log its building blocks. Compiling and cataloguing these design system components will help you envision how future design applications will flow. It will be easy to see how the brand essence will weave through things like digital display ads, magazine spots, print collateral, and everything else.
This initial organization process (though sometimes tedious) guarantees a solid brand foundation. This foundation is imbued with the corporate vision, but still engineered for scalability and consistency.
Learn more about our stylescaping options and how we develop solutions for our clients.
Mild – Stylescape 1
Medium – Stylescape 2
Spicy – Stylescape 3
Design Systems = Design Consistency
Consistency is king. Component recyclability means designers can reuse components often to create expectability and reinforce standardization. This predictability then provides a seamless UI (User Interface) for an effortless UX (User Experience).
Ultimately, this means that users can interact with ads, interfaces, and collateral in an uncomplicated way. This encourages the sale rather than blocks it.
As Marco Suarez states in Chapter 2 of the Design Systems Handbook:
“Understanding not only the what, but the why, behind the design of a system is critical to creating an exceptional user experience. Defining and adhering to standards is how we create that understanding.” – Marco Suarez
Myths of Design Systems
Design systems can sound like creative death for designers. The belief is that design systems are limiting and create unnecessary and constraining boxes. We love the “think outside the box” and “move fast and break things” philosophies, but shouldn’t we first know how much space this box actually has before we condemn its constraints? Shouldn’t we learn the rules so we know which ones to break and which ones to use?
Yes we should!
More often than not the box is way bigger than we think, and most of its rules are pretty decent. There is space to run and jump and frolic like mad, while still doing so along the rails of a scalable design system. The rules that govern most design systems succeed much more often in enabling efficiency than the times they fail and their bureaucracy hampers creativity.
These myths simply crumble when tested against real case studies. Look at Apple, the first trillion dollar company. Look at Google, chomping at their heels. The systems that govern both these companies’ designs have not only fueled their growth, but these guidelines have empowered artists from all over the world to collaborate on ultra-creative, multi-award-winning campaigns…that all manage stay true to the brand essence….because they used the same design system.
Now, imagine the time, effort, and money wasted if each of either of these two massive brands began each project from scratch. Boy howdy…
“Design systems are not a fad or even an untested hypothesis. For design to find the scale necessary to match the rapid growth of technology, component-based design and development is a proven and dependable solution.” – Marco Suarez
Design debt is costly. Design systems are cheap. Invest the time up front and lay the foundation of all your future brand assets from the start. Your bottom line will thank you.