Navigation

A Review of Consistent Designs on the Web

How To, Resources, Web Design | Feb 26, 2010

The visual language of a website impresses a visitor far beyond their first glimpse.

In fact, in observing the best websites, you notice that the small details speak to you subconsciously and that consistency improves your experience of the website and as a result makes you more likely to return.

In this article we’ll explore what makes a design consistent, and we’ll showcase some of the most consistent website designs out there.

Please comment at the end of the article about the consistency of these websites and feel free to add links to others that follow this principle.

What do we mean by consistency in design? According to this definition, consistency can be defined as: “A harmonious uniformity or agreement among things or parts.”

You goal as a designer is to create order, to make it easy for users to find the information they are looking for. Consistency can help you achieve that goal.

 

Checklist of Details

First, let’s define the criteria by which we will determine whether the websites we review here are consistent. Setting criteria for yourself would also benefit your own daily design work. As I like to say, good design is first created with good observation. Here are our criteria:

Typographic consistency:

  • Is there a consistent vertical rhythm?
  • Is the typographic alignment consistent?
  • Are the typeface choices consistent?
  • Is the typographic navigation predictable across pages?

Graphic consistency:

  • Do the website’s images convey a consistent mood?
  • Do the colors in the images match?
  • Are the textures of the images consistent?
  • Are the sizes of the images consistent with the overall structure of the website and each other?

Color consistency:

  • Are colors used consistently across pages?

Icon and button consistency:

  • Are the website’s icons of the same family?
  • Do the icons match in size?

A website doesn’t have to meet these criteria to the dot, but the list is a good starting point to help make your own designs consistent and harmonious.

Okay, we now have a nice little checklist to play with. Let’s review our websites, learn from them and get inspired!

 

52 Weeks of UX

What are some of this website’s highlights:

  • The white space in the header is equally divided.
  • The typography is consistently aligned, flush left with a ragged right.
  • The persistent paginated navigation at the top is both clever and familiar.
  • Images for posts are always black and white.

Now, because this article is about details, I do want to point out two minor issues with this website, both in the footer: First, notice how the “Go” search button has a reflection, while the other elements on the website do not (compare, for example, the RSS button at the top).

Secondly, notice that the space between the headings and text is much tighter in the footer compared to the rest of the website.

 

Ribbons of Red

  • First, the most prominent element of the website: the red! Beautifully and consistently used from the logo to the headers to the links to the buttons.
  • Next, the texture of the button graphics is the same as what is used for the logo.
  • Also, notice that the buttons are visually all of the same family, even the social icons at the bottom.
  • The display type is a nice slab serif—again, used consistently from the logo to the headers to the buttons.
  • Finally, the text elements throughout the website are aligned consistently, flush left and ragged right.

 

Yaron Schoen

  • The first thing that catches the eye is how the illustration in the header plays with depth. Even the four graphic elements below pop out of their containers and play with depth the same way.
  • The typography is aligned perfectly in a grid.
  • The typeface is well chosen and executed. The home page and other pages exhibit continuity as well.
  • The colors are also very consistent, playing nicely with the dark blue to the bluish green, all the way from the header to the footer.

 

Fuzzco

  • Look at the texture in the top navigation; it is also used for the images near the bottom.
  • Check out the type in the header across pages; nicely done with custom Flash, giving it a creative feel.
  • The serif is consistent across the home page but breaks a bit on internal pages.
  • The colors in the top navigation match the footer, harmonizing and framing the content.

 

Styleboost

  • The size definitely makes this website consistent: big. Big buttons, big images (all consistent in size), big type, big white space.
  • The color is kept to a minimum and used well. The light blue maintains harmony, and the secondary gray plays with depth and hierarchy.
  • The buttons are all big and uniform. They are also slightly rounded, matching the search box.
  • The grid structure is simple and tells you what’s coming next. Even the footer is in proportion, which seems to be close to the golden ratio.

 

Delicious Monster

