Guidelines Eye Appeal Sketching, Prototyping, and Testing the Design

1. Site Design • Guidelines • Eye Appeal • Sketching, Prototyping, and Testing the Design

2. Site Design • Guidelines • Eye Appeal • Sketching, Prototyping, and Testing the Design

3. Guidelines • aspect ratio • relationship between height and width • Most computer screens have h:w ratio of 3:4 • eg, display size of 600 pixels X 800 pixels • browser borders and title bar takes space • For most users screen is really 420 X 750. • At 72 dpi, that’s 5.6 inches X 10.1 inches

4. Guidelines • page layout • magazine: eye first sees top right-hand corner • web pages: eye first sees top • also, eye sees item faster if page is not cluttered • movement often catches eye

5. Guidelines • text • black on white is easiest on eyes • never display text on photos • Best line length for readability is 10-12 words per line (adults) or 8-10 per line (children)

6. Guidelines • Text • 12 point system fonts easiest to read. • example: Times, Helvetica, Arial, Times Roman, Verdana, Georgia. • System fonts most likely to be found on all computers

7. Guidelines • Text (cont) • 12 point system fonts easiest to read. • example: Times, Helvetica, Arial, Times Roman, Verdana, Georgia. • System fonts most likely to be found on all computers

8. Guidelines • Text (cont) • Use serif font (eg Times) for body text • serifs are the little feet on the tops and ends of letters. Easier to read in paragraphs. • Use sans serif (without serifs) for titles. Easier to read in short titles. Times New Roman is a serif font Arial is a sans serif font

9. Guidelines • Text (cont) • Use only 2 fonts and 2 sizes per page. Less confusing. • Use one font for titles, one for body text. • Avoid words in all caps. Looks like your YELLING. • Web page readers skim more than magazine readers. Use larger and heavier font for headings. • Use lots of subheadings. • Separate paragraphs by a single line OR indent, not both. • Leave lots of white space around text.

10. Guidelines • Text (cont) • Build your page around a single axis. Easier to read if text, images and graphics align. • Axis can be near left, at center, or to right. • page should balance visually from top to bottom and from right to left • eg, Don’t concentrate the graphics in one corner.

11. Guidelines • Text (cont) • Simpler is better. • Cjaps amd c;itter are bad/

12. Site Design • Guidelines • Eye Appeal • Sketching, Prototyping, and Testing the Design

13. Eye Appeal • color • balance • contrast • alignment • scrolling

14. Eye Appeal • color, balance, and contrast • bold, bright colors in menu areas and mastheads are distracting. Use pastels. • Use the color wheel to avoid complementary colors since these are contrasting. • Colors that sit directly across the color wheel from each other are complementary. • Colors close to each other are less contrasting, more pleasant. • Better to use shades (add black to a color) and tints (add white to a color)

15. Eye Appeal

16. Eye Appeal

17. Eye Appeal • alignment • Human eye likes things to line up. • Example: left edge of a picture should line up exactly with the left edge of the text column in which it is embedded. • Alignment scheme for site should be the same from page to page. • Usually use left column edge as core of alignment scheme since text can only be justified left or right, but not both. • Other types of media can justify text both right and left, so have more alignment options.

18. Eye Appeal • Frames, menus, and scrolling • Advantages of frames: • main menu items are always available to users • title is always present to answer “what site is this?” • graphics do not reload and flash every time a new content page is called up.

19. Eye Appeal • Frames, menus, and scrolling • Menus • should always be visible • should only show main sections, not every page. • can use hierarchical menus to show subsections • must be in consistent position from page to page • should be based on the flowchart created in the design phase.

20. Eye Appeal • Frames, menus, and scrolling • Scrolling • computer screen is more like a TV than a newspaper • is disruptive. Do not scroll a TV screen. • make sure most important information can be seen without scrolling. • better to link small pages than to make user scroll down one large page.

21. Eye Appeal • User control • should offer as much control as possible. • user control it the center of interactivity • pages should be as simple as possible yet give maximum number of choices.

22. Site Design • Guidelines • Eye Appeal • Sketching, Prototyping, and Testing the Design

23. Sketching, Prototyping, and Testing the Design • Sketches are part of the design process (see next page). • Sketching introduces the artistic component to the design.

24. Planning process Goals chart Planning Table General Flow Chart Detailed Flow Chart Specifications Storyboard and sketch Prototype

25. Sketching, Prototyping, and Testing the Design • Sketch components: • Display of info: text, images, sound, vcideo, tables, lists. • Navigation: menus, identification, user control • feedback and interaction • corporate identity • location and type of text • color, contrast, balance. • frames and alignment • scrolling

26. Sketching, Prototyping, and Testing the Design • Can sketch in any medium: paper, computer, etc. • Can use callouts or comments that identify font specifics, colors, etc.

27. Sketching, Prototyping, and Testing the Design • Prototype • a pixel by pixel model of the page that users will see. • built on the computer and displayed in the same manner as its published form. • Similar to sketch, but more detailed.

28. Sketching, Prototyping, and Testing the Design • Testing prototype • Display of information: is text readable? Are images useful? Can you find info in the tables and lists? etc. • Navigation: Is it clear what site you’re at? Where you are in the site? What else if available at the site? Where you should go next? • Are all menu choices evident? How do you search the site?

29. Sketching, Prototyping, and Testing the Design • Testing prototype • Communicating the corporate identity: Who is sponsoring the site? How can you tell? Is the company logo visible? etc. • Design issues: What’s missing? What could be eliminated? Is the page cluttered?

30. Testing the final site • Testing • Test every browser and browser version that your users will probably use. • Test on all platforms. • Test with all reasonable screen sizes, resolutions, color depths • Test with different bandwidths • Test different versions of necessary plug-ins. • Do user testing