Presentation on theme: "Principles of Web Design 5th Edition"— Presentation transcript:
1Principles of Web Design 5th Edition Chapter TwoWeb Site Design Principles
2Principles of Web Design 5th Ed. ObjectivesIn 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 accessibilityPrinciples of Web Design 5th Ed.
4Understanding the Web Design Environment External factors that affect Web designMany variables affect how Web pages appearNew screen resolutionsWide-screen formatsNew devicesYour designs must be portable and accessiblePrinciples of Web Design 5th Ed.
5Understanding the Web Design Environment Code to standardsTest for compatibilityView in multiple browsersTest on available operating systemsTest on different devicesPrinciples of Web Design 5th Ed.
6Browser Compatibility Issues Designing for multiple browsers is a challengeTest your work in as many browsers as possibleTest with both older browsers and new browsersTry to minimize differences across browsersNewer browsers have better adherence to Web standardsPrinciples of Web Design 5th Ed.
7Browser Compatibility Issues Follow these guidelines:Follow W3C standardsValidate your codeKnow your audienceTest your work in multiple browsers and devicesPrinciples of Web Design 5th Ed.
8Connection Speed Differences Bandwidth has always been a challenge for Web designersUsers do not like waiting for contentIn the US, broadband access has increasedBroadband access is not universal around the worldPlan your pages for a variety of connection speedsTest your pages at different connection speedsPrinciples of Web Design 5th Ed.
10Browser Cache and Download Time Web pages are stored on computers called Web serversWeb addresses connect to a specific Web serverThe server serves up the file for downloadAll text and images are downloadedOn return visits, your computer loads the files locally unless content has changedLocal files are stored in the browser cacheTake advantage of the cache by reusing graphicsPrinciples of Web Design 5th Ed.
11Device and Operating System Issues Users’ computers vary widely in equipment and designThis is a design variable you cannot controlTest your content on as many system types as possibleKeep the following in mind:Monitors and display softwareBrowser versionsFont choicesPrinciples of Web Design 5th Ed.
13Designing for Multiple Screen Resolutions Screen resolution is the width and height of the computer screen in pixelsMost monitors have many screen resolutions to choose fromThis is a variable you cannot controlThe current most common resolutions are 1024 x 768 and 1280 x 1024Wide-screen resolutions such as 1366 x 768 and 1200 x 800 are popular as wellPrinciples of Web Design 5th Ed.
15Principles of Web Design 5th Ed. Wide-Screen DisplaysThe new wide-screen monitors have changed the page designFixed layouts have become more popularFlexible layouts have to account for expanded horizontal layout spacePrinciples of Web Design 5th Ed.
18Principles of Web Design 5th Ed. Handheld DevicesMany users now have handheld devices for Web browsingMust test on these devices as wellDesigning for handheld devices has many challengesMany Web sites now offer content designed for handheldsCSS Media Queries let you specify style rules for different device typesPrinciples of Web Design 5th Ed.
19Principles of Web Design 5th Ed. Flexible Page LayoutsAdapt to different screen resolutionsWork especially well for text-based contentCan pose a variety of design challengesThe design must account for the movement of elements on the screen at different resolutionsAt high resolutions, your content can break apartPrinciples of Web Design 5th Ed.
26Fixed-Width Page Layouts Allows Web pages to be designed like print pagesHave consistent width and heightDesigned to center in the browser window regardless of screen resolutionEasier to design than flexible layoutsPrinciples of Web Design 5th Ed.
28Suggestions for Solving the Screen Resolution Dilemma Flexible designs:User controls the view of the contentLess chance of horizontal scrollingMore flexibility for multiple devicesBetter suited to text-based layouts and simpler designsFixed-width designs:Designer controls the view of the contentAllow more complex page layoutsMore control over text lengthPrinciples of Web Design 5th Ed.
30Balance Design and Content Access to your content and user needs should guide your designMany sites have unnecessary design elementsThese factors can distract the userA Web site’s design should complement the content and support the readerAlways choose simple and direct designs that showcase content and allow easy accessPrinciples of Web Design 5th Ed.
31Plan for Easy Access to Your Information Information design is the most important factor in the success of your siteDetermines how users access contentOrganize your contentPresented as a navigable set of informationProvide navigation choices to the userUsers may browse or look for specific informationAnticipate and plan for user actionsProvide direct links to your most popular pagesPrinciples of Web Design 5th Ed.
32Plan for Easy Presentation of Your Information Design information to be easy to read and legibleBreak text into reasonable segmentsProvide contrasting colors that are easy on the eyeUse plenty of white spaceReaders have different online reading habitsInclude plenty of headingsControl the width of your textPrinciples of Web Design 5th Ed.
34Creating 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 spacePrinciples of Web Design 5th Ed.
35Plan 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 sitePrinciples of Web Design 5th Ed.
38Use 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 elementsPrinciples of Web Design 5th Ed.
40Principles of Web Design 5th Ed. Use Active White SpaceWhite spaces are the blank areas of the pageUse 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 organizationPrinciples of Web Design 5th Ed.
43Principles of Web Design 5th Ed. 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?Principles of Web Design 5th Ed.
44Design 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 typePrinciples of Web Design 5th Ed.
47Principles of Web Design 5th Ed. Design for LocationThe user can traverse a page in a variety of waysConsider the different ways your user could be viewing your Web pagesPrinciples of Web Design 5th Ed.
51Principles of Web Design 5th Ed. 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 locationsPrinciples of Web Design 5th Ed.
53Principles of Web Design 5th Ed. 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 mapPrinciples of Web Design 5th Ed.
54Use 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 optionsPrinciples of Web Design 5th Ed.
55How 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 cuesPrinciples of Web Design 5th Ed.
56Reformat Content for Online Presentation Cannot post print documents directly onlineText length, font, and content length do not transfer wellRe-design paper content for online displayPrinciples of Web Design 5th Ed.
57Designing 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 atPrinciples of Web Design 5th Ed.
58Designing for Accessibility Principles of Web Design 5th Ed. 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 technologiesPrinciples of Web Design 5th Ed.
60Principles of Web Design 5th Ed. SummaryCraft an appropriate look and feelMake a design portablePlan 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 startPrinciples of Web Design 5th Ed.