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

Week 5 - Sketching And Prototyping - 4

on

  • 1,193 views

 

Statistics

Views

Total Views
1,193
Views on SlideShare
1,193
Embed Views
0

Actions

Likes
2
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Week 5 - Sketching And Prototyping - 4 Week 5 - Sketching And Prototyping - 4 Presentation Transcript

    • Sketching, Prototyping and Testing the Design
      Toward a Better Design
    • 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
    • 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
    • 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!
    • 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
    • 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
    • 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)
    • Sample Sketch/Layout
      This sketch was created using Photoshop
      Note the callouts/descriptions
    • Testing the Sketch
      Web designers don’t work alone.
      Generally there are review teams
      And, review steps
    • 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
    • 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
    • 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?
    • 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
    • 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
    • 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
    • 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
    • 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!
    • 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!
    • Prototyping
      Tools
      WYSIWYG (What you See is What you Get)
      Dreamweaver
      Photoshop
      Illustrator
      Flash
      Code
      HTML
      XML
      ASP.Net
      CSS
    • 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
    • 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?
    • 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?
    • 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?
    • 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?
    • 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