Sketching, Prototyping and Testing the Design<br />Toward a Better Design<br />
Lecture Concepts<br />Focus on designing a web site<br />Observe and critique existing sites<br />Develop key design conce...
Lecture Objectives<br />Understand how existing sites incorporate key design concepts<br />Learn how to apply guidelines f...
Sketching, Prototyping and Testing the Design<br />Good design doesn’t just “happen.”<br />Take time to SKETCH!<br />Try d...
Creating a Sketch<br />Things to keep in mind when sketching:<br />Display of information <br />Text, images, sound, video...
Creating a Sketch<br />Sketching on paper<br />Easiest and most flexible<br />Tough to distribute or duplicate<br />Don’t ...
Sketching<br />Tools to use<br />Adobe Photoshop<br />Adobe Illustrator<br />Microsoft Word<br />Callouts<br />You may wan...
Sample Sketch/Layout<br />This sketch was created using Photoshop<br />Note the callouts/descriptions<br />
Testing the Sketch<br />Web designers don’t work alone.<br />Generally there are review teams<br />And, review steps<br />
Testing the Sketch<br />Identify the reviewers<br />Include at least one trusted colleague<br />One person from the client...
Testing the Sketch<br />Explain the purpose of the site.<br />Reviewers should know the purpose and audience<br />Copy or ...
Testing the Sketch<br />Create  a package containing:<br />The explanation of purpose<br />The audience definition<br />Sk...
Testing the Sketch<br />Make it easy to respond.<br />Reviewers are doing you a favor – make their task as easy as possibl...
Testing the Sketch<br />Deliver the package to the reviewers<br />Either e-mail or snail mail all the forms and sketches<b...
Testing the Sketch<br />Read and consider all suggestions!<br />No matter how practical or ridiculous<br />You don’t have ...
Testing the Sketch<br />Revise the sketch<br />Make a new sketch, incorporating  the changes from the reviewers<br />Modif...
Testing the Sketch<br />Test again, if necessary.<br />If the review process brought about radical changes, send it back t...
Prototyping<br />Design Prototype<br />Pixel-by-pixel model of the page<br />Designed on the computer; displayed in its pu...
Prototyping<br />Tools<br />WYSIWYG (What you See is What you Get)<br />Dreamweaver<br />Photoshop<br />Illustrator<br />F...
Prototyping<br />Creating and Testing a Prototype<br />Use your final approved sketch/sketches<br />Use your design tool t...
Prototyping<br />Test the prototype<br />View it<br />Click on the links<br />Ask questions!<br />Questions:  Display of i...
Prototyping<br />Questions:  Navigation through the site<br />Is it clear whose site you’re looking at?<br />Can you figur...
Prototyping<br />Questions:  Communicating the organization’s identity<br />Who do you think sponsors this site?<br />How ...
Prototyping<br />Questions:  Design issues<br />What seems to be missing from this page?<br />What could be eliminated?<br...
Resources<br />Web Content Accessibility Guidelines: http://www.w3.org/TR/WAI-WEBCONTENT/<br />What makes a great web site...
Upcoming SlideShare
Loading in...5
×

Week 5 - Sketching And Prototyping - 4

984

Published on

