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.

10 Design and Layout Principles Guaranteed to Improve Your Website V2


Published on

Updated slide deck for the 10 Design and Layout Principles Guaranteed to Improve your Website for a presentation at the New Tech Community.

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

10 Design and Layout Principles Guaranteed to Improve Your Website V2

  1. 1. 10 Design and Layout Principles Guaranteed to Improve Your Website<br />By Lauren Martin<br />
  2. 2. Call to Action: Get attention on your website’s goal.<br />Should tie in with the goal of your website. <br />The number one thing you want your visitors to do.<br />Use contrast and size to catch attention.<br />The action text should be clearand obvious.<br />Located near the top of page above the fold.<br />
  3. 3. cc Thomas Hawk<br />
  4. 4.
  5. 5.
  6. 6.
  7. 7.
  8. 8.
  9. 9. Layout: Importance based structure and scan-ability.<br />Convey information about what’s important – design your centerpiece.<br />Know how to use a grid and keep your design on a grid<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 />
  10. 10. cc Clover_1<br />
  11. 11. cc birdfarm<br />
  12. 12. cc trainman74<br />
  13. 13.
  14. 14.
  15. 15.
  16. 16.
  17. 17. Navigation: Show where you can go.<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 />
  18. 18. cc M.Markus<br />
  19. 19. cc eflon<br />
  20. 20.
  21. 21.
  22. 22.
  23. 23. Color and Graphics: We are attracted to pretty things.<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 />
  24. 24.
  25. 25.
  26. 26.
  27. 27.
  28. 28. Affordance: Show what you can do.<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 />
  29. 29. cc Dave Hoover<br />
  30. 30.
  31. 31.
  32. 32.
  33. 33.
  34. 34.
  35. 35. Assistance: Don’t leave them hanging.<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 />
  36. 36.
  37. 37.
  38. 38.
  39. 39. Mental Models: Think like they think.<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 />
  40. 40. cc Marc Amos<br />
  41. 41.
  42. 42.
  43. 43.
  44. 44. Keep it Simple: The simplest solution is best.<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 />
  45. 45.
  46. 46.
  47. 47.
  48. 48.
  49. 49.
  50. 50.
  51. 51.
  52. 52.
  53. 53. Accessibility: Making it work for everyone.<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 />
  54. 54.
  55. 55.
  56. 56. Delight: Put a smile on my face.<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 />
  57. 57.
  58. 58.
  59. 59.
  60. 60. 10 Principles for Layout & Design<br />Call to Action<br />Structured Layout<br />Clear Navigation<br />Attractive and Related Colors and Graphics<br />Proper Affordances<br />Friendly Assistance<br />Proper Mental Model Association<br />Keep it Simple<br />Ensure it’s Accessible<br />Delight your Visitors<br />
  61. 61. Lauren Martin<br /><br />Twitter / Slideshare: Lorielue<br />cc woodleywonderworks<br />