Design Consistency: From chaos to order when designing

Design consistency is a design principle that I care about, notice very fast, and get frustrated about all the time. When I’m designing, and creating new stuff and I get to the final phase of the design process I go all in on details and enjoy well-crafted websites or applications that don’t neglect the details. In my eyes the attention to detail on an application can make or break it, it shows professionalism and shows that the creators care and think about their product and make time for it. First lets look at the definition of design principles.

#What are Design Principles?

Design Principles are a set of considerations that form the basis of any good product. In my words: guidelines to help designers with decision-making. The very first well-known principles came from Dieter Rams, a well-known industrial designer who you may know from his work at Braun. He shared a list of principles that define good design. Now you may think, how is he going to say what is good or bad? What is even good? Isn’t design a bit personal?

Well, these are the same questions he asked himself when defining the principles. He made them broad and clear to avoid this misconception and to let the designer interpret them in their own way. These are Dieter Rams’ principles:

• Good design is innovative
• Good design makes a product useful
• Good design is aesthetic
• Good design makes a product understandable
• Good design is unobtrusive
• Good design is honest
• Good design is long-lasting
• Good design is thorough down to the last detail
• Good design is environmentally-friendly
• Good design is as little design as possible

When reading these principles you can see that they are clear, define a well-thought-through product and describe something you want to use. At least that’s the feeling I’m getting from them. Of course these aren't the only principles, a lot of new principles have been defined since then.

→ Dieter Rams' design principles explained using his products designed at Braun. Definitely worth checking out! https://rolling.design/en/blog/dieter-rams

#Design consistency principle

One of those principles is the principle of consistency. Being consistent means to always behave in the same way, to have the same attitude or to achieve the same results. A principle you can follow in life or in design.

I think the meaning of consistency is very clear when it comes to design. A button always needs to look the same, a link should redirect you to another page, if the navigation is on the top, it should be on the top on every page, body text should be the same size everywhere, and so on…

#Why be consistent when designing

Being consistent has a lot of advantages, it improves usability, learnability and just feels good because things look and function the same way and the way you expect them to. By default, humans try to be consistent because it feels secure and safe when things look and function in a similar way or the way we expect them to.

Other benefits:

• Being able to handle the product faster
• No confusion when using your product
• Feels good to use

#Different types of consistency

There are 2 types of being consistent, as mentioned with the button before it can be visual, the button uses the same color as all buttons, is the same size, same animations on hover. But it can also be functional, you expect a link to open a new window and a button to trigger an action, not the other way around.

You can distinguish 2 types of consistency in design, visual and functional.

#Doesn’t this limit my creativity?

It speaks for itself that you don’t have to limit yourself, when starting a new project from scratch you are meant to experiment, try new things, and explore. You are meant to redesign your design x amount of times and compare, review, test, be blocked, and be happy when designing. But when it comes to finalizing your project it makes sense to not have 20 different fonts throughout your product and have a bunch of buttons that trigger different actions.

#Tips ‘n tricks to fix consistency

Me telling what principles are, what consistency is, or what the benefits are isn’t directly going to help you be more consistent. Let me give you some of my tips to at least create a base to think about and to check with on your next project. For full disclaimer, I’m not perfect so I don’t always follow the rules and sometimes also lack consistency in design work but I can give you some tips that I try to follow each time I work on a project.

• When designing a website that is a little bigger than your average one-pager, try to use a design system. This can be a very small one but that’s no problem. It creates a set of standards to manage your design and reduce inconsistency. Do you need something new? Create a new variant. This is especially handy during a handoff because your design system translates into general components that can be created.
• When using Figma (or Sketch): Make use of its amazing features, create components, reuse them, add properties, create variants, create color styles, … Honestly the features go on.
• Just go through your application, and ask yourself questions, is this really what I expect here, shouldn’t this be the same title as on that other page, why do I do this, …

#Conclusion

Personally in the first phase, the experimental phase I tend to be very unorganised, I move frames around, drag images inside, use different fonts, create x amount of links, … and most of the time I don't clean up my experimental file. But when it comes to the final design I am very aware and try to be as consistent as possible. Because I go crazy when something has 30 different border radiuses. Maybe it’s just a me problem but I think I’m not the only one frustrated sometimes.