This website isn’t new, but it is beautiful in how it has remained consistent over the years and hasn’t aged a bit. The attention to detail has helped.

  • Notice the textures. The website is framed by a wood shelf, which ties into the theme of the software being offered by the company.
  • The graphic elements such as grass and plants maintain the harmony.
  • Every section has rounded corners, even the slideshow buttons.
  • The greenish-yellow dominates the page, inviting you to enter this imaginative and memorable world.

 

Richard Meier & Partners Architects.

It was designed by Massimo Vignelli, who is known for having mastered the grid and producing modern, consistent and logical designs.

  • Notice the alignment of graphic elements. The flush-left type in the menu aligns with the images below.
  • The horizontal rule below the sub-navigation is persistent, helping users to orient themselves on the website.
  • The space between the navigation and body content is consistent, giving the eye a clear path to follow.
  • And the typography is simple, flush left and sans-serif, falling consistently into the grid.

The team behind Information Architects has also mastered simplicity, grid design and consistency.

  • Notice how the navigation at the top is aligned with the body content below.
  • The color palette is simple and consistent: red, white and black.
  • The textual elements are evenly aligned. Notice how the space between the horizontal rules are consistent down the page.

 

Wilson Miner

  • The dates and meta content are aligned in the first column, followed by the body content.
  • Notice how the navigation at the top falls into the grid, aligning with the content below.
  • The typography is a simple white and black: white for section titles, black for body copy.

 

Tapbots

  • The first thing that catches my eye is the excellent use of white space, particularly the even spacing between the logo and navigation, both above and below.
  • The icons all seem to come from the same family, creating harmony.
  • The use of depth, from the top graphic to the footer illustrations, is also consistent.
  • The colors match across the page: the black on top matches the footer; the red button at the top matches the search button below; and the gray navigation matches the gray bar in the footer.

 

Wrapping Up

Consistent design requires many tools and can be difficult to achieve.

One tip I can offer is to start with a nice grid and then build a wireframe on top of it. This will give you a bird’s eye view of the graphic elements and how they relate to each other.

The above examples should give you food for thought with regard to executing your design. Consistency is made up of many parts, all of which are essential ingredients in the process.


Written exclusively for Webdesigner Depot by Noam Almosnino, a web designer in Brooklyn, New York. Follow Noam on Twitter, or visit his website hellonoam.com.

Know of other consistent websites to share with us? Please post them in the comments!


