Bread-and-butter Layouts and Inspiration

Most of what we’ve talked about thus far has been design theory. Theory’s helpful, but it can only take us so far towards understanding why some ideas work—and others don’t—in a website’s design. In my opinion, examples and practice are much more valuable. Most academic graphic design programs include a curriculum that’s rich in art history and fine art. These classes provide a great foundation for an understanding of graphic design from an art perspective, but they do little to prepare you for the specific challenges you encounter when you take your designs to the Web.

Pablo Picasso once said, “I am always doing that which I cannot do, in order that I may learn how to do it.” While I like to take that approach when designing a new website, it’s important first to know what you can do. When you look out across the Internet, you can see that the possibilities for layout are endless. Depending on the goals of the site, though, only a few of those possibilities make good design sense. That’s why we see certain configurations of identity, navigation, and content over and over again.

In this section, we’ll talk about the three most common layouts, and explore some of their advantages and disadvantages.

The Three Quintessential Layouts

Left-column Navigation

Regardless of whether we’re talking about liquid or fixed-width layout design, the left-column navigation format is a time-honored standard. The layout of the Porsche site, pictured just below, is a classic example of this configuration. Many sites that fit into this mold don’t necessarily use the left column as the main navigation block—sometimes you’ll see the navigation along the top of the page—but they still divide the layout below the header into a narrow (one-third or less) left column and a wide right column. It’s like a security blanket, or that comfortable shirt with holes in the armpits that you wear once a week—even though it drives your spouse crazy. For those reasons, a layout featuring left-column navigation is a safe choice for most projects.

Left-column navigation at Porsche

Left-column navigation at Porsche — layout outline

The downside to sites that use left-column navigation is that they can appear to lack creativity. It’s been done so many times, in so many ways, over so many years that they tend to look the same. That’s not to say you should avoid using a left-column navigation layout. At a guess, I’d say that 75% of the sites I’ve designed have a secondary left-column navigation, but I do try to mix it up a little when I can.

Speaking of mixing it up, how about picking that left column up and sticking it on the other side of the content? Then you’d have a right-column navigation layout.

Right-column Navigation

If you’re going to restrict your main content to one side of the page, it’s more widespread these days to push it to the left, placing navigation, advertising, and subsidiary content on the right. This is an especially common configuration for news sites, social networks, and websites with expansive navigation schemes that are unable to be contained within a simple top navigation. BlueCross BlueShield of South Carolina is an example of such a site. It features several different layouts and color schemes for each section. The screenshot below is a fourth-level page—that is, it’s four clicks away from the front page. By keeping the secondary navigation on the right, it stays out of the way of visitors who, if they’re this deep already, are looking for some very specific content.

Right-column navigation at BlueCross BlueShield of South Carolina

Right-column navigation at BlueCross BlueShield of South Carolina — layout outline

Ultimately, the decision on whether to put a navigation column on the left or the right is a judgment call that’s really about the amount and type of content you have to organize. If it’s a simple site that doesn’t require any secondary navigation, consider a narrow, column-less layout. Good design is often more about what you leave out than what you put in. If you do need a secondary column, just remember that the content is what your visitors are there for … and more and more, they’re looking for it on the left.

Three-column Navigation

The typical three-column layout has a wide center column flanked by two diminutive navigational columns. The ThinkGeek store is an example of this web page layout staple. Although three columns may be necessary on pages that have a ton of navigation, short bits of content, or advertising to display, whitespace is essential if we’re to keep a layout from appearing cluttered.

Three-column navigation at ThinkGeek

Three-column navigation at ThinkGeek — layout outline

Finding Inspiration

