Advertisement

Building Consistency and Relationships into Your Designs

by
Student iconAre you a student? Get a yearly Tuts+ subscription for $45 →
This post is part of a series called Design School for Developers.
Adding Space to Your Designs
Reducing the Bloat

One key part of composition is understanding how to build consistency into your designs and how to display the relationships between each of the elements on the page.


Building Consis- What?

First up, one of your main aims with any website should be to build the relationship between the user and the website. The reason being to create trust with the user, so that they feel comfortable with navigating and interacting with the website. Through design and functionality, you can then offer your users a better experience.

Building consistency in your designs also helps to strengthen your brand and keep a brand's message clear. For a client, it's important for their business that their brand's message (whether online, offline, or in any other medium) is consistent as that will again build trust with their customer base. If a brand's message is inconsistent, confusing or difficult to understand, this can be off-putting to customers and can even affect sales and enquiries, ultimately having a detrimental effect on your client’s businesses.

Even yourself, as an individual, need to understand the importance of consistency in your brand. You, yourself, are a brand. Even if you have a personal blog, you are putting yourself on the web and should care about your brand and image. Sometimes, particularly in the web industry, it’s even more important to build a brand consistency for yourself, as it helps to set you apart and make you unique.

Building consistency and relationships into your designs is also about building relationships between the smaller, individual elements in your designs.

The gov.uk website is extremely consistent, reflecting the tone and professionalism that is expected of the Govenment website.
The gov.uk website is extremely consistent, reflecting the tone and professionalism that is expected of the Govenment website.
govuk-2

Why This is Important

Just because you’re working on the web, it doesn’t mean that the values that are seen in traditional, offline marketing and design should disappear. Instead, you should make that transition seamless.

For example, if you’re working on a website for a traditional shop (that has actual, retail premises!) then you should carry that brand through to the design you create for their website. You want their users to feel happy and comfortable in browsing their website, knowing that it is familiar to them - even if they’ve never visited it before. All in all, designing with consistency in mind makes for a more solid, trustworthy design and design system.

Designing with consistency also has an advantage for you, as a developer. Have you ever had a design supplied to you that was inconsistent, with widely different margin, font and spacing sizes? It’s really annoying, isn’t it? If you instead design with consistency, you are going to be able to spot patterns in your design that will help you when you’re in the development stages, thus speeding up your development workflow and reducing the amount of time you have to spend figuring things out.

It’s also important to think about consistency on the whole. Rather than just thinking visually about how things might look and how to keep those things consistent, instead also think about the interactions and behaviour patterns in your designs. Think about how the user will interact with your website, think about animations and how different items might react to the users input. If you change these patterns drastically from page to page, you’re only going to confuse your users.

At inc, there is a clear visual style that represents the brand throughout their website really well.
At inc, there is a clear visual style that represents the brand throughout their website really well.
inc-2

How to Design with Consistency

Designing with consistency in mind should be quite simple. As we’ve explained earlier, consistency helps to keep a brand visually strong and the relationship between a brand and its users, or customers, to a high level.

One age-old marketing technique is to design by repeating your messages to help your users remember things. While this can be utilised in your designs, it’s consistency in another way that I want you to think about more.

Think about the way that you design all of the items in your design, such as:

  • colour (focus, secondary colours)
  • visuals (imagery, photos, icons, buttons)
  • typography (size, hierarchy, positioning)
  • size (of content, imagery, relationships)

Think about the visual style of these elements and how they play off against each other. You’ve learned how to use colour, size and a visual hierarchy to lend focus to particular elements, now I want you to try and think about how you can make all of these elements consistent in some way. Just like we wouldn’t (normally!) use eight different typefaces in one paragraph or area of our design, we should be the same with our other design elements.

Building consistency into your designs is all about the small details that might go unnoticed by most, but even then will sub-consciously provide them with a better experience. However, it’s the small details that will be appreciated by those that do notice the extra time and attention that has been spent on those extra things.

