Design with Consistency

Most web designers are at a natural disadvantage when it comes to ensuring that things are consistent. After all we tend to think creatively and artistically before we think organizationally. We have a tendency of getting tired of the same look by the time we get to page five or six and sometimes we just can’t resist spicing things up.

Resist the need to “over design”

I often refer to this as “over designing.” When things start to feel plain and normal we just gotta throw in some more design. What often gets missed is that by page five or six when we get board and decide to “spice things up,” our users have just started to understand and interpret our design decisions from page one.

All of our headings communicate an order and hierarchy, by altering their look we risk confusing users. Our grid systems and photography styles convey a message about the website/company/brand/application/etc… switching to a new style sends a complete different message.

Think in terms of modules

I started writing this post about a week ago and between the time I started writing it I came across Nicole Sulivan’s object oriented css. A lot of Nicole’s points (if you click through her powerpoint presentation) is that too often there are minor design differences used through out a site where it would be more efficient to simply reuse the existing design elements.

In this case she is talking about code efficiency (both in terms of size and maintenance). However I believe that it also applies to the actual design effectiveness as well.

Rather than design page by page where you have a tendency to thing in terms of total composition, you should instead design in terms of modules. How do paragraphs and headings work together? What about images in paragraphs? What do comments look like on any page rather than a specific page? How do banners behave on every page?

This is not to say that you should ignore the overall composition of a page, just that rather than micro designing every page instead come up with a system that dictates how elements are laid out by their type. This will ensure that everything is consistent as well as increase design and development time.

How I go about designing a module “system”

Almost any design can be segmented into different content types.The easiest ways to start thinking about it would be to just decide what are the margins and proximity of elements to each other.

  • Different areas of the design will be separated by 40px (eg: content and footer, header and content, etc)
  • Different blocks of content will be separated by 20px (eg: the margin between heading / paragraph pairs)
  • Heading to related paragraph will be separated by 10px

This is a pretty generic example, but by the second or third page the user will start to know that the larger gap between header / paragraph symbolizes a different subject or type of content. This creates a very unified and stable design.

Take it as far as you need

From there you can take the modules as far as you need. Really there are two parts to this concept. There is no need to reinvent the wheel when it comes to design, in fact you get a strong design by remaining consistent vs trying to spice things up or add too much decoration. The second part is how easy and agile the development of your sites (from a front end standpoint) as a result of developing in a modular sense.

Together it makes too much sense not to design and develop in this manor and it applies to both brochure sites and large scale web applications.