Look and feel

Where are we?

You’re creating a framework for a Web site. There are three aspects to it. We’ve already talked about information architecture and page layout. Now we’ll talk about look and feel.

What is look and feel?

Look and feel is about creating a site that:

  • Looks good.
  • Has a look that matches the site’s purpose.
  • Is easy to use.

How do you get a good look and feel?

What I do is borrow someone else’s. Remember that I’m not a good artist. So I do two things:

  • List words that describe the look and feel I want.
  • Find a design that matches.

Look and feel descriptors

These are words or phrases that describe the look and feel I’m going for. They’re often mood words, like “happy,” “energetic,” or “serious.” They can be things like “retro” or “grunge,” that describe a particular fashion statement.

Color is a big part of look and feel. Different colors evoke different emotions. Blue is placid, conservative. Orange is active. Green and brown bring nature to mind.

But colors mean different things in different places. According to Color Meanings by Culture:

  • White means purity in the US. But it’s the color of mourning in China.
  • Yellow means courage in Japan, but cowardice in other places.
  • Red means passion, love, and danger in the US, but it means purity in India.

It’s easy to make a mistake when you build a site for another culture. Check your design with someone from that culture.

Exercise: Dog parks - Look and feel

Write down some look-and-feel descriptors for the dog parts site. Enter them below.

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

Look for a design

When you have some descriptors, go look for a design that matches. Usually it’s just a gut feel for what seems to fit.

But peoples’ guts tell them different things. Don’t just pick one design. Pick three or four. Then ask other people what they think.

Usability

Make sure that people can actually use your site.

Fancy fonts

Don’t make text hard to read, just so you can use fancy fonts.

Not that fancy fonts are always bad. Check out The HTML5 Herald. It’s a demo site for the book HTML5 and CSS3 for the Real World. It has an old-time feel:

The Herald's home page

Figure 1. The Herald’s home page

This from the right sidebar:

Right sidebar

Figure 2. Right sidebar

The fonts match the old-time feel. The site only uses fancy fonts for headings, which are larger than regular text, so they’re readable.

Speaking of size…

Text size

Text that’s too small is hard to read, especially for older people. Like this:

What does this say?

If you’re looking at a page and the text is too small to read, then you can tell the browser to zoom in. The usual keyboard shortcut for this is Control +. But you don’t want to force users to do that.

If you have to use small text, use a sans serif typeface, like Arial or Verdana. Remember that sans serif typefaces are more plain than serif typefaces:

This is a sans serif typeface. It’s plain.

This is a serif typeface. It’s more fancy.

At small sizes, sans serif typefaces are easier to read than serif typefaces:

Dogs are the best!

Dogs are the best!

These are both 8px text. Too small to be useful for much.

Ask people with poorer eye sight to check your design. What’s easy for you to read might not be easy for them.

Contrast

Be careful with color contrast. The contrast between the text color and the background color can be too low:

Contrast is low.

Here are some high contrast color pairs. The contrasting colors are far apart on the color wheel:

Contrast is high.

Contrast is high.

The last one is hard to look at. An entire page of it will hurt your eyes.

You can experiment with text colors with this tool.

Summary

  • Pick some look and feel descriptors.
  • Find designs that match. Check them with other people.
  • Colors mean different things to different cultures. When in doubt, check.
  • Don’t make text hard to read.

What now?

Time to make a framework for your eMe.


How to...

Lessons

User login

Log in problems? Try here


Dogs