Designing your Website

Designing a website is NOT about:

• writing HTML code.
  • Inspite of all the wonderful tags you've learned, your final webpage is a combination of more than fancy tag manipulation. Designing a webpage takes a unique blend of publishing awareness, user interface design, color theory, and technology.

• creating fancy graphics.
  • The bigger and fancier your graphics are, the slower your pages will load. Some people who study web users claim that the World Wide Web is a medium created for the attention deficit disorder crowd. Nobody wants to wait more than 13 seconds for a page to load.

• designing for the print medium - newspapers, magazines, flyers, or any other print material.
  • Too many web designers create pages that are designed like a typical 8 1/2" x 11" piece of paper. The typical monitor, however, is more like a page on its end - 11" x 8 1/2" - a definite horizontal, rather than vertical plan. A good rule of thumb is to design your pages to be no wider than 800 pixels. The length can be longer, but to see anything beyond the height of the screen, the user will have to scroll.
    
    
• designing a permanent creation.
  • While it is possible, with Cascading Style Sheets (Lessons 13 to 16), to get very precise layouts, it will never be as precise as print. If you can remember that as you're designing your Web pages, you'll save yourself a lot of stress.
  • When you build your web page and test it in your browser, you get it looking exactly how you want it. But then you test it in a different browser, and it looks different. And when you test it on a Mac or a PC, it looks different still.
  • Try to control the things you can, accept the things you can't, and hopefully have the wisdom to know the difference. You've probably heard that before.

Color Theory

Individual Colors

Pink

• Pink's Hot Dogs

Red

• Red Beans n Rice
• Red Magazine

Orange

• Orange Amps

Yellow

• Hive Creative with yellow accents

Green

• Tuinarchitect Luk Vrebosch
• and of course, Starbucks

Blue

• NOAA
• The Daily Mail uses blue accents for headlines and buttons.
• Baja California Spanish Language School

Purple

• Purple Orchid Wine Country Resort & Spa - accents of purple in the logo, links, headlines.
• Canva.com Royal Elegant color combinations.

Brown

• Grenke Chess Classic
• Terra Baltica Travel - Softer browns with orange accents.
• What is an Ungulate?

Black

• Fully Illustrated

Designing a website IS about:

• Designing for the screen.
  Always keep in mind that your page has a horizontal basis - more width than height. The movie industry's "rule of thirds" uses this theory to place their focal point:

The rule of thirds theory:
Divide the screen into nine parts - 3 across, and 3 down.

• The main focus of the first page of your website should be placed at one of the intersections of these dividing lines.
• Some other element of the page should lead the eye toward the main focus.
• The main focus should contrast with the background, either in color or in tone.

Look at the two images of the desert formations in the Wikipedia article. Which one do you like better?

• Designing for the Attention Deficit Disorder crowd.
  Your readers will be different from newspaper and magazine readers. Jakob Nielsen, Internet scholar, has his own theory about web readers:

  The Jakob Nielsen Theory of Web Surfers:
  Surfers don't read. They scan. Therefore, pages should

  • Have scannable text: bold headings, highlighted keywords, bulleted or numbered lists.
  • Have one idea per paragraph,
  • Have the most important information at the top (before the user has to scroll).
  • Use meaningful subheadings and bulletted lists.
  • Have 50% fewer words.

• Designing for the sight impaired.
  Any website you design for any kind of public entity needs to follow ADA guidelines that will enable it to be read by one of the 'readers' that blind surfers can use. This means:
  • All images should have those alt attributes. Every time you open an <img> tag, add an alt description.
  • Color schemes should take into consideration the fact that 12 to 20% of all white males are color-blind. Take this test to see if you have the same problem. And remember to design your pages so that everyone can read them.

Can you read the image to the right? Are the colors correct for what the words say? If you're color blind, chances are you can't tell. According to statistics, color blindness is a problem for 12 to 20% of males of European origin and about half a percent of females. For these people, the words in my picture appear to be almost the same color.

Color blindness is most commonly a lack of distinction between the colors red and green.

Red and green are often used to indicate "stop" and "go" in US culture. However, if you use them that way on your Web page, your purpose would be completely lost on a color blind person.

