Enhancing Website Prototypes Readability
Upcoming SlideShare
Loading in...5
×
 

Enhancing Website Prototypes Readability

on

  • 2,401 views

Website mockups are a useful tool for user experience designers. This tutorial covers some methods to make mockups more readable efficient.

Website mockups are a useful tool for user experience designers. This tutorial covers some methods to make mockups more readable efficient.

Statistics

Views

Total Views
2,401
Views on SlideShare
2,400
Embed Views
1

Actions

Likes
3
Downloads
29
Comments
0

1 Embed 1

http://www.slideshare.net 1

Accessibility

Categories

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

Enhancing Website Prototypes Readability Enhancing Website Prototypes Readability Presentation Transcript

  • Enhancing website prototype readability a short tutorial for IA/User Experience Designers Wojtek Chojnacki
  • Basic assumptions for mockups
    • Schematic representation of web page layout and content structure
    • Form follows function
    • Black & white
    • Mockups sum up to a website prototype
  • Example: Hotel availability&rates page
    • The page informs about :
      • hotel name, rating and briefly about its features
      • dates selected by user
      • room types and rates
    • The page allows to :
      • Go to hotel full description
      • Modify availability conditions and apply changes
      • Go to booking process of a chosen room type
  • This is where we start
    • Not really readable and lucid
  • This is where we start
    • Example: Hotel availability&rates page
    Not really readable and lucid
  • Step 1. Underline links
  • Step 1. Underline links
    • Page functionality becomes more visible
  • Step 2. Use font formatting
  • Step 2. Use font formatting
    • Differentiating font size and boldness is an easy way to present information hierarchy
  • Step 3. Use frames to group information
  • Step 3. Use frames to group information
    • Even if they will be out for the final design, they facilitate understanding at this stage
  • Step 4. Get rid of ‘Lorem ipsum’
  • Step 4. Get rid of ‘Lorem ipsum’
    • Use dummy text or generic data
  • Step 5. Be precise about form elements and buttons
  • Step 5. Be precise about form elements and buttons
    • It is not for the graphic designer to decide on those!
  • Good luck Wojtek Chojnacki [email_address]