Published in: Education, Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
984
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Week 5 - Sketching And Prototyping - 4

  1. 1. Sketching, Prototyping and Testing the Design<br />Toward a Better Design<br />
  2. 2. Lecture Concepts<br />Focus on designing a web site<br />Observe and critique existing sites<br />Develop key design concepts and guidelines<br />Provide important details on designing readable text<br />Sketching and prototyping a site design<br />
  3. 3. Lecture Objectives<br />Understand how existing sites incorporate key design concepts<br />Learn how to apply guidelines for good site design<br />Learn to use the following tools to create eye appeal:<br />Color<br />Balance<br />Alignment<br />Other tools<br />Become aware of the process of sketching, prototyping and testing your design<br />
  4. 4. Sketching, Prototyping and Testing the Design<br />Good design doesn’t just “happen.”<br />Take time to SKETCH!<br />Try different layouts and designs.<br />Think about everything that needs to be included.<br />The client may never see them all, but you should probably give them a couple of options!<br />
  5. 5. Creating a Sketch<br />Things to keep in mind when sketching:<br />Display of information <br />Text, images, sound, video, tables and lists<br />Navigation<br />Menus, identification and user control<br />Feedback and interaction<br />Corporate Identity<br />Location and type of text<br />Color, contrast and balance<br />Alignment<br />Scrolling<br />
  6. 6. Creating a Sketch<br />Sketching on paper<br />Easiest and most flexible<br />Tough to distribute or duplicate<br />Don’t be afraid to repeat the process<br />8-1/2 x 11 inch piece of paper <br />Turn it to landscape<br />Mark off a rectangle 10.1” by 5.6”<br />Begin adding elements<br />Logos <br />Menus<br />Titles<br />Frames<br />Graphics <br />Columns of text<br />Images<br />Videos<br />Navigation aids<br />
  7. 7. Sketching<br />Tools to use<br />Adobe Photoshop<br />Adobe Illustrator<br />Microsoft Word<br />Callouts<br />You may want to add callouts (little boxes which provide more information)<br />The callouts could detail things like:<br />Font style and size<br />Images (location, specific name)<br />
  8. 8. Sample Sketch/Layout<br />This sketch was created using Photoshop<br />Note the callouts/descriptions<br />
  9. 9. Testing the Sketch<br />Web designers don’t work alone.<br />Generally there are review teams<br />And, review steps<br />
  10. 10. Testing the Sketch<br />Identify the reviewers<br />Include at least one trusted colleague<br />One person from the client<br />One member of the target audience<br />This one is the most important<br />
  11. 11. Testing the Sketch<br />Explain the purpose of the site.<br />Reviewers should know the purpose and audience<br />Copy or summary of the statement of purpose should be available to the reviewers<br />
  12. 12. Testing the Sketch<br />Create a package containing:<br />The explanation of purpose<br />The audience definition<br />Sketches of the pages (with and without callouts)<br />Include a list of questions to guide the feedback<br />Questions should be specific, but open-ended<br />Did you like the sketch? Poor question<br />Better questions:<br />How does the color scheme fit with the XYZ company’s image?<br />What might be added to this page to make it easier to navigate?<br />
  13. 13. Testing the Sketch<br />Make it easy to respond.<br />Reviewers are doing you a favor – make their task as easy as possible.<br />Use an online-survey tool<br />Post an online form<br />Mail a review form along with a stamped, return envelope<br />Have them call you with feedback<br />
  14. 14. Testing the Sketch<br />Deliver the package to the reviewers<br />Either e-mail or snail mail all the forms and sketches<br />Thank the reviewers.<br />Even if they hate your site – thank them for their time and suggestions<br />
  15. 15. Testing the Sketch<br />Read and consider all suggestions!<br />No matter how practical or ridiculous<br />You don’t have to follow the suggestions<br />Consider them – they may be valuable<br />Follow the suggestions that improve the site<br />
  16. 16. Testing the Sketch<br />Revise the sketch<br />Make a new sketch, incorporating the changes from the reviewers<br />Modify callouts with new information<br />Don’t be afraid to make major changes in the site<br />
  17. 17. Testing the Sketch<br />Test again, if necessary.<br />If the review process brought about radical changes, send it back to the review committee.<br />Ask more questions!<br />If no review, let the reviewers know the changes.<br />Now, it’s time to prototype the site!<br />
  18. 18. Prototyping<br />Design Prototype<br />Pixel-by-pixel model of the page<br />Designed on the computer; displayed in its published form<br />A Excellent way to test concept<br />Don’t be pressured to turn prototype into final product!<br />
  19. 19. Prototyping<br />Tools<br />WYSIWYG (What you See is What you Get)<br />Dreamweaver<br />Photoshop<br />Illustrator<br />Flash<br />Code<br />HTML<br />XML<br />ASP.Net<br />CSS<br />
  20. 20. Prototyping<br />Creating and Testing a Prototype<br />Use your final approved sketch/sketches<br />Use your design tool to replicate the sketch/sketches<br />Design graphics<br />Type/write text<br />Menus<br />Titles<br />Footers <br />Each prototype page should be complete<br />
  21. 21. Prototyping<br />Test the prototype<br />View it<br />Click on the links<br />Ask questions!<br />Questions: Display of information<br />Describe the readability of the text. <br />How clear and useful are the images?<br />How well could you find information in the lists and tables?<br />
  22. 22. Prototyping<br />Questions: Navigation through the site<br />Is it clear whose site you’re looking at?<br />Can you figure out where you are in the site?<br />Do you know what else is available at this site?<br />Is it clear where you should go next?<br />Questions: Choosing and finding<br />Are all your menu choices evident on this page?<br />Where would you click to search and find other items on this site?<br />
  23. 23. Prototyping<br />Questions: Communicating the organization’s identity<br />Who do you think sponsors this site?<br />How does this page use color?<br />Is the type readable and pleasing?<br />How is the company logo displayed?<br />What design features did you notice?<br />
  24. 24. Prototyping<br />Questions: Design issues<br />What seems to be missing from this page?<br />What could be eliminated?<br />On a continuum from simple to cluttered, where would this page fall?<br />What did you notice first on this page?<br />Questions: Other issues<br />What other changes do you recommend?<br />Why?<br />
  25. 25. Resources<br />Web Content Accessibility Guidelines: http://www.w3.org/TR/WAI-WEBCONTENT/<br />What makes a great web site? http://www.webreference.com/greatsite.html<br />Art and the Zen of Web Siteshttp://www.tlc-systems.com/webtips.shtml<br />

×