2. Web Design Spring 2003

3. Web Design  Everyone and everything has a Web page these days.  Web designers need to make their pages stand out from the crowd.  Web pages must be attractive and easy to navigate.  A Web site must take advantage of technologies that include: text, images, sound, video, and interactivity.

4. Web Design - Model  Plan First you plan the site in some detail.  Gather Gather and prepare the contents.  Build Finally, your build the site.

5. Step 1: Planning a Web Site

6. Identify Your Audience  Building a Web site is like preparing a meal.  Successful Web sites serve the needs of their audiences.  Web designers must understand their audience: Why they came to the site. What they are looking for. How they think.

7. Defining Your Audience Age Income Education Ethnicity Residence Location Gender Interest History

8. User-Centered Design  Organization-centered: Sites that are built from the point of view of the company or organization.  Technology-centered: Site that is built around the favorite tools of the designer.  User-centered: Site that is build based upon the situation of the target audience.

9. Purpose  After defining the audience, you must consider what the site will be used for and why.  Examples: Increase sales Display items Provide information

10. Goals and Objectives  Goals state the desired long-term results.  Objectives include specific means and methods used on the site to accomplish the goals.

11. Planning the Structure  Structures normally consist of a graphical flow chart and a detailed written statement.  A flow chart is a graphical shorthand diagram that represents the site’s detailed verbal description.  No two Web sites have the same structure.

12. Flow Chart My Course Page HomeINFSY 431 Course Schedule Resources Assignments Vita Education Portfolio

13. Interactivity  Ability to choose  Animation  Search and find  Manipulate  Construct  Question and answer  Converse

14. Navigation  A beautifully designed Web site serves no purpose unless the user can find information within the site.  Navigation is the function that helps users chart their course through your Web site.  A good navigation design is simple and consistent.

15. Navigation – Questions  Whose site am I looking at?  Where am I in the site?  What else is available at this site?  Where should I go next?  How do I find what I am looking for?

16. Navigation - Menus  Menus serve several purposes: They show the categories in which the site is organized. They indicate which category the user is currently in. They allow users to click and move to another category.  Menus can stretch across the top of the page or range down the sides of the page.

17. Navigation – Site Map  A site map shows the various sections and identifies the current page.  Example: Contents Site MapCourse INFSY 431 Penn State HBG

18. Navigation – Cascading Titles  Most Web sites contain titles.  Titles usually start from the home page.  Cascading titles allow the user to click on words.  Example: My Home Page/Courses/Schedule

19. Navigation – Page Numbering  Not all Web pages fit neatly into a hierarchy.  Some pages Web pages are designed to be read serially – one after the other.  This function is normally implemented by displaying the page numbers and using a Next and Previous button.

20. Navigation – Others  Displaying Choices: Navigation menus are implemented by using a pop-up menu.  Searching and Finding: Key word searches.

21. Feedback and Interaction  The Internet is a two-way medium. Information can be gathered as well as provided.  Information gathering: Explicit – Collection in which the user is aware of. Implicit – Collection that the user is not aware of.

22. Feedback and Interaction  Forms: The simplest form of explicit feedback is collected via a form  Discussion Boards: Asynchronous communication that allows users to share ideas and information.  Chats: Synchronous communication that allows users to communicate in real time.

23. Observe & Critiques Sites  The display information: How does the site display text, images, and video? How does the site display lists and tables?  Navigating through the site: Whose site am I looking at? What else is available? Where am I in the site?

24. Observe & Critiques Sites  Choosing and finding: How do I select items to view?  Feedback and interaction: How are forms used?  Communicating the organization’s identity: How does the site use color? What kind of distinguishing font is used? How is the logo displayed?

25. Observe & Critiques Sites SUN MicrosystemsAmazon.com Jericho CommunicationsDisney ESPNTeacher’s Dilemma Microsoft

26. Guidelines for Site Design  Aspect Ratio: The aspect ratio is the relationship between the height and width of a computer screen. Most modern monitors have a display size of 800 pixels wide by 600 pixels high.  The Roving Eye – Publications: Research has shown that items which appear at the top right of publications are seen first. Does this apply to Web Pages?

27. Guidelines for Site Design  Black text on a white background is the easiest to read.  There should be no more than 10 – 12 words per line.  Stick to standard 12-point font systems.  Systems fonts include Times, Helvetica, Arial and Times Roman.  Use serif fonts for the body.  Use san serifs fonts for titles.

