Systems In Design

It’s easy to get caught up in all the elements related to building a site: content, code, design, progressive enhancement, testing, etc. So much goes into that one final deliverable, that we can forget about how the site comes across to a user, how scalable it is, and how long it can last. These questions focus on the experience of what we create. The core of brand design is that experience. In his book, The Brand Gap, brand strategist Marty Neumeier defines a brand as “a person’s gut feeling about a product, service, or company”. By following this definition, it is safe to say that what we create needs to translate into a larger, global end product, where one deliverable—like a website—isn't the product, but just one component of the product, which is the overall system. The more brand- and system-based thinking we bring into web design, the better off web design will be.

Web design already includes many visual and interactive elements, but more of the jargon and theories of branding have become standard in the web design process. Element Collages and Style Tiles, for example, are two of many techniques that all call for the same thing: systems. There are a few goals worth reaching to achieve a systems-based outcome. Those beneficial goals include creating consistency, portraying authenticity, and striving for longevity. By focusing on these three key goals that are common in branding, all elements of an experience will come together and improve the industry and how we communicate.

Consistency

In branding, consistency is the common goal. As consumers, we know what to expect from brands we are loyal to, because they are consistent. Companies want consumers who will stay loyal to their brand, and many understand they need to maintain trust to keep us around. Web projects should work the same way. Treating similar elements on a project the same way make the user understand how to interact with that type of element. Underlined links, article sub-headers, or other consistently designed elements allow users to understand the design as a language. That language can be translated from deliverable to deliverable so the brand is consistent. Once we create consistency, we can become authentic.

Authenticity

In 2013, we saw the rise of the flat design trend. Designers and non-designers head to social media to share their frustrations on sudden changes on their favorite brands’ websites and apps. While our industry benefits from the ability to have this conversation, it’s worrisome when a trend can send thousands to a redesigning frenzy. In this case, the brand was ignored. Trends aren’t authentic to every single brand. By riding the trend wave, brand authenticity at risk if the system of that brand comes and goes as frequently as trends do. Instead, define the goal of design and then build a design system that is based on a solving a problem or reaching that goal. When the design system stays authentic to that goal, authenticity towards users is maintained for the long run.

Longevity

Amazon is famous for maintaining a strong brand. They have a solid brand system in place and therefore are able to redesign iteratively without alienating their users. Unlike a lot of sudden big reveals where all elements change, Amazon has benefitted from adapting one element at a time. In fact, as a constant user, I didn’t even notice it until someone casually mentioned it. I was too busy buying books, which was Amazon’s long-term goal in the first place. Creating for the long-term not only requires understanding the system and creating a thoughtful strategy, this is a smart solution that extends the lifespan of a living system.

Design systems do not need to fit one mold. Many designers’ systems include various elements, both visual and interactive. Laura Kalbag’s design systems include typography, color, grid, and content, while Brad Frost’s Atomic Design includes five levels of elements: atoms, molecules, organisms, templates, and pages. However you choose to define a design system, strengthen it by favoring consistency, authenticity, and longevity. Start by asking if each element helps reach the end goal and then, build a design system and language that speaks to the user’s gut the way you intended.

This article was originally published in net magazine issue 254, in June 2014, and on Creative Bloq, in July 2014.