Also make sure to be consistent from page to page (unless it’s specifically a part of that design to have a different design for each page, such as on an art-directed blog). But even then, it’s super important to be consistent in the elements that are more likely to stay the same - such as the way the logo or navigation is positioned. It’s important to not abandon every aspect of your design and to instead build familiarity in the areas that are more suited to being consistent.

The onsite website has a great brand, with a simple design that sticks true throughout the homepage and other top-level pages.

The OnSite website has a great brand, with a simple design that sticks true throughout the homepage and other top-level pages.
onsite-2

Building Relationships in Your Designs

Colour

As explained in earlier articles of this session, colour has a massive impact on people and their perception of design. Whilst you can’t focus on every individual's personal relationships to colour, you can use colour in a broader sense to build a relationship between a likely target audience and your design.

Colour has an impact on people personally - both mentally, through emotions or feelings and also physically - and this can come across in the brand, hopefully building stronger relationships between the users and the website, if the message is kept consistent.

Tone & Character

Tone is important in any design and makes a big impression on your users. Tone can come across through any aspect of your design, from the content through to imagery and any other visual styles that you have.

Adding personality to a brand is also absolutely fine, and you can do that through what you’ve learned about colour and typography. Subtle decisions like this show through in the personality that you can then enhance through content and imagery, building a consistent visual style in your design.

User Perceptions

Also think about how a user might associate with your brand, and how they would feel about it. Think about how you might want your users to feel when associating with the brand and try to reflect this in your design. Take these feelings and perceptions that you want your users to have and use consistency in your design elements to project these feelings through the website.

WooThemes have a great visual style and tone that's set throughout all of their website - which can be more difficult to do when you have larger sites like this.

WooThemes have a great visual style and tone that's set throughout all of their website - which can be more difficult to do when you have larger sites like this.
woothemes-2

Tools for Building Consistency

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

Style Guides

A style guide is almost like a normal design and brand guideline that you might work with, but instead of being related to just the brand, it instead relates to some of the key styles and design elements in your website design.

See: Style Tiles for further ideas.

Pattern Libraries

Pattern libraries are like a step ahead of a style guide; they are a document of every possible style of element that is included in your website design. From text styles, button styles to list styles and image patterns, these pattern libraries can be really useful for future maintenance of a website design and to ensure that consistency is kept in any future changes.

I like to think of pattern libraries for three key areas: design patterns, markup patterns and content patterns.

  • Design patterns: Any design element that you have on your website. This will be a document that includes all styles for text, headings, buttons, icons, etc.
  • Markup patterns: These are a HTML & CSS copy of the Design Patterns Library - with the correct HTML (and relevant CSS class, if necessary) provided for future maintenance of adding sections to the website.
  • Content patterns: These help to dictate the style and tone of the content that should be used on the website. While it’s unlikely that you will be able to provide exact content (as you don’t know how the website may expand in the future) you can at least help set the tone for future work. While content may also not be something that you have provided for a client, it may be an idea to ensure that they understand that content is only one part of making your website more consistent - and while you can provide the design and development sides, it may be difficult to have these perform as well with content that doesn’t match the rest of the website.

Checklists

I’m a big fan of lists, and I think that a really simple thing to do to check how consistent things are in your design is to create a simple and easy checklist.

  1. First up, how is the typography shaping up? Is it consistent? Are headings consistent from page to page? Does the type fall into a nice vertical rhythm across the page? Does the vertical rhythm fall out of place with the introduction of images? Or is everything looking good?
  2. Imagery/Visual Consistency; how do the images look? Is everything a similar style and tone, or are there wildly different styles of photo? Is everything cropped or shaped in a similar way, or is everything too different? Are image sizes similar or have set sizes over the whole design? Are icons the same sizes when appropriate? Do buttons have the same padding and whitespace to them?
  3. Colour Consistency; how do the colours look? Do the colours perform well from page to page? Are the colours appropriate? Do the colours work well with each other? Are the colours exactly the same where they are used more than once?

Assignments

All of the above should help you when you are trying to create a design that has more consistency and will help you to build relationships between each of your elements. I want you to use the checklist at the end (or create your own!) to see how consistent your design is. If it isn’t, then take the time to build that consistency into your designs.

Advertisement