Choose a design

Where are we?

You have most of your site’s framework. Information architecture, page layout, and look-and-feel. Now use these things to choose a design.

This lesson’s goals

By the end of this lesson, you should know how to find an existing design that you can base your site on.

Find candidate designs

The first step is to find a collection of designs you can look through. You want to find “candidate designs,” designs that are worth checking out to see if they fit.

I often start with the Metamorphosis Designs collection of free templates. But there are many other collections.

If you find a collection you like, please add it to the links collection.

License check

Make sure you can live with the design’s license terms. Many designs say “Free for personal use.” If the site is for a company, you may need to pay.

“Link ware” is common. That means you can use the design for your own site, as long as you include a link back to the original.

Rough layout check

Say you want this layout:

Target layout

Figure 1. Target layout

You want a header with a big logo, and a horizontal nav bar inside it. There’s a footer as well.

Here are two designs:

Temple design

Candidate A, from
Metamorphosis Designs

Photography

Candidate B, from Free Website Templates

Figure 2. Candidate designs

To convert the first one to the layout you want, you’d have to:

  • Remove the big temple image.
  • Remove the left sidebar.
  • Add a logo.

To convert the second one, you’d have to:

  • Remove the big frog image.
  • Remove left and right photo gallery things.
  • Create the content area.
  • Remove the white talk bubble things.
  • Change a logo.

So candidate A is closer to what you need than candidate B. Less work is a Good Thing.

Renata
Renata

But what if the colors and fonts for the second candidate fit better?

Kieran
Kieran

Good point! We also need to do a…

Look-and-feel check

Two things to think about here.

Look-and-feel descriptor check

Take your descriptors, like “happy” and “active,” or whatever you chose. Do they fit the candidate design?

If you want to get other people’s opinions, be careful what you ask them. Don’t ask: “Do you like this design?” You won’t know how they made their decision.

Instead, ask: “What words come to mind when you see this design?” If they say “happy” and “active,” you’re on the right track. If they say “sad” and “lonely,” you might want to rethink your choice. Unless you’re building a sad and lonely Web site.

Custom graphics check

Often there are specific graphics you need to include, like a logo. Especially when you make a site for a company. Make sure that the design’s colors fit with the logo.

Sometimes you’re allowed to change the logo’s colors. For example, if you were building an environmental site for me, and asked, “Can I make the CoreDogs logo dark green?” I would say, “Yes, go ahead.”

But check first. Some companies won’t let you change their logos at all.

Code check

You want a design that’s easy to change. The layout code in particular should be easy to understand.

Find the HTML and CSS code for the things you need to change. If the code isn’t easy to find, you may want to choose a different design.

Check the code. Is it easy to understand?

Here’s the temple design from Figure 2:

Temple

Figure 3. Temple design

Here’s some of the code:

<!-- header begins -->
<div id="header"> 
  <div id="logo">
    <h1><a href="#">Metamorph_temple</a></h1>
    <h2><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h2>
  </div>
  ...
</div>
<!-- header ends -->
...
#header {
  height: 433px;
  text-align: right;
  background: url(images/header.jpg) no-repeat;		
}
#logo {
  width: 758px;
  height: 348px;
  text-align: left;
  padding-left: 20px;
  padding-top: 20px;
}

Figure 4. Temple design’s code

It’s easy to find the code for the header and logo. The designer even put in comments (like <!-- header begins -->).

The code’s easy to change as well. For example, you want to remove the photo of the temple. Look at line 14. It sets the background of the header to the file images/header.jpg. Here’s what that image is, resized:

Temple image

Figure 5. images/header.jpg (resized)

Remove line 14, and the temple photo no longer appears. W00f!

Exercise: Dog parks - Choose a design

Choose a design for the dog parks site. If you like, start with Metamorphosis Designs.

When you’ve chosen one, enter the URL of its demo site (most designs have one) below.

(Log in to enter your solution to this exercise.)

Summary

Choose a design for your site.

  • Find some candidate designs. Find one you like.
  • Check the license. Can you legally use the design?
  • Check the layout. Is it close to what you need?
  • Check the look-and-feel. Does it match your descriptors? Does it match your logo and other custom graphics?
  • Check the code. Can you find the code you need to change? Is it easy to understand?

If you can answer “yes” to all of these, you have yourself a winner. W00f! You might even find three or four winners, and choose between them.

What now?

You know your information architecture, layout, and look-and-feel. You’ve chosen a design. That’s your entire framework.

Let’s look at your eMe’s framework.


How to...

Lessons

User login

Log in problems? Try here


Dogs