Just because the left-column, right-column, and three-column layout configurations are the bread and butter of most web page designs, there’s no need to feel confined to these layouts. A plethora—yes, a plethora—of design showcase and design pattern sites have been created to feature new and innovative ideas that might help you think outside the box, including the following (just to name a few):

  • Unmatched Style
    There are a ton of great CSS galleries out there. Unmatched Style is more selective than others, and the video podcasts and interviews are usually interesting as well.
  • CSS Drive
    Like Unmatched Style, CSS Drive is a CSS gallery. What makes this one special is that they do a good job of categorizing featured sites by color schemes and layout.
  • Design Meltdown
    From 2005-2009, Patrick McNeil collected and cataloged thousands of interested web designs. He has published two books, and the Design Meltdown site continues to be a great source of inspiration.
  • Pattern Tap
    Unlike the first three examples, Pattern Tap is a gallery of interface patterns rather than entire websites. Here you’ll find collections of navigation styles, contact forms, pagination, tabs, and more.
  • Yahoo Design Pattern Library
    Similar to Pattern Tap, but with far fewer examples and variations, the Yahoo Design Pattern Library is a great place to learn about standard user interface elements.
  • Using a “Morgue” File

    I know what you’re thinking: “Great, I have a bunch of galleries and pattern libraries to look at—now what?” One of the most useful tips my first graphic design professor taught me was to create a morgue file whenever I was collecting inspiration for a large project. The concept is fairly simple: if you’re doing an illustration or marketing project that involves trains, you clip out and print up anything you can find that might give you inspiration and keep it all in a folder. It helps with your current project, and should you ever need to do another project involving trains, you’ll have lots of inspiration on hand.

    The morgue file idea slipped my mind until a few years ago. I found myself looking for a site I’d seen in a gallery site that I liked, but of which I was unable to remember the name or address. Sure it’s great to have access to lots of great inspiration resources, but they useless if you can’t find the specific example you’re looking for. That was when I started my own digital morgue file. Lately, I’ve been using an application called LittleSnapper for Mac that allows me to create a screenshot of part of the screen, or even a whole web page (no more scroll, snap, scroll, snap). LittleSnapper also lets you give each snapshot a name, and tags to make them easy to find later. Of course, no matter what operating system you prefer, there are plenty of ways to take a snapshot for your morgue file. Having a repository of website designs that I can look at has been a handy resource on countless occasions when I’ve been searching for inspiration.

    LittleSnapper’s main window

    Capture a Screenshot for Your Own Morgue File

    1. Select the browser window that’s displaying the page you wish to save as a screenshot.
    2. Copy a screenshot of the browser window to your clipboard — on a PC: press Alt + Print Screen or use the native Snipping Tool (Windows Vista or 7) to grab a section of the screen; on a Mac: press Shift + Command + 4, then Space to turn the cursor into a camera. Then, hold down Control, and click on the browser window.
    3. At this point, you should have a screenshot of the browser window in your clipboard. Open a new document in your favorite graphics program or document editor, and paste in the screenshot.
    4. Save your image or document.

    Next up we’ll look at some new design trends.

    The Principles of Beautiful Web Design

    This article is from Jason Beaird’s The Principles of Beautiful Web Design book (the second edition of which is out now). This is the eighth and ninth part of the first chapter.

    The entirety of the color chapter has been digitized, so if color is more (or also) your thing check out the color chapter here on Design Festival.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Brandon Holliday

    Great article.  I find myself still veering toward the left-navigation.  I know it’s not as creative as some of the other layouts, however I feel that simplicity, in many cases, adds to the user friendliness…especially when developing apps.

  • Avangelist

    hah, i was reading this thinking, wait a mo hasn’t this already been printed before. then reached the end and saw it was an excerpt from that book.

    I had a load of links at one point for case studies on the impact of right vs left navigation menus, if i find it i’ll post it up

  • Anthony

    This is terrific information.  I’m always looking for ways to improve my website (http://computertipsforkids.com/), and you’ve given me a lot to think about.

    I really appreciate the information.

    Best regards,
    Anthony

  • Dorseyharrington

    Two comments – first, this was very difficult to read due to the background and font combination, and second, there was no mention of putting the different layouts in front of users to see which actually is better received.  Am I missing something, or has that already been well established and it’s now completely up to the designer to decide which is best for those who will visit the site, based on what fits the designer’s vision best?

    • http://twitter.com/jasongraphix Jason Beaird

      I’m really not sure what you mean about the background and font
      combination. For me, this post is on a white background with very
      legible copy.

      As far as your 2nd comment goes, I agree that all design decisions should be run through a mental filter of whether or
      not they help achieve the user’s goals and expectations. You of course
      have to consider the needs of the client as well. Neither of those
      points are covered in this excerpt but I did cover this in other parts
      of the chapter as well as in each of the case study examples in the
      book.

      Should multiple layout options be presented to users to see which is
      better received? That depends on the budget and scope of the project. I
      currently work full-time on a very large web application, so the answer
      to that question is usually YES! When I was doing web design work at an
      agency though, the budget constraints were much tighter. We rarely presented
      more than 1 design option to the client, let alone the end-user.

      • Pleccy

        @Jason: with regard to the background: maybe he is referring to the pinkish stripes on the left and right on this site. They are so bold that they are actually drawing my attention constantly, therefore making it very hard to concentrate on the text.

  • Anonymous

    Sounds like Dorseyharrington’s browser isn’t rendering the background color of the as white for some reason. Could this be rectified by using #FFF.

  • Marcel Sarrasin

    I think there’s a trend right now with software companies of going with a top level secondary navigation which was mentioned in this article as a different way to do left navigation.

    Our company is doing a complete redesign of our site and we spent some time debating left or right navigation. I found documents supporting both ways, most on gut feel but a couple with scientific experiments. We have an older clientele and felt right navigation would be too counter intuitive for them so we eliminated that.

    We were going to go with a left navigation but as we built our Morgue file (using SnagIt and Google Docs) I noticed that almost every site we all liked used a top level secondary navigation. We sell software so we looked at over 20 similar sites (TechSmith, Business Catalyst, Campaign Monitor, Citrix, Survey Monkey, Apple, etc) and they all had top navigation, even the ones that sell more than one product like us which adds a level of complexity. The one company in our Morgue file that had more of a right navigation was Adobe, and none of us like their site.

    We’re going with that and the benefit is you end up with a one column layout that gives you more space to work with for the content the user is reading. I haven’t seen scientific evidence to support this layout but I figure of all the sites and companies I admire are doing it there must be a reason. Our main concern is whether the users will find the secondary menu easily and if done right I think they should. On the Webmatrix site I found it obvious, but not as obvious on TechSmith product pages (e.g. Features, Tour). Most of those sites also do away with breadcrumbs since  the 2 top level menus give the user a very good idea of where they are, but we’re still debating whether we should get rid of breadcrumbs.

  • Ansel Taft

    Here’s what I do:

    I use Techsmith’s SnagIt to capture the whole screen, from top to bottom (using the scrolling screen method). Then I paste the image into Evernote, which is my always-available ‘morgue file’. Then I give it a ‘design inspiration’ tag for easy recall. Morgue file, TO THE CLOUD!

  • Mark

    You can’t be serious when you say that young designers
    should not go to design school but instead read your book, or just practice? I
    have bought all of your books and really they give a good grounding in the
    basic of basics but there is no real holistic pedagogical method for someone to
    work from. More to the point is that statements that encourage web people to
    not go to design schools, just reinforces  the cowboy web developer
    mentality of the late 90′s and early 2000′s who thinks they are a designer-
    hence the 70% of crap that passes for web design. I work in academia and I run
    my own web design firm, and it is seriously embarrassing for young designers
    who I interview for internships and potential work who are essentially web developers
    trying desperately hard to be designers- from books they read. Once upon a time
    that may have been okay to be a jack of all trades- but not anymore. I would
    rather you advocated for a better-educated web designer who both understands
    the specific technical craft of their profession along with the history of
    the design traditions that they use, and will play a part in evolving.  I think those students will therefore be
    better placed to innovate the future of web design as both an emerging and
    seriously important art and craft form.
    On the one hand Jason you are an evangelist for good web design yet are quite
    happy to stunt the growth of our emerging design talent. I don’t get it.
    Design schools have changed and I agree back in the day when the web was young
    teaching institutions struggled to clarify the difference between fine art,
    graphic design and web design. However, the amount of web design books
    currently available- like your’s Jason- points to the maturation of web design
    as a profession in its own right. Design schools or at least the ones I am
    involved with in Australia
    recognize this and have developed rock solid curriculum, vetted by web
    professionals, that is poised to develop the next generation of web designers.