Lesson 10 - Designing Your Website
Designing a Website is NOT About:
Writing HTML Code
In spite 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 17 seconds for a page to load.
Designing for Print - 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 great majority of screens are 640 pixels by 480 pixels - a definite horizontal, rather than vertical plan. A good rule of thumb, therefore, is to design your pages to be no wider than 600 pixels (the scroll bar and other browser details eat up some pixels). The length can be longer than 480 pixels, but to see anything beyond that, the user will have to scroll.
Designing a Permanent Creation
While it is possible with Cascading Style Sheets (Lessons 13 to 15) to get very precise layouts, it will never be as precise as print. If you can remember that while 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 to look. But then, you test it in a different browser and it looks different. And when you test it on a Mac or a Vaio, 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.
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 "horizontal thirds theory" uses this theory to place their focal point.
The horizontal 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.
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 states that: Surfers don't read. They scan. Therefore, pages should:
- have 50% fewer words,
- 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) and
- use meaningful subheadings and bulleted lists.
Visit the Jakob Nielsen Alertbox and see his information on How Users Read on The Web.
Designing for the Sight Impaired
Any website you design for any kind of public entity needs to follow ADA (Americans with Disabilities) guidelines that will enable it to be read by one of the 'readers' that blind surfers can use. This means that:
- all images should have alt tags.
- forms should have special reader tags (they will be discussed later).
- color schemes should take into consideration the fact that 12 to 20% of all white males are color-blind. Take Ishihara Color Blindness Tests 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 below? Are the colors correct for what the words say? If you're color blind, chances are you can't tell. According to most statistics, color blindness is a problem for 8 to 12% of males of European origin and about half a percent of females. For these people, the words in the image below appear to be almost the same color.
Color blindness is most commonly a lack of distinction between the colors red and green. To make your pages more friendly for more people, all you have to do is think about the color combinations that you use.
If you're using colors to make distinctions, you should be aware that red and green can be hard for a color blind person to tell apart. Red and green are often used to indicate "stop" and "go" in US culture. However, if you use them in that way on your webpage, your purpose would be completely lost on a color blind person.
Here are some tips to make sure your pages are color blind friendly:
- 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.
- Try to avoid placing red and green together. Especially on items like navigation buttons, the text can actually blend into the background, making it very hard to read.
- If you can, find a color blind friend or relative to look at your site. If you're not color blind, it's often very difficult to tell what they might have trouble with. The challenge is that if they can't see something, they might not even know they aren't seeing it.
- Choose your colors with awareness. It's perfectly fine to make a design choice that negatively impacts color blind people, but do it deliberately. And preferably, come up with an alternative for them as well.
Other Color Considerations:
You need to be careful with color, besides being aware of color deficiencies. Color can be used to create a unifying theme, visual interest, and order from chaos. J.L Morton, in her Color Matters website, says that color provides the harmony. When something is not harmonious, it is either under-stimulating and boring, or so chaotic that the reader can't stand to look at it. She describes different ways to select your color scheme, such as:
| Analogous colors are any three colors which are side by side on a 12 part color wheel, such as yellow-green, yellow and yellow-orange. Usually, one of the three colors predominates. |
 |
| Complementary colors are any two colors which are directly opposite each other, such as red-green, red-purple and yellow-green. |
 |
You can read about more color theory on her website, Color Matters.
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.
- Splash pages. They are 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 dial-up modem.
- Pages that are too wide for the screen, which means that you have to scroll left to right, besides up and down.
- Dead-end links or navigation buttons that go nowhere.
- Background images that swallow up the text and make reading so difficult that readers are gone in less than the allotted 17 seconds.
- Bad grammar and spelling.
Vincent Flanders is a webpage designer who has taken a personal interest in calling these blunders to the attention of anyone who will listen. His website, Webpages That Suck, lists a daily find that illustrates some of these points. Some time back, he was discussing the official page for the State of New Jersey. Look to see what he has up there now.
Killer Websites
David Siegel, another website designer, looks for the following qualities in a good website:
- Clean, easy to update design/structure.
- Good usability in the design - and all that it implies.
- Fast loading 'light' pages.
- Intelligent use of technology - using Flash when it makes sense, not because you want a 'cool' intro!
- The website's ability to convey the meaning/message of the website quickly, if not instantly.
Look at his Website Reviews to get a better description of these qualities. Then, look at some of the reviews (on the left-side screen) and see if you agree with him.
This is the end of Lesson 10. Please go to the next lesson.
|
