Designing For The Web

When you design a webpage, you need to ask yourself two simple questions before you get started:
  1. Who will view my webpage?
  2. What is the purpose of my webpage?
There are also other important design elements:

Audience Analysis

You need to consider your audience when designing your webpage. Are high-tech people going to view this webpage or are kids, students, or others?

Part of the audience analysis is understanding who might view your webpage. This usually depends on the topic or theme of the webpage. A webpage on "Algebra for Kids" will probably need to focus on kids, teachers and parents as a target audience. The "Algebra for Kids" webpage would probably have tons of graphic, bright colors, and a simple style of writing so children would understand the content. A webpage designed for Physicians would probably have more text, real life graphics, and a formal style of writing compared to the "Algebra for Kids" website.

It is a good idea to define your audience before you start to design and write your webpage. This will help you understand what your audinces' needs are and you will be able to make better writing and design choices (mega time saver).

Purpose

The second question you need to ask yourself is what is the purpose of my webpage? Is it to inform, teach, or to entertain?

A "how to" webpage is a teaching webpage, a "did you know" webpage is more informative, while a silly webpage is problably just to entertain its viewers. All three webpage examples have very different purposes. The silly webpage would probably be more conversational in writing, informal in style, and heavy in graphics compared to the other two webpages, which would probably be more serious and formal is style. Know your purpose so you can make wise design and writing choices because different purposes call for different elements (fonts, color, writing style, and design style)!

After you help define your audience and purpose, you can choose appropriate colors, images, fonts, and alignments for your webpage.

TIPS Using Color Schemes For Webpages

Webpages are interactive documents and viewers tend to like color. Choosing the right color for your webpage's color scheme is just as important as the words you select for your text.

Your font color, background color, and image color(s) all help to create your color scheme for your webpage. Consider each color very carefully! For example, you would not want to choose a navy blue font for text on a black background. Your viewer would barely be able to read the dark text on dark background. Try to use light colored fonts on dark backgrounds and dark colored fonts on light backgrounds.

Understanding more about colors will help you to develop a color scheme for your webpage. A "color wheel" is a good place to start! In the color wheel, primary colors are blue, yellow, and red. When two primary colors are blended (blue and red), it makes a secondary color (blue and red make violet). When a Primary color (blue) is blended with a secondary color (violet), it makes a tertiary color (blue-violet). There are 12 basic colors in the color wheel, which are all made from blue, red and yellow.

Tint (white), shade (black), and tone (gray) help to give contrast to the basic colors of the color wheel and more color variety is created! For example, if you wanted to lighten the violet color to a pastel tint you could blend white with it. To darken the violet color you could shade the color with black.

The color wheel can help you see how different colors look together. Some designers like to use analogous colors together (colors adjacent to one another on the color wheel) for a suttle look. Other designers like to use complementary colors together (colors directly opposite one another on the color wheel) to give a dramatic look. Regardless of what colors you choose, select colors within the same range (all tinted or all shaded). For example, when using linked pages within one website, use all backgrounds that are all light, and use all fonts that are all dark. This keeps your color scheme balanced!

Links to sites with more information on color

Using Images In Your Webpage

The kinds of images you use in your webpage are just as important as the colors you choose. You should choose images appropriate to your topic or theme. Use a tennis image or graphic in a webpage on tennis, don't place a shark image in the tennis webpage, this doesn't make sense!

Also, you should try to keep the image as close to the text describing, referencing, or explaining the image. For example, a webpage on tennis would have a graphic of a person serving the tennis ball in the section explaining how to serve the perfect "topspin."

Last, use at least a few images in your webpage (no matter how simple it is). The images are what helps a web viewer to become a web reader and a plain webpage causes viewers to move onto the next webpage!

TIPS Using Fonts On Your Webpage

Different fonts help to establish the mood, tone, and style of your webpage. You would not want to use a script font for a long document explaining a complicated surgerical procedure, this would be difficult to read.

Fonts also help to establish credibility. You would not want to use a silly balloon font on your resume, nobody would take you seriously; the same goes for a webpage! Use an appropriate font that suits the purpose of your webpage.

There are different fonts for different purposes. Serif fonts have extenders ("serifs" and sometimes called "feet") on the ends of the letters. "Times New Roman" is a popular serif font. Serifs are great fonts for long text blocks because the extenders help readers differentiate one letter from another at a glance. This allows a person to read quickly and with little eye strain.

Sans serif fonts do not have extenders on them ("sans" is French for "without"). "Arial" is a typical sans serif font. Sans serifs are good for small blocks of texts, such as titles, mastheads, headings, tables, and labeling an image. Sans serif is usually used for shorter blocks of text because this font becomes more difficult to read the longer you have to read it.

The font type is important, but even more important is the size of the font. A great font type deserves to be appropriately displayed so the reader can actually read the text. Readers do not want to strain their eyes trying to read your webpage (too small) and readers do not want to scroll forever to read one sentence (too big).

Try to select an appropriate font size for your main headings, subheadings, text and footnote text. Be generous enough with the different font sizes so the reader can tell the difference between a main heading and a subheading, but do not get carried away.

The color of your font is also important. choose a color font that is appropriate for your purpose, readable on the displayed background, and fits your color scheme.

TIPS Using Alignments In Your Webpage

When you create a main heading, or a masthead, for your webpage you are creating a graphic. You carefully selected the font type, font size, and font color for your masthead, right? If not, then reconsider choosing all of the above carefully! Treat your heaing like an image. It may be the first thing a web viewer notices on your webpage, make it look like it was designed and placed purposely with care.

After your design choice is decided, select the placement of your masthead. Align your masthead to the left or right of a graphic, or if you place it at the top of your webpage, left align it rather than centering it. Centering is overdone and boring. Be a little different and creative when you align your masthead, your viewers will notice it!

Also, align text evenly to the left or right of an image. The image straightedge acts as a natural border for the text to align with and allows you to fit more on the screen (less scrolling). Also, this creates white space alignment with the image and it helps to create a vertical alignment on the page. White space helps the viewers eye to rest and white space is visually appeasing.

Remember when you first opened your freshman biology book to see nothing but cover to cover text with no white space? Didn't that seem overwelming to read? Do you remember ever reading a document with less text on the page with some pictures on it? Was there some white space? Wasn't it easier to read? The bottom line is that web viewers need some white space on the screen to read through all the text. Design your webpage so web viewers will want to get through ALL of your webpage!

Back