Design consistency is a design principle I care about, notice very fast, and get frustrated about all the time. 😅

When I’m designing and get to the final phase of the design process, I go all in on details. Personally, I enjoy well-crafted websites or applications that don’t neglect the details. In my eyes, attention to detail in an application can make or break it. It shows professionalism and that the creators think about their product and want to invest time in it.

In this blog, we will go over design principles and, more specifically, design consistency. First, let's define 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 designing 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 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; many new principles have been defined since then.

TIP: Dieter Rams' design principles explained using his products designed at Braun. Definitely worth checking out! 

Design consistency principle

One of those principles is the principle of consistency. Consistent means always behaving in the same way, having the same attitude, or achieving the same results. It is a principle you can follow in life or in design.

I think the meaning of consistency is very clear regarding 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 of 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 and learnability. It simply feels good because things look the same way and function the way you expect them to. By default, humans try to be consistent because it feels secure and safe when things look similar and function 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

You can distinguish two types of consistency in design: visual and functional. ****Take the example of the button. Visually, the button uses the same color as all buttons, is the same size, and has the same animations on hover. However, consistency 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.

Doesn’t this limit my creativity?

It speaks for itself that you don’t have to limit yourself. You are meant to experiment and try new things when starting a new project from scratch. You probably have to redesign multiple times — compare, review, test, be blocked, and start over again. However, when finalizing your project, it makes sense not to have 20 different fonts throughout your product and a bunch of buttons that trigger different actions.

Tips and tricks to fix consistency

Telling what design 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 tips to think about and check with on your next project. Full disclaimer: I’m not perfect, so I don’t always follow the rules. Even though I think consistency is vital, sometimes my design work can lack consistency. However, I try to follow these tips as best I can during a project:

• Try to use a design system when designing a website that is a little bigger than your average one-pager. This can even be a very small design system. Doing this 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 did I do this?

‍

Conclusion

Personally, in the first phase — the experimental phase — I tend to be very unorganized. I move frames around, drag images inside, use different fonts, create x amount of links. To be honest, most of the time, I don't clean up my experimental file. However, when it comes to the final design, I am very aware and try to be as consistent as possible. I simply go crazy when something has 30 different border radiuses. Maybe it’s just a me problem, but I’m sure I’m not the only one paying attention to these details. 😄