Share this post
Comments (no login required)
  • http://www.michaeldhart.com Michael Hart

    Great post! Some of these things I either just take for granted or forget to consider when building a site. Having a specific list like this is so helpful. Sure some of these are going to make it into my workflow. Thanks!

  • http://starkvaliant.com valiant

    Nice, very thorough! I like seeing reviews that explain -why- it’s good, not just slapping some thumbnails on a page and calling it a day. You picked some really good examples, and I can easily see how the grids lined up with zoomed out and lengthened screenshots. Best practice is to squint before you finalize a design, yanno?

    It took me a minute to realize experimental layout and typography wouldn’t fall into ‘consistent’, when I was wondering why there weren’t any on here. Maybe you could really sink your teeth into some in another article. c:

  • pesho

    thanks ,great post

  • http://sexidesign.com Melody

    Consistency really just adds to the overall aesthetic of any design. It’s essentially a mixture of fundamental design principals…

  • http://www.squiders.com Website Design Kent

    Great post, really enjoyed… consistant elemts and scheme in design can keep a visitor longer

  • RJHBookLinux

    Yaron Schoen site is SICK SICK SICK!!!!!!! Deserves a post just for that site alone! Thanks for the post!

  • JK

    I’m surprised everytime I read the posts! Consistency… I will keep it in mind!

  • http://www.scmindsolutions.com SCMIND

    Nice post! These are very clean and inspiring designs. I enjoy minimalistic layouts and some of these are an excellent example. The Tapbots website is very well done.

  • http://www.ryanmwebmedia.com ryan

    Again. Another great article. I enjoy reading especially looking at the minimalist designs.

    Thanks

  • Adam

    These are wonderful examples of consistent design, and I completely agree with your assessment of the sites overall. But on the other hand, the majority of them are boutique sites etc. with less than ten pages and built by teams of less than five and sometimes by a single person. I’d love to see examples of larger non-boutique sites with this attention to detail.

    I bring it up because as a lead UI designer for a large internal web department of over twenty frontend developers and designers, I deal with consistency on a daily basis. I’d love to see examples and techniques larger sites use to overcome consistency challenges.

    Keep the great articles coming, I love WDD!

  • Ali

    Em, nice collection man.
    It seems webs going trough fantastic designs with creative ideas.
    I hope this way be clear from some cumbersome rules.

  • http://3circlestudio.com/ Justin Carroll

    I loved this post. And I think under the context of information design the goal you stated is dead on, but if it’s meant to be overarching I’d have to slightly disagree. I would have worded it more like this:

    Your goal as a designer is to effectively communicate an idea. Order and consistency are common methods in helping to achieve that goal; however, the idea is sovereign and should never bend to the will of methods solely because they are common.

    The challenge of information design is getting the user to take in the information in the most efficient way possible. For interactive advertising where the challenge becomes changing the way a consumer feels about a brand the designer is responsible for carrying out the user’s experience in such a way as to achieve that response. This is one example where we see a move away from order as an overarching goal like we would typically see in a purely informational design.

    Yaron Schoen is one of my new favorite designers. Exceptional work!

  • http://theoff.info/ the Off

    A good analysis of the Websites. I would try to test my own website against the parameters mentioned here.

    Aligining the Adsense ads, especially in a sidebar, is quite tricky.

    My website works fine in IE but main horizontal menu simple disappears when it is browsed in Mozilla Firefox.

    Any tips?

  • http://www.travestiilan.com travesti

    I’m looking for a good web design myself, but I could not find a toll free, or would like to design a beautiful web design knowledge with you Do you take me to

  • AJ

    Great read! Each evaluation was done objectively and pointed out some great cues. One thing, I don’t know if it is just my iPhone but, it appears you broke consistency in the article.

    Your formula for display is Website title, website thumb, and then analysis. On IA there was no title & a small intro about the design team before the thumbnail. I was wondering if this was done on purpose.

  • http://www.knowgenes.com Oliver McPhee

    Cool post.

    I would also add Image Quality to the checklist…

    If you have some hi-def pics, then it forces you to increase the definition of the rest of your pics ~ otherwise they look tacky in comparison

    Ollie

  • http://www.lonocreative.com lono

    consistency is so important!! great post!

  • http://www.e11world.com e11world

    Tapbots is my fav on this list. Pretty nice article and a good reminder for myself.

  • http://www.creativemash.co.uk CreativeMash

    An interesting post with some great choices to illustrate – all critiqued in a thoughtful way. It’s all the little consistent details that are often overlooked that generally make a site flow better.

    Good checklist at the start too. Most of them I tend to stick to without thinking about it but to see them written as a list is very useful.

  • http://www.createwebworks.com/ Create Webworks

    Great one! I never thought of these things. I never consider consistency either but having these reviews really make sense. Now, I have the idea.

  • Neil Leibowitz

    Nice article. I enjoyed seeing reviews of other people’s websites. Helps me gather some inspiration and idea needed to upgrade my own website. I recently had my site done by the Logo Design Creation team. I liked the process because it forced me to think carefully about the website and truly take “ownership” by writing the copy and coming up with my own design ideas that you executed rather well! Since my website is first focused on product development consulting, through the system that logo design uses, I was inspired to better define my own skills and attributes, as well as portray my experience in a way that has much more clarity than a resume. Because Logo Design Creation allows unlimited revisions, it permits me to keep refining my ideas until I’m absolutely satisfied. Even after I made a final approval of the design, the designers were kind enough to make the last two changes that I requested later. This is a reliable and ethical company who seriously aims to please the client.

    Neil Leibowitz

  • http://www.sigortalar.org sigorta

    thanks for great post

  • http://www.acuras.co.uk Jon Jackson

    Enjoyable read.. and nice selection of designs.. gets the creativity juices flowing!