1. Sketching, Prototyping and Testing the Design Toward a Better Design

2. Lecture Concepts Focus on designing a web site Observe and critique existing sites Develop key design concepts and guidelines Provide important details on designing readable text Sketching and prototyping a site design

3. Lecture Objectives Understand how existing sites incorporate key design concepts Learn how to apply guidelines for good site design Learn to use the following tools to create eye appeal: Color Balance Alignment Other tools Become aware of the process of sketching, prototyping and testing your design

4. Sketching, Prototyping and Testing the Design Good 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 Sketch Things to keep in mind when sketching: Display of information Text, images, sound, video, tables and lists Navigation Menus, identification and user control Feedback and interaction Corporate Identity Location and type of text Color, contrast and balance Alignment Scrolling

6. Creating a Sketch Sketching on paper Easiest and most flexible Tough to distribute or duplicate Don’t be afraid to repeat the process 8-1/2 x 11 inch piece of paper Turn it to landscape Mark off a rectangle 10.1” by 5.6” Begin adding elements Logos Menus Titles Frames Graphics Columns of text Images Videos Navigation aids

7. Sketching Tools to use Adobe Photoshop Adobe Illustrator Microsoft Word Callouts You may want to add callouts (little boxes which provide more information) The callouts could detail things like: Font style and size Images (location, specific name)

8. Sample Sketch/Layout This sketch was created using Photoshop Note the callouts/descriptions

9. Testing the Sketch Web designers don’t work alone. Generally there are review teams And, review steps

10. Testing the Sketch Identify the reviewers Include at least one trusted colleague One person from the client One member of the target audience This one is the most important

11. Testing the Sketch Explain the purpose of the site. Reviewers should know the purpose and audience Copy or summary of the statement of purpose should be available to the reviewers

12. Testing the Sketch Create a package containing: The explanation of purpose The audience definition Sketches of the pages (with and without callouts) Include a list of questions to guide the feedback Questions should be specific, but open-ended Did you like the sketch? Poor question Better 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 Sketch Make it easy to respond. Reviewers are doing you a favor – make their task as easy as possible. Use an online-survey tool Post an online form Mail a review form along with a stamped, return envelope Have them call you with feedback

14. Testing the Sketch Deliver the package to the reviewers Either e-mail or snail mail all the forms and sketches Thank the reviewers. Even if they hate your site – thank them for their time and suggestions

15. Testing the Sketch Read and consider all suggestions! No matter how practical or ridiculous You don’t have to follow the suggestions Consider them – they may be valuable Follow the suggestions that improve the site

16. Testing the Sketch Revise the sketch Make a new sketch, incorporating the changes from the reviewers Modify callouts with new information Don’t be afraid to make major changes in the site

17. Testing the Sketch Test 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. Prototyping Design Prototype Pixel-by-pixel model of the page Designed on the computer; displayed in its published form A Excellent way to test concept Don’t be pressured to turn prototype into final product!

19. Prototyping Tools WYSIWYG (What you See is What you Get) Dreamweaver Photoshop Illustrator Flash Code HTML XML ASP.Net CSS

20. Prototyping Creating and Testing a Prototype Use your final approved sketch/sketches Use your design tool to replicate the sketch/sketches Design graphics Type/write text Menus Titles Footers Each prototype page should be complete

21. Prototyping Test the prototype View it Click on the links Ask questions! Questions: Display of information Describe the readability of the text. How clear and useful are the images? How well could you find information in the lists and tables?

22. Prototyping Questions: Navigation through the site Is 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 finding Are all your menu choices evident on this page? Where would you click to search and find other items on this site?

23. Prototyping Questions: Communicating the organization’s identity Who 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. Prototyping Questions: Design issues What 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 issues What other changes do you recommend? Why?

25. Resources Web Content Accessibility Guidelines: http://www.w3.org/TR/WAI-WEBCONTENT/ What makes a great web site? http://www.webreference.com/greatsite.html Art and the Zen of Web Siteshttp://www.tlc-systems.com/webtips.shtml