Design of Websites

1. Determine the topic of your website.

What is your main idea? (New England reciepes, Local sports teams, Hobbies like sailing, skiing dance, How to fix or do something, publicity for a band, local business or nonprofit group)

Do you have a point of view about the topic or theme? (Informing, conviencing, praising, showing, illustrating, explaining)

What does your audience need to know? (Basic or Advanced ideas, examples, warnings, definitions, uses)

How many main pages or main topics will you have? (Four, five, six, ten) This will help you plan the primary navigation system.

2. Sketch out the design of the website.

Where is you navigation system on the page? Will the primary navigation be at the top of the page, on the right side or on the left side?

Make sure you can get from any main page to another main page. Do not force your users to use a back button.

Will you have secondary navigation?

Where will the visual elements be placed on the page? Will you use images, graphics, or video?

What text elements will you use?

3. Pick the colors and fonts of the page or website.

Blue, red, and yellow are primary colors and the secondary colors are green, orange, and violet.

Most websites use 4 to 5 colors. The colors may realte to the brand, topic, or emotion that you want to convey. The symbolic meaning of color differs by culture.

Some desiners use a monochromatic color scheme that uses only one hue (color) with different shades. Others use contrasting colors such as blue and orange that are opposite of each other on the color wheel. Other designers use analogous colors that are next to each other on the color wheel. Another techniques is to use neutral colors like black, white, gray, and sometimes brown.

http://colorschemedesigner.com/

Use colors from nature.

Pick color choices from an image or painting or website. http://www.colr.org/

Color Names Supported by All Browsers

Color Glossary

Here are a few color rules (from Taylor Loran):

• Warm colors appear larger than cool ones and seem to be moving toward the viewer. Cooler colors recede into the background.
• Pure primary and secondary colors draw the eye toward them and attract attention.
• To create unity use one color with tints and shades of that hue or colors that contain the same hue. (These colors are located next to each other on the color wheel.)
• To draw attention to images or type don't use a color too close to black.
• Try not to think of black and white as colors but as neutral space.

4. What style will you use?

Is there a CSS you want to use for headings, paragraphs, body, quotations, etc?

You can use Page Properties to select CSS.

5. Navigation

Turn you main ideas into simple, short, clear labels.

Pick colors and fonts that are easy to read.

5. Write and rewrite the text.

Is there certain number of words that are expected by the audience? What is the age and knowledge of the audience?

Is the writing formal or informal? What genre does the witing follow (news, sports, narrative, comedy, dramatic, academic, business report)?

How do you cite sources?

Is the text easy to read?

Are you using or creating a brand signature?

7. Select, Size and Adjust the images.

Pick images that add to the meaning of the text. Is the image the focal point of the page?

Is the image appropriate for the audience?

Make sure you do not violate copyright.

Do you need a GIF, JPEG or PNG?

Are you using a logo?

Size the images for the webpage and for the upload size of the computer file.

Be sure to save images for the web in Photoshop.