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