Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition

2 Objectives Design for the computer medium Design for the computer medium Create a unified site design Create a unified site design Design for the user Design for the user Design for the screen Design for the screen

Design for the Computer Medium

4Principles of Web Design, Third Edition Craft the look and feel The interface the user must navigate is often called the “look and feel” The way your site works The way your site works Personality it conveys to the user Personality it conveys to the user

5Principles of Web Design, Third Edition Make Your Design Portable Your Web site design must be portable and accessible across different Your Web site design must be portable and accessible across different browsers browsers operating systems operating systems computer platforms computer platforms You must always remember to test your work even when you feel confident of your results You must always remember to test your work even when you feel confident of your results

6Principles of Web Design, Third Edition Design for Low Bandwidth Plan your pages so that they are accessible at a variety of connection speeds Plan your pages so that they are accessible at a variety of connection speeds If your pages download slowly because they contain large, detailed graphics or complicated animations: If your pages download slowly because they contain large, detailed graphics or complicated animations: your users will leave before they ever see your content your users will leave before they ever see your content

7Principles of Web Design, Third Edition Plan for clear presentation and easy access Plan for clear presentation and easy access to your information Plan for clear presentation and easy access to your information Provide direct links to areas of great demand Provide direct links to areas of great demand Avoid looooong scrolling pages, break them if necessary Avoid looooong scrolling pages, break them if necessary

Create a Unified Site Design

9Principles of Web Design, Third Edition Plan Smooth Transitions Plan to create a unified look Plan to create a unified look Reinforce the identifying elements Reinforce the identifying elements Avoid random, jarring changes in format Avoid random, jarring changes in format Consistency creates smooth transitions Consistency creates smooth transitions

10Principles of Web Design, Third Edition Use a Grid to Provide Visual Structure The grid is a conceptual layout device that organizes content into columns and rows The grid is a conceptual layout device that organizes content into columns and rows A grid provides visual consistency A grid provides visual consistency HTML authors use the table elements to build the grid for their pages HTML authors use the table elements to build the grid for their pages CSS will eventually replace tables for layout CSS will eventually replace tables for layout

11Principles of Web Design, Third Edition Use Active White Space Use white space deliberately in your design Use white space deliberately in your design Good use of white space guides the reader and defines the areas of your page Good use of white space guides the reader and defines the areas of your page Passive white space Passive white space Blank areas that border the screen or are results of mismatched shapes Blank areas that border the screen or are results of mismatched shapes Active white space is an integral part of your design that structures and separates content Active white space is an integral part of your design that structures and separates content

Design for the User

13Principles of Web Design, Third Edition Design for the User Keep your design efforts centered solely around your user (fig. 2-12, 2-13, 2-14) Keep your design efforts centered solely around your user (fig. 2-12, 2-13, 2-14) Know your audience; survey them Know your audience; survey them Design for interaction and… Design for interaction and… Decide whether the user will read or scan Decide whether the user will read or scan Design for location Design for location Rank the info and position according to importance Guide the user’s eye Guide the user’s eye

14Principles of Web Design, Third Edition Design for the User Keep a flat hierarchy…avoid too many layers! Keep a flat hierarchy…avoid too many layers! “Three-clicks rule” “Three-clicks rule” Provide a site map Provide a site map Provide plenty of linking options Provide plenty of linking options Provide location information Provide location information Use plenty of textual links Use plenty of textual links Don’t overload the user with too much content Don’t overload the user with too much content Avoid the temptation!!!!! Avoid the temptation!!!!! Design for accessibility Design for accessibility

15Principles of Web Design, Third Edition Design for Accessibility Develop Web pages that remain accessible despite any physical, sensory, and cognitive disabilities Develop Web pages that remain accessible despite any physical, sensory, and cognitive disabilities Developing accessible content naturally leads to creating good design. Developing accessible content naturally leads to creating good design. Follow W3 Accessibility Initiative guidelines at Follow W3 Accessibility Initiative guidelines at Adaptive devices for accessible browsing: Adaptive devices for accessible browsing: Build alternative sites Build alternative sitesalternative sitesalternative sites Follow these quick tips: Follow these quick tips:

16Principles of Web Design, Third Edition Hands-On Project Ask your classmate what 2 sites are his/her favorites. Ask your classmate what 2 sites are his/her favorites. Write down the complete URL. Write down the complete URL. Visit at least one site and do the following: Visit at least one site and do the following: Visit the home page and a secondary page Visit the home page and a secondary page Indicate if there are unifying characteristics (shared theme, colors, fonts, graphics, page layout or columns, etc.) Indicate if there are unifying characteristics (shared theme, colors, fonts, graphics, page layout or columns, etc.) Indicate if there are areas of active and passive white space (where are they?) Indicate if there are areas of active and passive white space (where are they?) Indicate whether the design is appropriate for the content. Indicate whether the design is appropriate for the content. Submit your results. Submit your results.

Design for the Screen

18Principles of Web Design, Third Edition Design for the Screen The computer display is very different from print- based media The computer display is very different from print- based media The display is landscape-oriented The display is landscape-oriented Colors and contrasts are different Colors and contrasts are different Avoid light text on a light background and dark text on a dark background Avoid light text on a light background and dark text on a dark background Computer displays are low-resolution devices Computer displays are low-resolution devices Certain fonts are hard to read Certain fonts are hard to read Reformat paper documents for online display Reformat paper documents for online display e.g. Times New Roman font, designed for print, is hard to read online e.g. Times New Roman font, designed for print, is hard to read online

19Principles of Web Design, Third Edition Summary Design specifically for the computer medium, considering how the page layout, fonts, and colors you use appear on the screen. Design specifically for the computer medium, considering how the page layout, fonts, and colors you use appear on the screen. Craft an appropriate look and feel and stick with it throughout your site. Craft an appropriate look and feel and stick with it throughout your site. Test and revise your interface by paying close attention to the demands of online display. Make your design portable by testing it in a variety of browsers, operating systems and computing platforms, and use as low a bandwidth as possible. Test and revise your interface by paying close attention to the demands of online display. Make your design portable by testing it in a variety of browsers, operating systems and computing platforms, and use as low a bandwidth as possible.

20Principles of Web Design, Third Edition Summary Plan for easy access to your information. Provide logical navigation tools, and do not make users click through more than two or three pages before they get what they want. Plan for easy access to your information. Provide logical navigation tools, and do not make users click through more than two or three pages before they get what they want. Design a unified look for your site. Strive for smooth transitions from one page to the next. Create templates for your grid structure and apply them consistently. Design a unified look for your site. Strive for smooth transitions from one page to the next. Create templates for your grid structure and apply them consistently. Use active white space as an integral part of your design. Use text, color, and object placement to guide the user’s eye. Use active white space as an integral part of your design. Use text, color, and object placement to guide the user’s eye.

21Principles of Web Design, Third Edition Summary Know your audience and design pages that suit their needs, interests, and viewing preferences. Know your audience and design pages that suit their needs, interests, and viewing preferences. Leverage the power of hypertext linking. Provide enough links for the users to create their own path through your information. Leverage the power of hypertext linking. Provide enough links for the users to create their own path through your information. Design your text for online display, considering the differences between the screen and the page. Design your text for online display, considering the differences between the screen and the page.