Presentation on theme: "Web Design Principles 5th Edition"— Presentation transcript:
1 Web Design Principles 5th Edition Chapter TwoDesigning the Site
2 Objectives In this chapter, you will learn to: Understand the Web design environmentDesign for multiple screen resolutionsCraft the look and feel of the siteCreate a unified site designDesign for the userDesign for accessibilityWeb Design Principles, 5th Ed.
3 Creating a Unified Site Design Plan the unifying themes and structure for your siteCommunicate a visual theme with your design choicesConsider more than each pagePlan smooth transitionsUse a grid to provide visual structureInclude active white spaceWeb Design Principles, 5th Ed.
4 Plan Smooth Transitions Plan to create a unified lookReinforce identifying elementsConsistency and repetition create smooth transitionsPlace navigation elements in the same position on each pageUse the same navigation graphics throughout the siteWeb Design Principles, 5th Ed.
7 Use a Grid to Provide Visual Structure The structure of a Web page is imposed by the gridThe grid is a conceptual layout deviceThe grid aligns your content into columns and rowsImpose a grid to provide visual consistencyYou can break out of the grid to provide variety and highlight informationThe grid provides page margins and gutters between elementsWeb Design Principles, 5th Ed.
9 Use Active White Space White spaces are the blank areas of the page Use white space deliberatelyGood use of white space guides the readerWhite space that is used deliberately is called active white spacePassive white space is the result of mismatched shapesPlenty of active white space reduces clutter and clarifies organizationWeb Design Principles, 5th Ed.
12 Designing for the UserKeep your design efforts centered solely on your userFind out what users expect from your siteIf you can, survey them with an online formCreate a profile of your average userWhat do users want when they get to your site?Web Design Principles, 5th Ed.
13 Design for Interaction Think about how the user wants to interact with your informationDesign for your content typeDecide whether the user is likely to read or scanDesign pages for reading or scanning based on the content typeWeb Design Principles, 5th Ed.
20 Design for LocationKnow what expectations your user might have about your navigation and contentUsers have come to expect common elements of a Web page in certain locationsWeb Design Principles, 5th Ed.
22 Keep a Flat HierarchyDo not make users navigate through too many layers of informationIncludes section on topic-level navigation pagesCreate content sections organized logically by themeFollow the three clicks ruleUse consistent navigationConsider providing a site mapWeb Design Principles, 5th Ed.
23 Use Hypertext Linking Effectively You determine where users can go on your Web siteLet users move from page to page or section to section as they pleaseUse contextual linkingAvoid the use of “click here”Provide plenty of navigation optionsWeb Design Principles, 5th Ed.
24 How Much Content Is Too Much? Don’t overcrowd your pages with informationBe conscious of the cognitive load of the userCarefully divide content into smaller sectionsPresent content in a structured mannerProvide plenty of navigation cuesWeb Design Principles, 5th Ed.
25 Reformat Content for Online Presentation Cannot post print documents directly onlineText length, font, and content length do not transfer wellRe-design paper content for online displayWeb Design Principles, 5th Ed.
26 Designing for Accessibility Your audience includes users who have physical challengesDesign your pages to be accessible to users with disabilities or technological barriersCommon accessibility features can be unobtrusive additions to your siteDeveloping accessible content naturally leads to creating good designFollow W3 Accessibility Initiative guidelines atWeb Design Principles, 5th Ed.
27 Designing for Accessibility Perceivable — Information and user interface components must be perceivable by usersOperable — User interface components must be operable by usersUnderstandable — Information about the user interface and its operation must be understandable by usersRobust — Content must be robust enough to be interpreted reliably by a wide variety of user agents, including assistive technologiesWeb Design Principles, 5th Ed.
29 Summary Craft an appropriate look and feel Make a design portable Plan for easy access to your informationDesign a unified look for your siteUse active white spaceKnow your audienceLeverage hypertext linkingDesign text for online displayTest your work continually as you buildBuild accessibility from the startWeb Design Principles, 5th Ed.