Top 10 Design Rules and When to Break Them

2,948
-1

Published on

Join our team of all-star designers as they reveal the top rules of web design and how to use them for your online business!

Published in: Design, Technology, Art & Photos

Top 10 Design Rules and When to Break Them

  1. 1. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore Top 10 Design Rules and When to Break Them
  2. 2. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore Your Hosts and Design Gurus Jessica Mokrzecki, Sr. Manager – Design Services Camri Hinkie, Sr. Web Designer Wes Asbell, Web Designer
  3. 3. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore
  4. 4. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore * #2 Don’t Use Too Many Colors
  5. 5. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore 1. DON’T USE TOO MANY COLORS • 2-3 colors • Brand colors • Convey the right message Following the Rule
  6. 6. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  7. 7. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  8. 8. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  9. 9. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore 1. DON’T USE TOO MANY COLORS • Use color to draw attention • Make elements standout • Organize like things with color Breaking the Rule
  10. 10. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  11. 11. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  12. 12. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  13. 13. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore #8 Keep things above the fold
  14. 14. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore 2. KEEP THINGS ABOVE THE FOLD Following the Rule • Term borrowed from newspapers • Things at the top of the site will be seen first
  15. 15. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore
  16. 16. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore
  17. 17. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore
  18. 18. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore 2. KEEP THINGS ABOVE THE FOLD Breaking the Rule • Long scrolling sites • Frees the top area for visual impact
  19. 19. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore
  20. 20. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore
  21. 21. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore
  22. 22. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore
  23. 23. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore * #1 Use a Minimum Number of Fonts
  24. 24. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore 3. USE A MINIMAL NUMBER OF FONTS • 2-3 fonts • Each font has it’s own personality • Avoid Confusion Following the Rule
  25. 25. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  26. 26. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  27. 27. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  28. 28. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore 3. USE A MINIMAL NUMBER OF FONTS • Draw attention using different fonts • Brand different sections or promotions • It’s all about pairing fonts Breaking the Rule
  29. 29. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  30. 30. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  31. 31. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  32. 32. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore #6 Logo should be in the top left
  33. 33. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore 4. LOGO SHOULD BE IN THE TOP LEFT • Standard practice • Long, horizontal logos • Can help with header organization Following the Rule
  34. 34. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore
  35. 35. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore
  36. 36. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore 4. LOGO SHOULD BE IN THE TOP LEFT Breaking the Rule • Fits certain shapes better • Puts company name on display • Be careful to balance header
  37. 37. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore
  38. 38. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore
  39. 39. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore * #3 Stick to a Grid Layout
  40. 40. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore 5. STICK TO A GRID LAYOUT • What is the grid system? • Helps structure a site • Helps with organization and consistency Following the Rule
  41. 41. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  42. 42. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  43. 43. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  44. 44. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore 5. STICK TO A GRID LAYOUT • Let a few important elements standout • It’s more organic • Keep it organized no matter what Breaking the Rule
  45. 45. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  46. 46. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  47. 47. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  48. 48. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore #7 Buttons Should Be Rounded and 3D
  49. 49. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore 6. BUTTONS SHOULD BE ROUND & 3D Following the Rule • Should stand out from the page and look dimensional • Skeuomorphic design • A way to entice users to click
  50. 50. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore
  51. 51. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore 6. BUTTONS SHOULD BE ROUND & 3D Breaking the Rule • Flat design • Scale and color, not effects
  52. 52. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore
  53. 53. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore * #4 Always Have a Left Navigation Menu
  54. 54. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore 7. ALWAYS HAVE A LEFT NAVIGATION • Can hold a large number of categories • Height of a site changes, but width stays consistent Following the Rule
  55. 55. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  56. 56. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  57. 57. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  58. 58. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore 7. ALWAYS HAVE A LEFT NAVIGATION • Doesn’t always have to be on the homepage • Frees up valuable real estate on the homepage • Helps consolidate and better emphasize your most important categories • Easier to navigate Breaking the Rule
  59. 59. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  60. 60. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  61. 61. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  62. 62. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore #9 Put everything on the homepage
  63. 63. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore 8. PUT EVERYTHING ON THE HOMEPAGE Following the Rule • Visitors shouldn’t have to go looking for important information • Lots of content can help with SEO
  64. 64. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore
  65. 65. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore
  66. 66. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore
  67. 67. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore 8. PUT EVERYTHING ON THE HOMEPAGE Breaking the Rule • Too much content = overwhelming • Highlight key selling points & products • Well structured navigation
  68. 68. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore
  69. 69. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore * #5 Animation is a No No
  70. 70. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore 9. ANIMATION IS A NO-NO • Animation can be distracting • Static sites create a pleasant user experience Following the Rule
  71. 71. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  72. 72. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore 9. ANIMATION IS A NO-NO • Subtle animations making a comeback • Animated GIFs • Javascript slideshows • Don’t go crazy Breaking the Rule
  73. 73. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore *
  74. 74. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore #10 Use all of the social media icons
  75. 75. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore 10. USE ALL OF THE SOCIAL MEDIA Following the Rule • Social media builds a community around your business • Gets the word out about your products
  76. 76. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore
  77. 77. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore 10. USE ALL OF THE SOCIAL MEDIA Breaking the Rule • Only social icons you update • Connecting accounts so a single post can go to multiple platforms
  78. 78. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore
  79. 79. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore CONCLUSION Trends or what to expect in the coming year •Flat design •Less left navigations •Larger photography •Longer pages •Transitions
  80. 80. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore * Q&A Thank you
  81. 81. Confidential and Proprietary Information Continue the conversation @Volusion with #sell4Xmore

×