Week 5 - Sketching And Prototyping - 4
2 likes825 views
This document discusses the process of sketching, prototyping, and testing a web design. It emphasizes sketching multiple design concepts, gathering feedback on sketches from reviewers, revising sketches based on feedback, using tools to prototype finalized sketches, testing prototypes, and further revising based on prototype testing before finalizing a design. The goal is to create an effective, readable design that meets users' needs through an iterative design, feedback, and testing process.
Week 5 - Sketching And Prototyping - 4
- 1. Sketching, Prototyping and Testing the DesignToward a Better Design
- 2. Lecture ConceptsFocus on designing a web siteObserve and critique existing sitesDevelop key design concepts and guidelinesProvide important details on designing readable textSketching and prototyping a site design
- 3. Lecture ObjectivesUnderstand how existing sites incorporate key design conceptsLearn how to apply guidelines for good site designLearn to use the following tools to create eye appeal:ColorBalanceAlignmentOther toolsBecome aware of the process of sketching, prototyping and testing your design
- 4. Sketching, Prototyping and Testing the DesignGood design doesn’t just “happen.”Take time to SKETCH!Try different layouts and designs.Think about everything that needs to be included.The client may never see them all, but you should probably give them a couple of options!
- 5. Creating a SketchThings to keep in mind when sketching:Display of information Text, images, sound, video, tables and listsNavigationMenus, identification and user controlFeedback and interactionCorporate IdentityLocation and type of textColor, contrast and balanceAlignmentScrolling
- 6. Creating a SketchSketching on paperEasiest and most flexibleTough to distribute or duplicateDon’t be afraid to repeat the process8-1/2 x 11 inch piece of paper Turn it to landscapeMark off a rectangle 10.1” by 5.6”Begin adding elementsLogos MenusTitlesFramesGraphics Columns of textImagesVideosNavigation aids
- 7. SketchingTools to useAdobe PhotoshopAdobe IllustratorMicrosoft WordCalloutsYou may want to add callouts (little boxes which provide more information)The callouts could detail things like:Font style and sizeImages (location, specific name)
- 8. Sample Sketch/LayoutThis sketch was created using PhotoshopNote the callouts/descriptions
- 9. Testing the SketchWeb designers don’t work alone.Generally there are review teamsAnd, review steps
- 10. Testing the SketchIdentify the reviewersInclude at least one trusted colleagueOne person from the clientOne member of the target audienceThis one is the most important
- 11. Testing the SketchExplain the purpose of the site.Reviewers should know the purpose and audienceCopy or summary of the statement of purpose should be available to the reviewers
- 12. Testing the SketchCreate a package containing:The explanation of purposeThe audience definitionSketches of the pages (with and without callouts)Include a list of questions to guide the feedbackQuestions should be specific, but open-endedDid you like the sketch? Poor questionBetter questions:How does the color scheme fit with the XYZ company’s image?What might be added to this page to make it easier to navigate?
- 13. Testing the SketchMake it easy to respond.Reviewers are doing you a favor – make their task as easy as possible.Use an online-survey toolPost an online formMail a review form along with a stamped, return envelopeHave them call you with feedback
- 14. Testing the SketchDeliver the package to the reviewersEither e-mail or snail mail all the forms and sketchesThank the reviewers.Even if they hate your site – thank them for their time and suggestions
- 15. Testing the SketchRead and consider all suggestions!No matter how practical or ridiculousYou don’t have to follow the suggestionsConsider them – they may be valuableFollow the suggestions that improve the site
- 16. Testing the SketchRevise the sketchMake a new sketch, incorporating the changes from the reviewersModify callouts with new informationDon’t be afraid to make major changes in the site
- 17. Testing the SketchTest again, if necessary.If the review process brought about radical changes, send it back to the review committee.Ask more questions!If no review, let the reviewers know the changes.Now, it’s time to prototype the site!
- 18. PrototypingDesign PrototypePixel-by-pixel model of the pageDesigned on the computer; displayed in its published formA Excellent way to test conceptDon’t be pressured to turn prototype into final product!
- 19. PrototypingToolsWYSIWYG (What you See is What you Get)DreamweaverPhotoshopIllustratorFlashCodeHTMLXMLASP.NetCSS
- 20. PrototypingCreating and Testing a PrototypeUse your final approved sketch/sketchesUse your design tool to replicate the sketch/sketchesDesign graphicsType/write textMenusTitlesFooters Each prototype page should be complete
- 21. PrototypingTest the prototypeView itClick on the linksAsk questions!Questions: Display of informationDescribe the readability of the text. How clear and useful are the images?How well could you find information in the lists and tables?
- 22. PrototypingQuestions: Navigation through the siteIs it clear whose site you’re looking at?Can you figure out where you are in the site?Do you know what else is available at this site?Is it clear where you should go next?Questions: Choosing and findingAre all your menu choices evident on this page?Where would you click to search and find other items on this site?
- 23. PrototypingQuestions: Communicating the organization’s identityWho do you think sponsors this site?How does this page use color?Is the type readable and pleasing?How is the company logo displayed?What design features did you notice?
- 24. PrototypingQuestions: Design issuesWhat seems to be missing from this page?What could be eliminated?On a continuum from simple to cluttered, where would this page fall?What did you notice first on this page?Questions: Other issuesWhat other changes do you recommend?Why?
- 25. ResourcesWeb Content Accessibility Guidelines: http://www.w3.org/TR/WAI-WEBCONTENT/What makes a great web site? http://www.webreference.com/greatsite.htmlArt and the Zen of Web Siteshttp://www.tlc-systems.com/webtips.shtml