Basic Design Principles for Non-Designers
Read Chapter
Six (The Non-Designer's Web Book)
Do all the
projects.
Complete all the
Quizzes. Instructional Video: Full Screen Ipod Version
There are a few simple "rules" of web design that, if
followed, can make an average page much better than average.
We are going to look at these basic rules quickly and then
look at actual examples of sites and discuss how they handle
each.
- Alignment
- Simply put, alignment states that all of elements on the page
are aligned in relation to each other. This means that you, as the
designer, need to select one alignment, whether it is left,
center, or right, and stick with it throughout. Also, you need to
carry margins and white space in consistent places throughout the
site. For example, if you have two blocks of text in your page and
you left align one, you must should left align the other.
Furthermore, both blocks of text should have the same amount of
left margin before they begin.
- Proximity
- The relationship that items develop when they are close
together. When two items are close, they appear to have a
relationship, when they are apart, they seem to have relationship.
This applies to many things on the page, like a caption and a
picture or a heading and its text.
- Repetition
- Throughout a project, repeat elements, placement, shapes,
buttons, and colors, making the pages more familiar and easier to
navigate.
- Contrast
- Contrast pulls your eye to the page, guide you around it, and
enhance the readability of the page. Good contrasting colors will
help the viewer find information, read it, and enjoy your site.
Let's look at some sites and see how others are doing...
How to Recognize Good and Bad Design
Read Chapter
Eight (The Non-Designer's Web Book)
Backgrounds
- Background does not interfere with reading the text. This goes
for both wild textured backgrounds as well as solid-color
backgrounds that do not contrast well with text color.
Text
- Leave space between the text and images, borders, and anything
else on the screen.
- Don't overuse bold, italics, scrolling, or upper case.
- Don't make the text look like a link unless it is a link.
- Don't make the text blink.
- Make text big enough to read, but not big enough to look like
you are shouting.
- Don't use rainbow text where every word or every letter is a
different color.
Links &map navigation
- Always use words and symbols for links that are easily
understood by the viewer.
- Put your links in a navigation bar, either vertical or
horizontal.
- Navigation bar gives some clue as to what page is currently
being viewed.
- A large site has an index or site map.
- Test your links often to make sure they still work.
- Consider setting your links to a color that looks good with
the erst of your page.
Graphics
- Keep graphic file size to a minimum to eliminate long
downloads.
- Don't make the viewer scroll to view the entire graphic.
- Use thumbnails if you have a lot of graphics to display. Make
the thumbnails separate files of smaller sizes so that the viewer
does not have to load all of the full-sized graphics.
- Use ALT text with your graphics, it tells the view what the
graphic is before it has loaded. It also appears as "help" help
when the user mouses over the graphic.
- Keep your graphical links to a small size. Large buttons take
up too much space and look unprofessional.
- Use browser-safe colors.
- Let animations run a couple times and then turn off the
animation.
- Limit the number of animations to one per page.
Tables
General Design
- Avoid any king of "Under Construction" pages or graphics.
- Avoid counters on pages. No one cares.
- Establish a focal point.
- All pages use the same layout and navigation is consistent.
- Pages download quickly.
- Test your pages in Netscape and Exploder. Just because it
looks good in one...
|
