10 Design & Layout Principles Guaranteed To Improve

21,078 views

Published on

10 basic layout and design principles that every web designer should be aware of. Improve scan-ability, accessibility, readability and conversions.

Published in: Technology, Design
2 Comments
21 Likes
Statistics
Notes
No Downloads
Views
Total views
21,078
On SlideShare
0
From Embeds
0
Number of Embeds
1,594
Actions
Shares
0
Downloads
746
Comments
2
Likes
21
Embeds 0
No embeds

No notes for slide

10 Design & Layout Principles Guaranteed To Improve

  1. 1. 10 Design & Layout Principles Guaranteed to Improve Your Website<br />Lauren Martin www.sitemotif.com<br />
  2. 2. Get your visitors attention on your website’s goal.<br />1. Visual Call to Action<br />
  3. 3. Visual Call to Action<br />One primary action you want your visitors to take.<br />Use contrast and size to catch attention.<br />The action text should be clear and obvious.<br />Located near the top of page above the fold.<br />
  4. 4. Below fold, hard to read, unclear action.<br />Page Fold<br />
  5. 5. “Click to Play!” doesn’t have nearly as much contrast as the 5 other buttons lower on the screen which compete for your attention.<br />
  6. 6.
  7. 7.
  8. 8.
  9. 9. Importance based structure and scan-ability.<br />2. Organized Layout<br />
  10. 10. Organized Layout<br />Convey information about what’s important.<br />Lead the user into content there looking for.<br />Improves scan-ability.<br />Use header tags (h1, h2, h3, etc…) appropriately.<br />Provides visual breaks, groups, and chunks.<br />Use alignment, date, subject, etc to create sections.<br />Size and color to convey priority and importance.<br />
  11. 11. Nothing really stands out, the section headers are hard to read and fade into the background, most of the text is the same size, I’m not sure where to look.<br />
  12. 12.
  13. 13.
  14. 14. 508 Compliance = websites should work for everyone, that includes people with disabilities.<br />3. Accessibility<br />
  15. 15. Accessibility<br />Use ALT tags on images for screen readers<br />Ensure HTML is ordered by hierarchy.<br />Improve readability for those with low-vision through size and contrast<br />Options to increase font size<br />Avoid pop-ups<br />Use proper input-field/labeling <br />Don’t use color as a sole indicator for differentiation<br />Design for smaller screen sizes, then scale.<br />
  16. 16. Small, light blue text, on a lighter blue background. Very hard to read.<br />
  17. 17. Extremely small and hard to read. The text bar also only appears when you over the area, so the page appears empty otherwise.<br />
  18. 18. Indicate where you can take an action.<br />4. Affordances<br />
  19. 19. Affordances<br />Links should not be the same color as your text<br />Buttons should appear beveled or have a hover to differentiate them from plain graphics.<br />Form items should be grayed out if they are not clickable.<br />Mouse icon should change to indicate when something is clickable.<br />Textures and patterns can imply grips when things can be dragged.<br />
  20. 20. The only reason I even thought to see if “CONTACT ME” was a button, is because the text was a verb. There is no hover effect either.<br />
  21. 21. While the yellow chalk arrows appear to be part of the background, they are actually the only way to interact with this gallery.<br />
  22. 22. Which things are clickable? I’ll give you a hint… “Featured Work” is not a button, and “Web Design” is not a link.<br />
  23. 23.
  24. 24. Don’t leave me hanging, give me some help.<br />5. Assistance<br />
  25. 25. Assistance<br />Provide an FAQ or help section<br />Try to avoid allowing errors, but when they occur explain:<br />What’s wrong<br />What you need from the user<br />How they need to do it<br />Instructions should be clear, specific and to the point.<br />Provide good defaults and constant feedback.<br />
  26. 26.
  27. 27. We throw things away in the trash, we do not re-allocate disk space.<br />6. Real-World Mental Model<br />
  28. 28. Real-World Mental Model <br />Avoid fancy, industry, or techie terms. Use Layman’s terms.<br />When you buy things in a store you put them in a cart, use a “cart” icon to represent selected items for purchase.<br />Design concepts to be consistent with how they work in everyday life.<br />Similar in functionality, language and appearance.<br />
  29. 29.
  30. 30. The simplest explanation or strategy tends to be the best one – Occam’s Razor<br />7. Keep it Simple<br />
  31. 31. Keep it Simple<br />80/20 Rule<br />Avoid excessive text or explanation<br />Forms shouldn’t ask for unnecessaryadditional information.<br />Reduce clutter, and appreciate white space like a pause in a sentence.<br />Be upfront, clear, and to the point. The rest is unnecessary.<br />Focus on the core goals and tasks.<br />
  32. 32. I’m not sure where to look, how to interact with it, or what it’s for. So… <br />I left (as soon as I took this screen shot)<br />
  33. 33. There is simply WAY too much text on this page.<br />
  34. 34.
  35. 35.
  36. 36. We tend to look at smiling faces, and products. Our eyes seem to jump over the rest resulting in just more stuff on the page we have to get past.<br />8. Suitable Graphics<br />
  37. 37. Suitable Graphics<br />Put thought into your graphics. <br />Stick to a color scheme.<br />Avoid overly generic clip art just to add to the page.<br />Every image and graphic should have a specific purpose.<br />Stick to a theme or consistency in appearance. (all sketchy, or all photos etc)<br />Focus on your product or offering.<br />
  38. 38. There is no connection with this background graphic and the content, not to mention it kills the readability of the page.<br />
  39. 39.
  40. 40.
  41. 41. Where am I? Where can I go?<br />9. Navigation<br />
  42. 42. Navigation<br />Take advantage of standards, and place the navigation near the top, or down the left side.<br />Clean, clear, simple labels, easy to read and see.<br />Highlight the visitors current location vs. other locations.<br />Provide feedback when in sub-levels as to the visitors location and how to get back.<br />Should be easy to see how much information the site offers, how deep each level is.<br />
  43. 43. See if you can find the navigation…<br />
  44. 44. Aside from the fact that I had to scroll forever, you can’t tell what’s clickable or where you can go. Is there only a home page?<br />…After much further investigation, I found there is more content…<br />Page Fold<br />Page Fold<br />Page Fold<br />Page Fold<br />
  45. 45.
  46. 46.
  47. 47.
  48. 48. There’s just something fun about this.<br />10. Delight<br />
  49. 49. Delight<br />Once you have everything else figured out, add a smile.<br />Niceties that are un-expected, a cute line of text, a compliment when a photo is uploaded, etc.<br />Little fun interactions used sparingly.<br />Take the user away from the mundane. <br />Pleasant surprises.<br />

×