• Save
Week 5 - Sketching And Prototyping - 4
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,299
On Slideshare
1,299
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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