1. Page Design Web Design Professor Frank

2. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and graphic information Promotes order, efficiency and enjoyment of your website

3. Document Design Documents produced for web have more complex purpose and functionality than documents produced for print sources

4. Adaptive Design Design beyond a single web page – anticipate designs for other formats (print, mobile, etc) Source document and media style sheets

5. Defining Styles External style sheets – most effective Create a different external style sheet for each context and then reference the style sheet using the “media” attribute of the tag

6. Adaptive Design

7. Document Order The sequence in which elements, such as site identity, navigation, primary content, related content, and provenance information, appear in the document source code Screen readers read web pages at the beginning of page and read through content in sequence

8. Document Order

9. Front-loading Put most important elements at beginning of page Search engines give greater weight to top of document

10. Selective Display Include elements that are relevant to different contexts and code the document to allow elements to display or not, as appropriate

11. Text Alternatives Provide text equivalents for all relevant nontextual elements – Descriptive captions – Links to text-only versions of page – Provide captions/text transcripts to audio/video

12. Understand the Medium

13. Visual Design Create a clear visual hierarchy of contrast Define functional regions of the page Group page elements that are related

14. Functional Design

15. Consistency Establish a layout grid and style for handling your text and graphics, and then apply it consistently Repetition is not boring!

16. Graphic Themes

17. Contrast Use tools of page layout, typography, and illustration to lead the reader’s eye through the page Readers first see pages as large masses of shape and color, then they begin to pick out specific information, first from graphics then from text Graphic balance and organization of the page is crucial

18. Color & Contrast in Typography

19. Contrast Variability Test your design on a variety of screens, devices and conditions Don’t go overboard with contrast

20. White Space Use white space to avoid crowding the edges of the browser windows with important content Consider floating the page in the center of the browser window

21. White Space

22. Style Don’t set out to develop a “style” for your site; let style develop naturally from balance of content and layout The best style is one that readers never notice, but where everything feels logical

23. Simplicity Consider vision-impaired users and people with cognitive disabilities, such as memory or learning disabilities Stick with a simple language and navigation applied consistently throughout your site

24. Gestalt Design Principles Proximity Similarity Continuity Closure Figure-ground relationships Uniform connectedness 1 + 1 = 3 effects

25. Gestalt Principles

29. Page Frameworks Fixed-width page vs flexible-width page To scroll down or to not scroll down?

30. Fixed Page Widths Good for complex page layouts with many functional subregions of the page Page layout will be stable whatever the size of the user’s screen or browser window You can fix the position of elements on the page and control such typographic features as line length and spacing

31. Fixed-width Hybrid

32. Flexible Page Widths Accommodates different users and a variety of display devices Easily adapted to increase text size, display color and contrast, and other viewing or reading parameters

33. Flexible Page Widths

34. Page Width and Line Length Ideal line length - about twelve words per line Reading slows as line lengthens Users can control length – enlarging text size, narrowing browser window

35. Page Length Ideal length is balance of 4 factors: – Relation between page and screen size – Content of your documents – Whether the reader is expected to browse the content online or to print or download the documents for later reading – Bandwidth available to your audience

36. Page Length Disadvantages Disorientation that results from scrolling on computer screens Long web pages require the user to remember too much information that scrolls off the screen Sense of context is lost when the navigational buttons or major links are not visible

37. Long Documents & Printing/Saving Divide the document into chunks of no more than 1-2 printed pages’ worth of information Provide a link to a separate file that contains the full-length text combined as one page Position “jump to top buttons” at regular intervals down the page

38. Shorter Web Page Advantages Home pages and menu or navigation pages elsewhere in your site Documents to be browsed and read online Pages with very large graphics

39. Longer Web Page Advantages Easier to maintain (content is in one piece, not in linked chunks spread across many pages) More like the structure of their paper counterparts (not chopped up) Easier for users to download and print

40. Page Headers Best measure of the efficiency of a page design is the number of options available for readers within the top six inches of the page “Signature” graphic and page layout allows the user to grasp immediately the purpose of the document and its relation to other pages

41. Page Headers

42. Page Footers

43. Vertical Stratification “Above the fold” (ie above the scroll) captures average user’s attention Web page layouts should be judged not by viewing the whole page as a unit but by dividing the page into visual and functional zones and judging the suitability of each screen of information

44. Design Grids

45. Web templates create a regular, repeating structure of design patterns that consistently organize identity, navigation, content, and technical functionality

46. Templates Global identity of the enterprise Global enterprise navigation features that tie smaller sites and programs to the larger institution Well-designed, carefully validated xhtml and css code Consistent semantic nomenclature for all xhtml and css containers and page elements A consistent, enterprise-wide typography program Accessibility standards that meet requirements Compatibility with a basic web content management tool

47. Templates

48. Typography in Template Design Most users will never explicitly notice why a wide range of related sites produces a cohesive web experience