Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Enhancing Website Prototypes Readability

1,601 views

Published on

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

Published in: Business, Technology
  • Be the first to comment

Enhancing Website Prototypes Readability

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

×