28. Guidelines for Site Design  Use only two types of fonts and two sizes on a page.  Avoid all words in caps.  Make sure headings contrast with the body text.  Separate paragraphs using line space or an indented first line.

29. Guidelines for Site Design  Leave plenty white space ( 40%) around blocks of text.  Build your page around a single axis.  Make the page balanced visually from top to bottom.  The simpler the better.

30. Color, Contrast, and Balance  Bold, bright colors in the menu areas and masterheads distract the eye from other elements.  Often it is best to use subtle or pastel colors for these purposes.  Colors used in combination should compliment each other.  Don’t use bold colors or patterns as backgrounds

31. Color, Contrast, and Balance Color Wheel

32. Color, Contrast, and Balance  Primary Colors: Red, yellow and blue.  Secondary Colors: Orange, green, and violet.  Use the Color Wheel to help you select colors that fit your purpose.

33. Color, Contrast, and Balance The colors on the left:blues, greens, and violets, are cooler in tone than those on the right, reds, yellows and oranges.

34. Color, Contrast, and Balance  The warm colors get their influence from their connection with fire.  The cooler colors remind us of the sea and the sky.  Cool colors are more business-like and detached.  Warmer colors are more fiery and provocative.

35. Color, Contrast, and Balance  Colors that sit directly across from the wheel are called complementary colors.  Combining two complementary colors makes each seem more intense and brighter, creating a great deal of contrast.  Colors next to each other create less contrast.

36. On a Light Background! White letters can get lost Pink may not do it either Magenta is a little better Red looks okay but may be a problem for some to see Black or violet are good Yellow letters tend to disappear

37. But Look at them Here! White letters can get lost Pink may not do it either Magenta is a little better Red looks okay but may be a problem for some to see Black or violet are good Yellow letters tend to disappear

38. Color, Contrast, and Balance  To create contrast you can also use shades and tints.  Adding black to a color is called a shade.  Adding white to a color is called a tint.  There is no right or wrong color scheme.  Some colors schemes create a sense of comfort and harmony, whereas other create contrast and discord.

39. Color, Contrast, and Balance  Alignment: The human eye likes it when things line up. Humans read from left to right. The scheme of alignment should be consistent. Use the left column as the core of your alignment scheme.  Frames: Most Web pages consist of a single frame. Others divide the page into separate frames that can change independently.

40. One Column Layout MY WEB PAGE

41. Two Column Layout - 1 R Table Of Contents Main Window

42. Two Column Layout – 2 R Table Of Contents Main Window LOGO - TITLE BAR

43. Scrolling  In no case should essential items of navigation such as menu items, appear below the scroll bar.  Long scrolling is an unnatural and inefficient process.  Scrolling requires too much additional effort by the user.

44. User Control  A Web page should offer as much user control as possible.  The Internet is an interactive medium.  User control is a central aspect of this interactivity.  Keep in mind that most users like simplicity.

45. Step 2: Gather and Prepare the Contents

46. Step 3: Build Your Web Site

47. Top Ten Mistakes 1. Using Frames  Inability to bookmark current page and return to it. 2. Gratuitous Use of Latest Technology.  Using the latest and greatest technology is a sure way to discourage users. 3. Scrolling Text, Marquees, and Constantly Running Animations  Never include page elements that move incessantly.

48. Top Ten Mistakes 4. Complex URLs  A URL should contain a human-readable directory and filename. 5. Orphan Pages  Make sure that all pages include a clear indication of what web site they belong to. 6. Long Scrolling Pages  All critical content and navigation options should be on the top part of the page.

49. Top Ten Mistakes 7. Lack of Navigation Support  Provide a site map and let users know where they are and where they can go. 8. Non-Standard Link Colors  Consistency is key to teaching users what the link colors mean. 9. Outdated Information 10. Overly Long Download Times

50. Things to Remember  Use well-organized information  Use well-placed items  Use well-chosen graphics that support content or theme  Use well-designed icons and buttons  Important things go at the top and left.  Top-left is prime real estate.

51. Things to Remember  Navigation tools should be intuitive and appear in the same place from screen to screen.  Elements should line up  Show appropriate relationships between items.  Be consistent in placement of key elements  Use balanced arrangement that facilitates interpretation and navigation.

52. Things to Remember  Leave “white” space (40 percent rule)  Do not crowd or clutter  Present one topic per screen  Do not create text-heavy screens  Present data in tables

53. Questions?