STEPS TO PLANNING & DESIGNING

EFFECTIVE WEB SITES

Another resource: http://www.techdocs.ku.edu/docs/web-authoring_design-basics.pdf

FUNDAMENTALS OF WEB DESIGN

PRESENTATION OBJECTIVES Understand the steps when planning a site

Consider the characteristics in designing a site

STEPS TO PLANNING A SITE:1. Determine site goals2. Identify target audience3. Conduct market research4. Create end-user scenarios5. Create categories of information6. Create a flow chart

STEP 1: DETERMINE SITE GOALSWhere do the goals come from?

Client, company, owner of site One or multiple goals:

Provide InformationSell a productIncrease brand recognitionProvide help or instructionsEntertain

STEP 2: IDENTIFY TARGET AUDIENCE

What is a target audience?Group of users who you would most like to visit your site

USER PROFILE: WHO IS USING THE SITE Ask and answer these questions to establish a

good base knowledge of who is using your site.

1. What is the age range of the user? Kids under age 6, 6-10, 12-15, 16-18, 19-24, 25-35, 35-45, 55-70, 70+

2. What is the gender of the user? Predominately Male or Female?

3. What is the education level of the user? Less than high school degree? High school graduate? Some College? College

Grad? Masters degree? Specialist Degree? Doctorate Degree?

4. What is the economic situation of the user? No job? Poor? Middle Class? Rich?

5. What is the primary language of the user? English? Spanish? Other?

Do you need to consider a translator option on your site?

STEP 3: CONDUCT MARKET RESEARCHFind out what is out there that is close to

the site you are planning For example, you are planning a Pizza Company Web site.

Create a survey to determine your audience’s preferences Survey people that are in your area, that match your

target audience and user-profile How deliver survey?

Evaluating your competitors Preview sites already in existence that match your

site goals What features of your site will make it different?

Better? Than what is already out there?

STEP 4: END-USER SCENARIOSWhat will the person clicking on your site “see” when they click?

Imagined SituationsDescribe with detail: color, animation,

images, content, etc. Allows you to envision what the user will be experiencing while visiting your website

STEP 5: CREATE CATEGORIES OF INFORMATION

Create to organize your site

How will your site be structured? Great examples listed on this page

Each category will be a different page

Navigation should be considered when planning categories

TIP: A site is composed of the different sections of your website and navigation within those sections. It is the framework that shapes your site and defines your navigation scheme. If you develop a sound website structure everything else will fall into place. Source

STEP 6: CREATE A FLOW CHART Outlines pages on a site Shows how pages will connect Form of organization for site planning Encourages web designer to think of all

aspects of site and “map out” plan to include each element

Provides structure to build a site Resource to practice creating flowchart:

http://www.kelie.com/planning/worksheet.pdf

EXAMPLE FLOW CHART OR SITE MAP

The lines in the drawing illustrate the navigation that will be included

Home Page

REVIEW: STEPS TO PLANNING A SITE:1. Determine site goals2. Identify target audience3. Conduct market research4. Create end-user scenarios5. Create categories of information6. Create a flow chart

NOW THAT YOU KNOW HOW TO PLAN A SITE,

LET’S DESIGN IT!

STEPS TO DESIGNING A NEW SITE:1. Create a site concept and

metaphor2. Select Colors3. Choose Fonts4. Establish a Graphic Style and

graphics5. Develop Page Content

STEP 1: CREATE A SITE CONCEPT AND METAPHOR Concept – General theme that runs throughout your site

Reflects the purpose of your website Provides a continuity of design elements throughout your

site Example: A greenhouse using gardening tools, flowers,

etc. Example:

http://www.greenhouse-garden.com/greenhouse-flooring-tiles-2/

Metaphor – A comparison in which one idea is represented as another Example: A website about babies could also use a

''gardening'' theme. The metaphors of seedlings, growth, nurturing, feeding and caring for tender plants would translate very well

Example: http://mygreengraphics.com/

STEP 2: SELECT COLORS Keep It Simple – not too much color Compliment site with COLOR choice Remember meaning of COLORS 3 to 6 colors per site Consider the mood created by color Remember the target audience Contrast is essential

