Website Planning and Design Objectives Plan and design a successful website Use web design principles and tools.
<ul><li><p>Website Planning and Design Objectives</p><p>Plan and design a successful websiteUse web design principles and tools</p></li><li><p>Website LifecyclePlanDesignAuthorTestLaunchMaintenance</p></li><li><p>Website LifecyclePlanDesignAuthorTestLaunchMaintenance</p><p>High cost when design errors not identified until later. Cost of fixing mistake found in test phase = 100 x cost if found in planning phase. Design to minimise Maintenance costs</p></li><li><p>Plan, Design and Author StepsPlanEstablish site purpose & goalsAnalyse target audience(s)DesignContent StructureNavigationVisual design & layout Author PrototypeBuild prototypeTest prototype</p></li><li><p>PlanIdentify purpose and goals? suggestions</p></li><li><p>PlanIdentify purpose and goalsTrainingInformationTeachingEducationReferenceEntertainmentSales ..</p></li><li><p>Plan Analyse Target AudienceWho are your target audiences and what do they need? Consider:Ranges of skills/interestsAgeNetwork speedAvailable hardware/ softwareInformation needs(ref: Target Audience Checklist)</p></li><li><p>PlanUser-Centered DesignThe goal is to provide for the needs of allof your potential users, adapting Webtechnology to their expectations, andnever requiring the reader to simplyconform to an interface that putsunnecessary obstacles in their paths-Yale Style Guide</p></li><li><p>DesignContentThe heart of a web site is the content When choosing content:only what the audience needs group logically for the audience break text into manageable chunks (chunking) use listsmany headings </p></li><li><p>DesignStructureSequence</p><p>Hierarchy</p><p>WebGraphic Credit: Yale Style Guide, http://info.med.yale.edu/caim/manual/contents.html</p></li><li><p>Design ToolSite maphierarchical diagram showing relationships between sections and/or pages</p></li><li><p>Sitemap Available on all pages</p></li><li><p>DesignNavigationNavigation Submenusbuttons, pop-up menus, links, text equivalentswww.johnlewis.co.ukwww.amazon.co.ukwww.ibm.com</p></li><li><p>DesignNavigationClarityvisual clues to inform your user about their location within your web sitebreadcrumbs, consistent page naming, link/non-active link colours on navigation bars provide easy return to the homepageuse navigation bars which are easily understoodprovide overview sitemap</p></li><li><p>DesignCommon Navigation ProblemsAvoid inconsistencyestablish a visual hierarchyput navigation elements in consistent positionAvoid dead-end (orphan) pages (no link to other website pages) primary/secondary navigation barslinkstake opportunity to draw users into other sections</p></li><li><p>DesignVisual design and page layoutsome design conventions exist for placement of elementsnavigation top and left of page (with text links repeated at bottom)header and footer linkslogo top left or centre (maybe link to home page)</p></li><li><p>DesignVisual design and page layoutAnalyse page design gridsRecommended reading Yale Style Guide: http://info.med.yale.edu/caim/manual/contents.</p></li><li><p>DesignVisual design and page layoutshort web pageshome pagesdocuments to be browsed or read on-linepages with large imageslong web pageseasier to maintaineasier to download or printsimilar to paper structure</p></li><li><p>DesignVisual design and page layout3 layout techniquesstylesheetsframes (out of date)tables (XHTML only permitted for data not layout)2 page width optionsfixed widthvariable width fluid layout *</p></li><li><p>DesignImagesAcceptable usenot distractingnot gratuitousimages provide informationimages complement/relate to contentimages provide brand identityno text in image (avoid accessibility/localisation problems)Speed issues - download & renderConsistency</p></li><li><p>DesignImagesGraphic file types: JPEG, GIF, PNGAdvantages of GIFAll graphic web viewers support GIFsGIF supports transparency and interlacingAdvantages of JPEGFaster to download due to compressionSupports full-colour images (24-bit true colour)Advantages of PNGNo royalty due to UnisysIncreasingly popular particularly with open source</p></li><li><p>DesignColourChoose high contrast text/background coloursKeep colours to a minimumUse colour to unify elementsUse white space to separate elementsSymbolism in colourGlobal audiences and colourDisability and colour (10% of men are red/green colour blind)</p></li><li><p>DesignTypography - content Style for online documentsBe concise and consistentUse lists where possibleMake printing easy</p></li><li><p>DesignTypography - legibilityLine length optimal for print is 30-40 chars line across web page is too longIncrease line spacing by 25-50%Limit no of fonts used per pageDesign for browser independent use of fonts Readability of centred text is 60% worse than left justified so avoid centeringJustified text less legible on screen so avoidCAPITALS ARE HARDER TO READ SO AVOID</p></li><li><p>DesignTypography cross-platformDifferent sizes of standard fontsleft column is PCright column is MacWin fonts appear 1-2 pt large than MacUse font family not just single font</p></li><li><p>DesignPage Layout content should dominate (50-80%) important info above the fold place common page elements according to user expectations and conventions</p></li><li><p>DesignPage LayoutSimplify and be consistentpages (or sections) share the same basic layoutthemeseditorial conventionshierarchies of organisation</p></li><li><p>DesignPage LayoutSimplify and be consistentHeadersImage/LogoNavigational LinksFootersOrigin of pageAge of pageAddresshttp://www.redenvelope.com</p></li><li><p>DesignToolsStoryboard from TV/advertising - diagram often hand-drawn explaining what a page will look like and demonstrating the look and feelSample proformas storyboardproforma.xls</p></li><li><p>AuthoringAuthor and test prototypeImportant to identify design faults before full-scale production</p></li><li><p>AuthoringTest design using prototypeYour aim as a web designer is to make a site accessible toyour target audience(s)widest audience possible</p></li><li><p>Authoring Test design using prototypeUser standardsHTML/XHTML/CSSWeb Content Accessibility GuidelinesValidateHTML http://validator.w3.orgCSS http://jigsaw.w3.org/css-validator/Accessibility http://cast.org/bobby</p></li><li><p>Authoring Test design using prototype Test your prototype indifferent graphical browser types IE, Mozilla Firefox, Netscape, Operadifferent browser versionstext browsers Lynxmultiple platforms Windows, Mac, Unix</p></li><li><p>Web Design ResourcesYale Style Guide http://info.med.yale.edu/caim/manual/contents.htmlWebMonkey http://hotwired.lycos.com/webmonkey/design/site_building/tutorials/tutorial1.htmlBuilder.com http://builder.cnet.com/webbuilding/pages/Graphics/CTips2/ss13.htmlHTML Bad Style Page http://www.webpagesthatsuck.com/Jacob Nielsen - Top Ten Mistakes in Web Design http://www.useit.com/alertbox/9605.htmlWeb Page Design for Designershttp://www.wpdfd.com/index.htmHTML Help http://www.htmlhelp.com/ </p></li><li><p>Web Design ResourcesTesting tools</p><p>W3 HTML Validation http://validator.w3.org/Usability Testing Checklist http://www.bbk.ac.uk/ita/s10/usactivity.docAccessibility - Bobby http://bobby.watchfire.com/bobby/html/en/index.jspText Only - LynxView http://www.delorie.com/web/lynxview.htmlVischeck http://www.vischeck.com/</p></li><li><p>Web Design ToolsTarget audience analysis checklistSite mapStoryboardPrototype</p><p>Internet Communications and WebsitesThis presentation will focus on several areas that are important to consider when starting to design web pages and web sites these are outlined on the slide. </p><p>siteplan.pptInternet Communications and WebsitesThis presentation will focus on several areas that are important to consider when starting to design web pages and web sites these are outlined on the slide. </p><p>siteplan.pptInternet Communications and WebsitesThis presentation will focus on several areas that are important to consider when starting to design web pages and web sites these are outlined on the slide. </p><p>siteplan.pptInternet Communications and WebsitesA web site is generally created for a specific purpose and for a specific audience. The purpose and audience will affect the design of the site. It is important to consider the identity and characteristics of your intended audience, so the design matches the expectations of your users. This includes evaluating the type of hardware and software available to the 'typical' users of your site. For example, if users are likely to be accessing the site via a modem (e.g. distance learning students), they may be unwilling to wait for large images or videos to download. The technical skill levels of your users will determine whether you can include advanced design features and internet technologies on your web site, or whether you make the whole site as straightforward and unchallenging as possible.The content of your web site should be understandable, unambiguous and appropriate to the intended users. This may be influenced by their subject specialism, language or culture e.g. 03/04/99 = 4th March in the USA, but 3rd April in the UK.The first page - the home page - should immediately show what the site is about, what type of information it contains, and how to get to that information. It should also clearly indicate who the site belongs to. At the same time, it should attract the user and motivate him/her to start using the site (and hopefully return to the site on future occasions). The contents of the home page should reflect the key topic categories of the site and should contain links to those categories.siteplan.pptInternet Communications and WebsitesSequencesSequential - The simplest way to organize information is to place it in a sequence. Sequential ordering may be chronological, a logical series of topics progressing from the general to the specific, or alphabetical, as in indexes, encyclopedias, and glossaries. Straight sequences are the most appropriate organization for training sites, for example, in which the reader is expected to go through a fixed set of material and the only links are those that support the linear navigation path.HierarchiesInformation hierarchies are the best way to organize most complex bodies of information. Because Web sites are usually organized around a single home page, hierarchical schemes are particularly suited to Web site organization. Hierarchical diagrams are very familiar in corporate and institutional life, so most users find this structure easy to understand. WebsWeblike organizational structures pose few restrictions on the pattern of information use. In this structure the goal is often to mimic associative thought and the free flow of ideas, allowing users to follow their interests in a unique, heuristic, idiosyncratic pattern. This organizational pattern develops with dense links both to information elsewhere in the site and to information at other sites. Although the goal of this organization is to exploit the Web's power of linkage and association to the fullest, weblike structures can just as easily propagate confusion. Ironically, associative organizational schemes are often the most impractical structure for Web sites because they are so hard for the user to understand and predict. Webs work best for small sites dominated by lists of links and for sites aimed at highly educated or experienced users looking for further education or enrichment and not for a basic understanding of a topic.</p><p>siteplan.pptInternet Communications and Websites3 layout techniques:Stylesheets - technically the right way:separates content from presentationallows content to be accessible on multiple devices and browsershowever: problem with legacy browsers & different browser implementationsFrames - Commonly used for layout, to maintain navigation bar on screen. Often poorly implemented:orphan pages frames too small for content bookmarking problemsexternal link problemsTables- Commonly used for layoutcan slow page downloadoften badly coded (nesting) not accessible to all browserssiteplan.pptInternet Communications and Websitessiteplan.pptInternet Communications and WebsitesW3C HTML Validation Validate your HTML code using the World Wide Web Consortium's Markup Validation Service.http://validator.w3.org/Usability Testing Usability Testing allows you to see your website through the eyes of your users. You can test a prototype of your web site or an already existing web site to see what type of improvements are needed to make the site more effective for your users.http://www.bbk.ac.uk/ita/s10/usability_exercise.pdfAccessibility - Bobby Bobby is a validation tool that will check your HTML code and suggests changes in order for your website to conform to universal accessibility standards.http://bobby.watchfire.com/bobby/html/en/index.jspText Only - LynxView If you do not have lynx (a non-graphical browser) on your server, to test your pages, use this site to produce a document simulating how your page would be viewed in Lynx (a text only browser).http://www.delorie.com/web/lynxview.htmlVischeck Vischeck can show you what your image looks like to people who are colour blind, people with glaucoma or macular degeneration, elders and children. Specifically you can submit a URL and it produces a copy of your site as it would appear to someone with red/green colour blindness.http://www.vischeck.com/</p><p>siteplan.pptInternet Communications and Websitessiteplan.ppt</p></li></ul>