Consistency within your wireframe project: the do’s and don’ts

Think of your project as a unity. That is why big projects need to use the same font, sizes, colours, styles, etc. Hi-fi wireframes can use widgets and templates to maintain consistency. There are several advantages for projects:

1. The users will know they didn't leave the site/program. The appearance guarantees that.

Remember your favourite website? You know you're using it even though you don't read the content. Why? Because it looks like the other pages you've seen. That's design consistency.

2. Smaller learning curve for final users.

When users learn what your sidebar is for, they expect it always to be there, and its functionality not to change. They learn how to use a website. So, having all the features in the same place and with the same consistency is important.

3. Less work for collaborators, who don't have to think about design issues.

We all know someone who cannot decide which typography to use, colours, sizes, etc. They can be great coding, or writing, or even correcting things, but don't necessarily like or are very capable doing design thinking. So, why not let them just do their job, without the pressure to create something beautiful? If they have the templates and the design done, their work will simply be better.

4. Time saver

If you can avoid re-creating repetitive tasks, you'll finish your project beforehand. So, try to plan ahead the objects, details and features that can be re-used and re-inserted in a sort of framework.

What to do to maintain consistency in a wireframe project?

1 - Create the templates first.

The backgrounds must be done, and everyone involved should know how to use them. That way, nobody will insert a huge image where it won't fit.

2 - Define design properties like fonts, colour palettes and sizes throughout the document, and pass the instructions to everyone.

Visual guidelines are preferred, with examples.

3 - Create masters and widgets for users, with constant objects.

Logos, buttons, icons, all things that will be used on your project can be inserted into a Widget Library, and you can share them with all your users. Explain them where to find it.

What to avoid when creating consistency?

1 - Don't create strict rules that destroy creativity.

Even though rules exist, sometimes they can be broken. Even design ones. Don't break rules every time, but, sometimes it will be the touch of a genius to break them. That's innovation. If one of your co-workers or even yourself come through a situation where a pre-defined rule is going to be broken, but the project depends on it, break it. So, don't be the "this-is-not-as-the-manual-says" guy, because everybody will hate you.

2 - Don't try to invent new rules for the obvious

Internet users are used to links in blue. If you put links the same colour of your normal text, it's very probable users won't like or will ignore some links.

3 - Create widgets and templates that will be used only once.

The main reason why we re-use repetitive code and tasks is because they're repetitive. If you have an innovative use for a wireframe, but won't never, ever use it again, you don't need to waste time creating models.