1. W eb D esign Concepts

2. The Web Design Process  Design Phase  Production Phase  Distribution Phase  Maintenance Phase

3. Design Concepts: Summary  Easy for viewer to see the purpose of the site  Appeal to your “audience” and their needs  Consistent from one page to another  Easy to read  Easy to navigate

4. Design Phase What do you want it to be about? Site Goals & Objectives  Type of Website  Type of Website (personal, organizational, commercial, or informational)  Target Market –Do you want your page to be accessed by as many people as possible or are you targeting a select group?

5. Design Phase Target/Research Who is the ideal user of your page?  Target income, sex, or ages  Determine what they like (design with the user in mind) –what will draw them to your site –what will keep them coming back? –do they want to be informed or entertained if informed – what do they want to know?  Effective and affective - a Web Site is aesthetics, ergonomics, personality…

6. Design Phase Target/Research Gear the colors, text, and images to your audience age and interests

7. Design Phase Target/Research  How is the user connecting to the web? - via older computers or high-speed access - most users will simply not wait longer than 10 seconds for a page to load. They will go elsewhere!

8. Design Phase Target/Research  What is the user’s level of web sophistication/ ease in using the Web? for novice users, make sure your site is easy to navigate with few (if any) frames  What special needs may the users have? - accessibility needs (large print or audio for disabled users) - international focus (translators & web connection speed) - currency converters

9. Design Phase Target/Research  Feedback - provide a method for users to contact you Physical address Map Email link Contact Form

10. Design Phase  After you’ve done your research… –create the Site Map: page titles, file names, basic concepts layout/visual design –create the Mockup/WireFrame (layout/visual design)

11. Visual Design  A computer monitor’s screen resolution is the horizontal width and vertical height of the computer screen - in pixels  The three most common screen resolutions (width x height) are –640 x 480 (small) –800 x 600 (most common) –1024 x 768  You have no control over the user’s screen resolution!

12. Visual Design  Consistency - develop a unified look - all the pages look like they belong to the same site - use repetitive elements (color, text, graphics)  Organized, Usable & Navigable - easy to follow the flow of information & locate information - ex: events in chronological order & people in alphabetical order

13. Visual Design  Text, Link, & Background Colors Coordinate - text & links stand out from the background  Alignment - line the information up, don’t center everything  Don’t have the user scroll endlessly - shouldn’t page down more than 3 times

14. Visual Design Visual Design use of white space so it’s easier to read

15. Visual Design  white space and solid colors increases readability  contrast calls attention to site navigation

16. Visual Design Design for the web world and not for the print world focus the users eye toward the middle

17. Visual Design

18. Visual Design : Don’ts Visual Design : Don’ts not enough white space, hard to read

19. Visual Design : Do’s white space, readable, contrasting colors

20. Visual Design : Color & Graphics  Consistency/Continuity – develop a unified look complementary colors  Use complementary colors contrast  Use contrast for attention repetition  Use repetition for consistency  One or two colors highlight - three or more confuse  Primary colors are difficult on eyes  Color Psychology: –Warm colors suggest activity and power –Cool colors suggest tranquility and peace –Provide atmosphere - “I’m blue today”

21. Visual Design : Color & Graphics

23. purpose  Graphics should have a purpose and are useful to the page – not just decorative download quickly  Graphics should download quickly - don’t use large graphic file - size and number of graphics influences the speed at which your page loads thumbnail images  Use thumbnail images that link to larger images when larger images are necessary (ex: paintings/art galleries)

24. Visual Design : Color & Graphics  should “fit” the content of the page  repeat a few design elements throughout your site or page to create a sense of continuity  cluttered screens cause visual confusion  images should load quickly, in less than 30 seconds  fix images to they blend into the page background

25. Visual Design : Color & Graphics

27. don’t make the page too cluttered!

28. Visual Design: Color & Graphics too many images can detract from the content

29. Visual Design : Color & Graphics

30. too much animation detracts from the text and content of the page

31. Visual Design: Navigation  organized - concise, easy to understand, descriptive  are instantly visible to user - underlined or clearly visible so users know that they are links (breadcrumbs)  logical arrangement  consistency/harmonize across the site and within each page  users always know where they are within the site and on what page the are currently on  provide multiple ways to navigate across the site (not sequential like the print world)

32. Visual Design : Don’ts  Blinking  Animation – use sparingly & with a purpose –Under construction signs –Animated email graphics –Multiple animations one page –Large animations that detract  Junky advertising  Sideways Scroll  Frame scroll bars in the middle of a page

33. Content Concepts: Text  Catchy titles  Say it! –be brief and to the point –be 50% of the print contentprint content  Chunks of information - phrases  Organized & logical - so users can get to the info they want quickly - use lists  Inverted newspaper style - most important information first, summarized  Leave lots of white space ex: between paragraphs people don’t like to read lots of text on the Web

34. Content Concepts : Text  Font size –large enough to read but not so large to create lots of scrolling  To set text apart: –use headings, sub-headings, lists –strong and emphasis to highlight –horizontal rules to set off sections –use color with text to illustrate  Check your spelling!

35. Content Concepts: Text too wordy!

36. Content Concepts : Text Don’t underlined text for anything but links. Link text should make sense. Click here doesn’t tell your viewer what is at on the “linked” page!

37. Content Concepts : Text align text for readability (centered text is harder to read) similar colors for scan ability consistent size for readability

38. Production Phase  Create a mockup  Perform usability tests  Redefine the mockup  Create the site itself

39. ProductionPhase Production Phase  Test & Retest - test across various browsers, operating systems & computers - different browsers interpret HTML differently so pages display differently) - test the latest browsers plus older browsers

40. Distribution Phase  FTP - bring the site up live - server with 24-hour access (at your home, via an ISP, or via a web space provider)  Check It Out to make sure it works!  Publicize  Register with search engines

41. Maintenance Phase  Date It! - include an update date (increases the chance they will revisit your site)  Establish an Update Schedule - determine the amount of time needed for adding & updating content (for a small site, this may only involve two or three hours a month)  Link checker (avoid dead links)  Feedback - respond to email  Track usage statistics  Sign, Copyright, Copyright Date Your Pages!

42. The End Have fun creating websites! More Info: http://www.lindabaker.org/