Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Nine Biggest Design Mistakes You’re Making ...

Tracy Osborn
December 05, 2017

The Nine Biggest Design Mistakes You’re Making / Code Europe

Tracy Osborn

December 05, 2017
Tweet

More Decks by Tracy Osborn

Other Decks in Design

Transcript

  1. CO DE EURO PE T RAC Y O S B

    OR N @limedaring The Nine Biggest Design Mistakes You’re Making (Okay maybe not all but maybe some!)
  2. CO DE EURO PE T RAC Y O S B

    OR N @limedaring Hi, I’m Tracy! @limedaring (daring, not darling) slides (also speakerdeck username)
  3. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  4. CO DE EURO PE T RAC Y O S B

    OR N @limedaring You start every design 
 project from scratch with 
 no inspiration. 1.
  5. CO DE EURO PE T RAC Y O S B

    OR N @limedaring Great designers steal 
 (and use shortcuts) #talkpay
  6. CO DE EURO PE T RAC Y O S B

    OR N @limedaring Don’t be afraid of imitation.
  7. CO DE EURO PE T RAC Y O S B

    OR N @limedaring Great designers steal 
 (and use shortcuts) #talkpay
  8. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  9. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  10. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  11. CO DE EURO PE T RAC Y O S B

    OR N @limedaring siteinspire.com
  12. CO DE EURO PE T RAC Y O S B

    OR N @limedaring dribbble.com
  13. CO DE EURO PE T RAC Y O S B

    OR N @limedaring unmatchedstyle.com
  14. CO DE EURO PE T RAC Y O S B

    OR N @limedaring awwwards.com
  15. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  16. CO DE EURO PE T RAC Y O S B

    OR N @limedaring Think critically about what makes a design good/bad.
  17. CO DE EURO PE T RAC Y O S B

    OR N @limedaring github.com
  18. CO DE EURO PE T RAC Y O S B

    OR N @limedaring Your design is cluttered with too many fonts, colors, and misalignments. 2.
  19. CO DE EURO PE T RAC Y O S B

    OR N @limedaring Pay attention to clutter #talkpay
  20. CO DE EURO PE T RAC Y O S B

    OR N @limedaring Line things up — pixel differences are definitely unconsciously noticed.

  21. CO DE EURO PE T RAC Y O S B

    OR N @limedaring An underlying grid gives a 
 feeling of cohesiveness.
  22. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  23. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  24. CO DE EURO PE T RAC Y O S B

    OR N @limedaring designcode.io
  25. CO DE EURO PE T RAC Y O S B

    OR N @limedaring Use integrated CSS grid systems and guides as a shortcut.
  26. CO DE EURO PE T RAC Y O S B

    OR N @limedaring getbootstrap.com
  27. CO DE EURO PE T RAC Y O S B

    OR N @limedaring foundation.zurb.com
  28. CO DE EURO PE T RAC Y O S B

    OR N @limedaring getskeleton.com
  29. CO DE EURO PE T RAC Y O S B

    OR N @limedaring mozilla.org/en-US/developer/css-grid/
  30. CO DE EURO PE T RAC Y O S B

    OR N @limedaring Avoid using a lot 
 of different colors. Keep your colors complimentary. Use mostly neutrals + one brighter color for important bits.
  31. CO DE EURO PE T RAC Y O S B

    OR N @limedaring Shortcut: 
 Use color palette websites
  32. CO DE EURO PE T RAC Y O S B

    OR N @limedaring color.adobe.com
  33. CO DE EURO PE T RAC Y O S B

    OR N @limedaring colormind.io #talkpay colormind.io
  34. CO DE EURO PE T RAC Y O S B

    OR N @limedaring Avoid using a lot of 
 different typefaces and fonts.
  35. CO DE EURO PE T RAC Y O S B

    OR N @limedaring Keep the number of fonts low — two different fonts is usually a good rule of thumb. Use fancy/display fonts sparingly — very cluttery. Vary weights (bold), style (italics), and transforms (uppercase, etc.) to differentiate bits.
  36. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  37. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  38. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  39. CO DE EURO PE T RAC Y O S B

    OR N @limedaring Your design lacks 
 white space. 3.
  40. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  41. CO DE EURO PE T RAC Y O S B

    OR N @limedaring Try giving your designs 
 more space than you initially 
 feel comfortable with.
  42. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  43. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  44. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  45. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  46. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  47. CO DE EURO PE T RAC Y O S B

    OR N @limedaring White space makes a website feel more professional and luxurious.
  48. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  49. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  50. CO DE EURO PE T RAC Y O S B

    OR N @limedaring White space makes your website easier to use — affecting your bottom line.
  51. CO DE EURO PE T RAC Y O S B

    OR N @limedaring “By replacing the extra links around the Add to Cart buttons with whitespace, Xerox saw a 20% improvement in engagement, 5% boost in products added to cart, and a 33% improvement in customers continuing through purchase.” https://studio.uxpin.com/blog/ux-case-study-designing-whitespace-to-improve-conversions/
  52. CO DE EURO PE T RAC Y O S B

    OR N @limedaring Reduce visual clutter, by keeping the number of fonts and colors low, add white space, and line things up. Aim for a “clean” design.
  53. CO DE EURO PE T RAC Y O S B

    OR N @limedaring Your content is 
 lacks contrast. 4.
  54. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  55. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  56. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  57. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  58. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  59. CO DE EURO PE T RAC Y O S B

    OR N @limedaring Make sure you have enough contrast between your content and the background.
  60. CO DE EURO PE T RAC Y O S B

    OR N @limedaring webaim.org/resources/contrastchecker/
  61. CO DE EURO PE T RAC Y O S B

    OR N @limedaring (Tidbit: Too much contrast can also cause issues.)
  62. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  63. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  64. CO DE EURO PE T RAC Y O S B

    OR N @limedaring Your content is hard to read and understand. 5.
  65. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  66. CO DE EURO PE T RAC Y O S B

    OR N @limedaring It was the White Rabbit, trotting slowly back again, and looking anxiously about as it went, as if it had lost something; and she heard it muttering to itself `The Duchess! The Duchess! Oh my dear paws! Oh my fur and whiskers! She'll get me executed, as sure as ferrets are ferrets! Where CAN I have dropped them, I wonder?' It was the White Rabbit, trotting slowly back again, and looking anxiously about as it went, as if it had lost something; and she heard it muttering to itself `The Duchess! The Duchess! Oh my dear paws! Oh my fur and whiskers! She'll get me executed, as sure as ferrets are ferrets! Where CAN I have dropped them, I wonder?'
  67. CO DE EURO PE T RAC Y O S B

    OR N @limedaring It was the White Rabbit, trotting slowly back again, and looking anxiously about as it went, as if it had lost something; and she heard it muttering to itself `The Duchess! The Duchess! Oh my dear paws! Oh my fur and whiskers! She'll get me executed, as sure as ferrets are ferrets! Where CAN I have dropped them, I wonder?' It was the White Rabbit, trotting slowly back again, and looking anxiously about as it went, as if it had lost something; and she heard it muttering to itself `The Duchess! The Duchess! Oh my dear paws! Oh my fur and whiskers! She'll get me executed, as sure as ferrets are ferrets! Where CAN I have dropped them, I wonder?'
  68. CO DE EURO PE T RAC Y O S B

    OR N @limedaring css-tricks.com/bookmarklet-colorize-text-45-75-characters-line-length-testing/
  69. CO DE EURO PE T RAC Y O S B

    OR N @limedaring Content principles Less is more Big paragraphs are a sign of clutter. Break into bullets if you can.
  70. CO DE EURO PE T RAC Y O S B

    OR N @limedaring Please note that although Chrome is supported for both Mac and Windows operating systems, it is recommended that all users of this site switch to the most up-to-date version of the Firefox web browser for the best possible results.
  71. CO DE EURO PE T RAC Y O S B

    OR N @limedaring Please note that although Chrome is supported for both Mac and Windows operating systems, it is recommended that all users of this site switch to the most up-to-date version of the Firefox web browser for the best possible results. For best results, use the latest version of Firefox. Chrome for Mac and Windows is also supported.
  72. CO DE EURO PE T RAC Y O S B

    OR N @limedaring We made a bunch of changes: The registration chapter has been split in two, between adding registration and then associating users with objects. The chapter was giant before so this makes it more manageable. Screenshots of the admin have been updated to reflect the new Django 1.9 styles. The few minor typos have been fixed. Updated the version of django- registration-redux that we use to 1.3. Last but not least, the Introduction has been updated. We made a bunch of changes: • The registration chapter has been split in two, between adding registration and then associating users with objects. The chapter was giant before so this makes it more manageable. • Screenshots of the admin have been updated to reflect the new Django 1.9 styles. • The few minor typos have been fixed. • Updated the version of django- registration-redux that we use to 1.3. • Introduction has been updated.
  73. CO DE EURO PE T RAC Y O S B

    OR N @limedaring We made a bunch of changes: • The registration chapter has been split in two, between adding registration and then associating users with objects. The chapter was giant before so this makes it more manageable. • Screenshots of the admin have been updated to reflect the new Django 1.9 styles. • The few minor typos have been fixed. • Updated the version of django- registration-redux that we use to 1.3. • Introduction has been updated. We made a bunch of changes: • The registration chapter has been split in two, between adding registration and then associating users with objects. The chapter was giant before so this makes it more manageable. • Screenshots of the admin have been updated to reflect the new Django 1.9 styles. • The few minor typos have been fixed. • Updated the version of django- registration-redux that we use to 1.3. • Introduction has been updated.
  74. CO DE EURO PE T RAC Y O S B

    OR N @limedaring We made a bunch of changes: • The registration chapter has been split in two, between adding registration and then associating users with objects. The chapter was giant before so this makes it more manageable. • Screenshots of the admin have been updated to reflect the new Django 1.9 styles. • The few minor typos have been fixed. • Updated the version of django-registration- redux that we use to 1.3. • Introduction has been updated. We made a bunch of changes: • The registration chapter has been split in two, between adding registration and then associating users with objects. The chapter was giant before so this makes it more manageable. • Screenshots of the admin have been updated to reflect the new Django 1.9 styles. • The few minor typos have been fixed. • Updated the version of django- registration-redux that we use to 1.3. • Introduction has been updated.
  75. CO DE EURO PE T RAC Y O S B

    OR N @limedaring Your headlines don’t explain what the product is and aren’t exciting. 6.
  76. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  77. CO DE EURO PE T RAC Y O S B

    OR N @limedaring Headlines: Talk benefits, not details. Keep it short. Use natural, friendly language.
  78. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  79. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  80. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  81. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  82. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  83. CO DE EURO PE T RAC Y O S B

    OR N @limedaring It’s hard for your users to find what you want them to do. 7.
  84. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  85. CO DE EURO PE T RAC Y O S B

    OR N @limedaring What’s the most important 
 action on your design? Make it easy to find and use.
  86. CO DE EURO PE T RAC Y O S B

    OR N @limedaring vs sign up email address I believe folks who know a bit about design will be more likely to hire a professional designer when the time is right. I’m a designer, and even I hire designers for things bigger than me. And if you agree, you should join my newsletter. I believe folks who know a bit about design will be more likely to hire a professional designer when the time is right. I’m a designer, and even I hire designers for things bigger than me. If you agree, you should join my newsletter.
  87. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  88. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  89. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  90. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  91. CO DE EURO PE T RAC Y O S B

    OR N @limedaring Your design takes 
 too long to download. 8.
  92. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  93. CO DE EURO PE T RAC Y O S B

    OR N @limedaring imageoptim.com
  94. CO DE EURO PE T RAC Y O S B

    OR N @limedaring filamentgroup.com/lab/font-loading.html
  95. CO DE EURO PE T RAC Y O S B

    OR N @limedaring upwork.com/hiring/development/11-tips-to-optimize-javascript-and-improve-website-loading-speeds/
  96. CO DE EURO PE T RAC Y O S B

    OR N @limedaring developers.google.com/speed/pagespeed/insights/
  97. CO DE EURO PE T RAC Y O S B

    OR N @limedaring Your design doesn’t work 
 on phones and other 
 alternate sizes. 9.
  98. CO DE EURO PE T RAC Y O S B

    OR N @limedaring responsivedesign.is/examples/ethan-marcotte/
  99. CO DE EURO PE T RAC Y O S B

    OR N @limedaring responsivedesign.is/examples/ethan-marcotte/
  100. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  101. CO DE EURO PE T RAC Y O S B

    OR N @limedaring Some reassurances:
  102. CO DE EURO PE T RAC Y O S B

    OR N @limedaring My thought process, every time:
  103. CO DE EURO PE T RAC Y O S B

    OR N @limedaring My thought process, every time: “crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap 
 … yes!”
  104. CO DE EURO PE T RAC Y O S B

    OR N @limedaring
  105. CO DE EURO PE T RAC Y O S B

    OR N @limedaring Thank you! Chat with me online: @limedaring