Enhancing website prototype readability a short tutorial for  IA/User Experience Designers Wojtek Chojnacki
Basic assumptions for mockups <ul><li>Schematic representation of web page layout and content structure </li></ul><ul><li>...
Example:  Hotel availability&rates page <ul><li>The page  informs about : </li></ul><ul><ul><li>hotel name, rating and bri...
This is where we start <ul><li>Not really readable and lucid </li></ul>
This is where we start <ul><li>Example:  Hotel availability&rates page </li></ul>Not really readable and lucid
Step 1. Underline links
Step 1. Underline links <ul><li>Page functionality becomes more visible </li></ul>
Step 2. Use font formatting
Step 2. Use font formatting <ul><li>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 <ul><li>Even if they will be out for the final design, they facilitate understandi...
Step 4. Get rid of  ‘Lorem ipsum’
Step 4. Get rid of  ‘Lorem ipsum’ <ul><li>Use dummy text or generic data </li></ul>
Step 5. Be precise about form elements and buttons
Step 5. Be precise about form elements and buttons <ul><li>It is not for the graphic designer to decide on those! </li></ul>
Good luck Wojtek Chojnacki [email_address]
Upcoming SlideShare
Loading in …5
×

Enhancing Website Prototypes Readability

1,523 views
1,494 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
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,523
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
30
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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]

×