Steps to Planning & Designing Effective Web Sites

1. Steps to Planning & Designing Effective Web Sites Fundamentals of Web Design Another resource: http://www.techdocs.ku.edu/docs/web-authoring_design-basics.pdf

2. Presentation Objectives • Understand the steps when planning a site • Consider the characteristics in designing a site

3. STEPS to Planning a site: • Determine site goals • Identify target audience • Conduct market research • Create end-user scenarios • Create categories of information • Create a flow chart

4. STEP 1: Determine Site Goals • Where do the goals come from? • Client, company, owner of site • One or multiple goals: • Provide Information • Sell a product • Increase brand recognition • Provide help or instructions • Entertain

5. STEP 2: Identify target audience • What is a target audience? • Group of users who you would most like to visit your site

6. 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?

7. STEP 3: Conduct market research • Find 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?

8. STEP 4: End-user scenarios • What will the person clicking on your site “see” when they click? • Imagined Situations • Describe with detail: color, animation, images, content, etc. • Allows you to envision what the user will be experiencing while visiting your website

9. 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

10. 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

11. Example flow chart or site map The lines in the drawing illustrate the navigation that will be included

12. REVIEW: STEPS to Planning a site: • Determine site goals • Identify target audience • Conduct market research • Create end-user scenarios • Create categories of information • Create a flow chart

13. Now that you know how to plan a site, let’s DESIGN it!

14. STEPS to Designing a new site: • Create a site concept and metaphor • Select Colors • Choose Fonts • Establish a Graphic Style and graphics • Develop Page Content

15. 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/

16. 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

17. 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 creativity Taken from…http://articles.webdesigners123.com/using_colors_on_website.php

18. 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

19. 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

20. STEP 3:Choose Fonts • Do not use more than 2 fonts • Itmightbedifficulttoread • 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

21. STEP 4: Establish a Graphic Style and graphics • Be consistent • CHOOSE: photos or clipart • Make sure graphics have a purpose • Consider size • Download time for user • Remember target audience • Support your concept and metaphor

22. STEP 5: Develop Page Content • What information/facts will your website give to the visitors? • Will there be any sounds? • What type of backgrounds will your page have? • Do all links work properly? • Will it be interactive?

23. 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

24. Steps to Planning & Designing Effective Web Sites Fundamentals of Web Design Another resource: http://www.techdocs.ku.edu/docs/web-authoring_design-basics.pdf