How to Design a Website

Rule #1:

 Listen to your client. You may design the “world’s best website ever in the history of the universe and beyond,” with rich blacks, sophisticated fonts, and bold, artistic colors for a site that screams “explore me now!” Unfortunately, your client wanted an orange menu bar with chunky pink and orange type. You’re fired, and your best website ever—that the client owns the rights to—languishes on their backup hard drive somewhere, never to be seen by mortal man.

Study your client’s corporate identity. Have the client show you some websites that they really like. This will not only cue you in to what tickles their fancy, it will also give you some design ideas that you may not have considered.

In case you thought we were kidding about the orange and pink website, just imagine that coolest-ever sophisticated site promoting this product:

Rule #2:

Know your audience and what they are looking for, and design accordingly. The reason people have websites is because they want other people to see them. It may be informational, or it may be commercial, or it may be for entertainment purposes geared to a particular demographic. Your job, as designer, is to know who you are designing for, and to keep them on the page when they land there.

You may think, “If it looks good, they will stay.” But this is not necessarily the case. Consider real estate, for example. Here is a site that features a clean, fun design. It has lots of white space which opens things up, bold colors, and a very modern looking widescreen format with links prominently featured:

Now consider this approach to selling real estate in the same area: it's cluttered and very busy, garish colors, and slathered with ads.

Guess which one actually works better for people looking for homes? That's right, the one that actually lists homes! When people are searching for "homes for sale in Santa Monica," they don't care about the aesthetics of the site. They don't want to know about the real estate agent, or see pretty pictures of the town. They want to see homes.

Rule #3:

 Listen to yourself. You understand what the client likes, and you know what your market is searching for. Finally, it's time to pay attention to you, the designer!

Build up a template in the graphics application of your choice. On separate layers (so you can modify things later without destroying the overall template) create the elements that go into your page. Those elements might include:

Header.

 This is an element that will be common to every page on your site. The header consists of the title and logo of the site, as well as links to the other subsections of the website (ex. About, Contact, etc.). Visually and practically, this will tie everything together. It's good practice to make the first button on a menu bar link back to the home page.

Let's look at Apple,for example:

As with most everything Apple, their home page features a very clean, uncluttered design. Notice the menu bar across the top, with logical topics for each button, plus a search field—always a nice touch if your site supports it. Now let's look a landing page for one of the buttons, the iPad, and let's take a look at a few of the elements:

The menu bar changes only by darkening the iPad button.

The subject of the landing page is in large black letters in the upper left.

A new sub-menu bar appears so that you can learn more about the product. If you click each of those submenu headings, you will see each page will offer new topic-relevant content, but will be identical in layout and design.

Many times, each main heading in your menu bar will multiple sub-headings that you need to account for. Instead of creating a secondary menu bar, you might use popup menus like this example from Musician's Friend:

Side bar.

This will be common on many pages of your site, but not necessarily all—–context is king. But it's a very important element, and needs to carefully design to be intuitive and unnecessarily cluttered. Unlike the menu bar, the content of a side bar can be very dynamic. Consider these two sidebars from real estate marketer Trulia. The first is for buyers:

And the second one is for renters. Notice the entirely different focus for very similar information, and it appears in exactly the same spot on the side bar:

Body.

This is where it all happens, and is the most variable part of your design. If you are designing an e-commerce site, for example, one page may have a product review in the body, while the next has 20 items for sale. Your job is to tie the two together so that they don't look disjointed, visually. Use similar colors, fonts, and interface elements to draw it all together.

Footer.

This is something that not ever site has, or needs. It's often used for things that might clutter an otherwise clean interface, or provide access to parts of the site that are not the site's primary focus.