1. Don't use only color to indicate something specific on your page.
   For example, if you have a form with required fields, making the text red might not be a big enough distinction for a color blind person. Add another cue, such as an icon or other element to indicate that the field is required.
   
   
2. Avoid placing red and green together.
   Especially on items like navigation buttons, the text can blend into the background, making it very hard to read.
   
   
3. Find a color blind friend or relative to look at your site.
   If you're not color blind it's often very difficult to be aware of problems.
   
   

Designing a website IS about layout:

Contrast

• Avoid a plain, text-heavy page with text that spreads from one side to the other. Studies show that white space, and shorter widths, are important to website readers. Reading speed can slow down by as much as 40% if there are no margins or white space, which makes the sentences hard to read.

• Use backgrounds sparingly. If you really like backgrounds, pick one that contrasts with text and images, and is easy to read. If you have a busy background that you really want to use, set your text in tables with plain backgrounds, like this one. Imagine having to read the text off that background, if it weren't set into those nice clean plain-background tables.

• Use contrasting text, varying the size, the color, and the weight (boldness). In the business cards below (in Proximity), the first card has two lines bolded in the center. The top line is one font size larger. The contrast isn't enough to really notice, just enough to make your readers wonder if this was a mistake. Contrast between the text and the background is also a huge issue. The latest trend in webpage design is to use gray text, but grey text is difficult to read, unless there is enough contrast. Other combos that should be avoided because they always strain the eye:
  
  

Black text on a red background

Black text on a blue background

Yellow text on a green background

• Pick up a color from your color scheme and repeat it in the headlines, the links, the borders, the buttons, etc. Even if your site is only one page long, you can repeat those colors on that page.

Repetition

Look at these pages. Most company pages will try to have a color scheme, a background, a general layout that is similar from page to page. This doesn't mean that every page has to be exactly the same. Look at these 3 organizations that have multiple-page websites, and pick out the elements (layout, color, navigation links) that are repeated:

Even if your website is only 1 page long, repeating certain elements will unify the various parts of the page. This can be as simple as a color scheme, bullets that pick up colors from a background, or a color that is repeated in headlines and subheadings.

Alignment

Most beginners want to center everything. Centered alignment can be effective, but mostly it loses any strong focal point. The edges have no definition. Look at these two lists of buttons:

Which alignment looks best to you? The center-aligned list will probably look best on a page that has center alignment for the rest of it. The left-aligned list is best on a left- or right-aligned page.

Other Considerations

There are several basic webpage blunders that irritate everyone, and so you should steer clear of them. You'll see these mistakes on many, many websites, so obviously not everyone is following these words of wisdom. But let me list them for you anyway.

1. Splash pages - those big empty pages that have a huge graphic, take forever to load, and have no content. It's like the 'doorway' into the website, accomplishes nothing, and drives away anyone with a slow connection.
2. Pages that are too wide for the screen, which means that readers have to scroll left to right, besides up and down. This is usually caused by images that are way too big.
3. Dead-end links or navigation buttons that go nowhere.
4. Backgrounds that swallow up the text, and make reading so difficult that readers are gone in under the allotted 17 seconds.
5. Bad grammar and spelling.

Summary of Design Concepts

So there you have the big 4 principles to keep in mind when you're designing your website (besides color blindness issues, horizontal orientation, readers that scan instead of read, analogous and complementary color schemes):

You'll have to figure out a way to remember these four items, to help you focus as you design.

And besides all these rules, keep in mind that color makes a difference. First of all, avoid red on green or green on red. Never have a green button with red writing. 12 to 20% of your readers will never even see that red writing. And beyond that, remember that your color scheme sets a tone and sends a message. Make sure it's the message you want.

Test

Take a look at this page and see how many problems you can identify:

Assignment 13

This is an easy one. For your assignment, go to Assignment 13, click on the "Edit my submission" button, and answer these 3 questions:

1. Look at the test website for professional designers (above). List as many ways as you can think of that it could be improved.
2. Tell me how you did on the Ishihara Color Blind Test.
3. Tell me what colors you are thinking about for your website, and how it connects to the topic you're thinking about. Even if you change your mind later, on the color or on your topic, this is just to get you started thinking about how a topic can be enhanced by the color scheme.
   

Don't forget to click on the "Submit Assignment" button.