Hello friends. We took too long a break in the “Design School for Developers” series. It's time to catch up on what we are going to do in the near future. One of the key elements of the composition is understanding how to build consistency in your projects and how to display the relationship between each of the elements on the page.

We build according to what?

First of all, one of your main goals should be to build a relationship between the user and the site. The reason is to create a trusting relationship with the user so that they feel comfortable interacting with the website. Through design and functionality, you can offer your users the best experience.

Creating consistency in your design also helps strengthen your brand. I think it is clear how important this is for business: it will help to gain customer confidence and increase sales / inquiries. But even if you yourself are an individual, you need to understand the importance of brand coherence. In this case, you yourself are a brand. Even if you have a personal blog on the Internet, you should take care of your brand and image. Sometimes, especially in the web industry, it is even more important to build the coherence of your own brand, as it helps to make you unique.

Creating consistency is also building relationships between the individual elements in your design.

Why is it so important

The fact that you are working on the Internet does not mean that the values ​​of traditional offline marketing and design should disappear. Instead, you should make sure that the transition is invisible.

For example, if you are working on a traditional store's website (with real sales premises!), You should take care to display the brand in the site design. You want to make their visitors happy so that they feel comfortable when browsing a website that they have known directly from their first visit. In general, consistency makes the design more solid and reliable.

It is also important to think about consistency in general. Instead of just thinking about how visually everything could look and how to keep these things in alignment, you also need to think about the interaction and behavior in your projects. Think about how the user will interact with your site, think about the animation, the various elements and how users can react to it. If you significantly change these models from page to page, you will only bring down your users.

Inc site has a clear visual style that represents the brand well throughout the site.

Online Inc clear visual style that represents the brand well throughout the site.

inc-2

Design with consistency

Designing with consistency in mind is quite simple. As I explained earlier, this helps keep the brand visually strong, and the relationship between the brand and its customers at a high level.

Think about how you designed your design elements such as:

  • colors (primary, secondary)
  • visual elements (images, photos, icons, buttons)
  • typography (size, hierarchy, positioning)
  • size (content, images, links)

Think of the visual style of these elements as they play in the whole mechanism. In previous series of lessons, you learned how to use color, size, and visual hierarchy to focus on specific elements. Now it's time to think about how all these elements fit together.

Also, make sure that consistency is maintained from page to page, unless, of course, this is not a special design feature. But even then, it is super important to be consistent in the elements that are likely to remain the same - for example, the logo or the position of the navigation. Building consistency - these are small details that can go unnoticed by the majority, but even then will subconsciously give them the best impression.

Site OnSite has a great brand, with a simple design.

At the site OnSite great brand with simple design

onsite-2

We build consistency in design

Colour

As it turned out in previous articles in this series, color has a huge impact on people and their perception of design. While you cannot focus on personal associations with the color of each person, you can use color in a broader sense to build a relationship between the likely target audience and your design.

Tone

Tone is important in any design, it makes a great impression on users. The tone can be found in any aspect of your design: from content to images and any other visual styles that you have.

Add personality to the brand - it will be great. And you can do it through what you learned about color and typography. Thin decisions, like this, show individuality, which can then be enhanced by the content, images and visual style in your design.

User preferences

Also think about what kind of associations your brand may cause the user. Think about what kind of associations and feelings you want to evoke among users with your brand and try to reflect this in the design. And use the sequence in your design elements to project these feelings onto the site.

WooThemes has a great visual style and tone throughout the site. What is the hardest thing to do when you have big sites like this?

У WooThemes Excellent visual style and tone throughout the site. What is the hardest thing to do when you have big sites like this?

woothemes-2

Tools for building consistency

There are many tools that you can create yourself, or provide to your customers to help them understand the importance of consistency.

Style guides

The style guide is almost like ordinary design and brand guides you could work with. But they relate to some of the key styles and design elements of your site.

Template Libraries

Template libraries are the next step after the style guide. They document all sorts of styles of elements that are included in the design of the site. From text styles, buttons to list styles and image templates. These template libraries can be very useful for the future maintenance of the site design and ensure that consistency is maintained for any future changes. I used to divide such libraries into 3 parts:

  • Design Model- any design element that is only on the site. These are all styles for text, headings, buttons, icons, etc.
  • Markup Model- This is an HTML & CSS copy of the Design Patterns library intended for the future maintenance of the site.
  • Content Templateshelp dictate the style and tone of the content to be used on the website. Although it is unlikely that you will be able to provide accurate content (as you know, the site may expand in the future), you can at least help set the tone for future work. At the same time, the content may not be what you provided to the client. This may be an idea so that they understand that the content is just one part to make your site more consistent. You can also provide design and development that may not best fit the content that does not fit the rest of the site.

Checklists

I'm a big fan of lists. Therefore I consider that it will be easier to check how the elements of your design agree by answering the following questions for myself.

  1. First of all, how is the typography going? Is it consistent? Do the headers from page to page match? Do the strings fall into a vertical rhythm? Is the rhythm lost during the introduction of pictures? Or does everything look good?
  2. What do the images look like? Do all images have the same style and tone, or are there wildly different styles? Is everything cropped in a similar way, or different? Are the sizes of the images / icons or different sizes throughout the design? Do the buttons have the same indents?
  3. How do the colors look? Do colors work well from page to page? Do colors fit together well? Do colors change where they are used more than once?

Tasks

All of the above should help you when you are trying to create a design with consistency between each of its elements. I want you to use the checklist at the end (or create your own) to see how consistent your design is. If this is not the case, take the time to build consistency in your projects.


Hello! I am the creator and author of this web design blog. Here you will find many useful lessons and articles on topics such as website creation, web design and layout.