Examples: http://www.colorcombos.com/combolibrary.html GREAT article: Using Colors On A Website

Red text does not go well with blue background

STEP 2: SELECT COLORS..KNOW THE MEANING

Neutral Colors: Whites –stand for purity and cleanliness Grays –exude reliability and conservatism

Shades of gray are one of the most popular colors for business attire Browns – stand for the earth, home and family Blacks – tend to signify power, elegance and sophistication

Warm Colors Reds –good for attracting attention; symbolizes, anger, violence, lust, passion

and can actually raise people’s blood pressure Yellows –can mean weakness or cowardice as well warmth and happiness Oranges –associated with fall harvesting and Halloween. It can also stimulate

a person’s appetite Pinks –usually symbolize innocence, femininity and romance

Cool Colors Blue – calming effect on people; exudes intelligence and trust; can also

suppress appetite Green –stands for jealousy, greed and inexperience, and money and wealth Purple –symbolizes creativityTaken from…http://articles.webdesigners123.com/using_colors_on_website.php

STEP 2: SELECT COLORS: COLOR SCHEMES

Composed of a single color, complimentary colors or contrasting colors. Single Color -- use several different shades and intensities of a single color on

a white background. Example: use a red color scheme, you can use everything from the lightest

pink to a red so dark it is almost black. Complementary Colors --two or more colors that look good together and

create a pleasant blend that is appealing to most people. One color may be dominant and the other used to compliment it.

Contrasting Colors – use two or more dominant colors to create an “eye grabbing effect”

Example: using a dark blue page background, a deep red frame around a white background text area with black text is a typical contrasting color scheme.

HINT: Careful when using contrasting colors—tend to “vibrate”, hard to focus on, or combinations “clash” and are unpleasant to look at Example: red text on a blue background can hurt some people’s eyes

Taken from…http://articles.webdesigners123.com/using_colors_on_website.php

STEP 2: GENERAL COLOR GUIDELINES Text should be readable

Obviously black on white is the default choice but others are also good. White or Yellow or other light colors work on black or any other dark color background. But, Yellow, Green or Gray on white does not.

Use colors that are attractive and pleasing to the eye. Select the colors that portray the image you want to give your

visitors. For consistent colors across different browsers, use web safe colors. Do not use a normal color intensity images as a background behind

text. It makes it difficult to read. If you use an image, use it as a faded watermark.

Colors should be uniform on all your web pages to create a “brand” for your site and let your visitors know they are still on your website.

When you come to designing your website, choose you color scheme just as carefully as you choose your graphics and content. The overall appearance will determine the impression the visitor gets of your company and can mean the difference between success and failure.

Taken from…http://articles.webdesigners123.com/using_colors_on_website.php

STEP 3: CHOOSE FONTS Do not use more than 2 fonts

It might be difficult to read Consider message/mood/theme trying to convey

This would NOT be appropriate text if you were talking about a horror movie

THIS font would be best! Maybe with some blood dripping from it also!

Consider accessibility This might be really difficult for someone to read who

has vision problems RESOURCE:

List of web safe fonts http://www.speaking-in-styles.com/web-typography/Web-Safe-Fonts/

http://www.w3schools.com/cssref/css_websafe_fonts.asp

STEP 4: ESTABLISH A GRAPHIC STYLE AND GRAPHICSBe consistent

CHOOSE: photos or clipartMake sure graphics

have a purposeConsider size

Download time for userRemember target audienceSupport your concept

and metaphor

STEP 5: DEVELOP PAGE CONTENT1. What information/facts will

your website give to the visitors?

2. Will there be any sounds?3. What type of backgrounds

will your page have?4. Do all links work properly?5. Will it be interactive?

SUMMARY 6 steps to consider when planning

Important to complete ALL steps

Give attention to details for all 5 steps when designing a site

Always think about: GOALS Concept Metaphor Target audience Color Fonts Graphics Content

STEPS TO PLANNING & DESIGNING

EFFECTIVE WEB SITES

Another resource: http://www.techdocs.ku.edu/docs/web-authoring_design-basics.pdf

FUNDAMENTALS OF WEB DESIGN