The Nine Biggest Design Mistakes You’re Making

A presentation at Code Europe Cracow 2017 in December 2017 in Kraków, Poland by Tracy Osborn

CODE EUROPE TRACY OSBORN @limedaring The Nine Biggest Design Mistakes You’re Making (Okay maybe not all but maybe some!)

CODE EUROPE TRACY OSBORN @limedaring Hi, I’m Tracy! @limedaring (daring, not darling) slides (also speakerdeck
username)

CODE EUROPE TRACY OSBORN @limedaring

CODE EUROPE TRACY OSBORN @limedaring You start every design   project from scratch with   no inspiration. 1.

CODE EUROPE TRACY OSBORN @limedaring Great designers steal   (and use shortcuts) #talkpay

CODE EUROPE TRACY OSBORN @limedaring Don’t be afraid of imitation .

CODE EUROPE TRACY OSBORN @limedaring Great designers steal   (and use shortcuts) #talkpay

CODE EUROPE TRACY OSBORN @limedaring

CODE EUROPE TRACY OSBORN @limedaring

CODE EUROPE TRACY OSBORN @limedaring

CODE EUROPE TRACY OSBORN @limedaring siteinspire.com

CODE EUROPE TRACY OSBORN @limedaring dribbble.com

CODE EUROPE TRACY OSBORN @limedaring unmatchedstyle.com

CODE EUROPE TRACY OSBORN @limedaring awwwards.com

CODE EUROPE TRACY OSBORN @limedaring

CODE EUROPE TRACY OSBORN @limedaring Think critically about what makes a design good/bad.

CODE EUROPE TRACY OSBORN @limedaring github.com

CODE EUROPE TRACY OSBORN @limedaring Your design is cluttered with too many fonts, colors, and misalignments. 2.

CODE EUROPE TRACY OSBORN @limedaring Pay attention to clutter #talkpay

CODE EUROPE TRACY OSBORN @limedaring Line things up — pixel di ! erences are de " nitely unconsciously noticed.

CODE EUROPE TRACY OSBORN @limedaring An underlying grid gives a   feeling of cohesiveness.

CODE EUROPE TRACY OSBORN @limedaring

CODE EUROPE TRACY OSBORN @limedaring

CODE EUROPE TRACY OSBORN @limedaring designcode.io

CODE EUROPE TRACY OSBORN @limedaring Use integrated CSS grid systems and guides as a shortcut.

CODE EUROPE TRACY OSBORN @limedaring getbootstrap.com

CODE EUROPE TRACY OSBORN @limedaring foundation.zurb.com

CODE EUROPE TRACY OSBORN @limedaring getskeleton.com

CODE EUROPE TRACY OSBORN @limedaring mozilla.org/en-US/developer/css-grid/

CODE EUROPE TRACY OSBORN @limedaring Avoid using a lot   of di ! erent colors. Keep your colors complimentary. Use mostly neutrals + one brighter color for important bits.

CODE EUROPE TRACY OSBORN @limedaring Shortcut:   Use color palette websites

CODE EUROPE TRACY OSBORN @limedaring color.adobe.com

CODE EUROPE TRACY OSBORN @limedaring colormind.io #talkpay colormind.io

CODE EUROPE TRACY OSBORN @limedaring Avoid using a lot of   di ! erent typefaces and fonts .

CODE EUROPE TRACY OSBORN @limedaring Keep the number of fonts low — two di ! erent 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 di ! erentiate bits .

CODE EUROPE TRACY OSBORN @limedaring

CODE EUROPE TRACY OSBORN @limedaring

CODE EUROPE TRACY OSBORN @limedaring

CODE EUROPE TRACY OSBORN @limedaring Your design lacks   white space. 3.

CODE EUROPE TRACY OSBORN @limedaring

CODE EUROPE TRACY OSBORN @limedaring Try giving your designs   more space than you initially   feel comfortable with.

CODE EUROPE TRACY OSBORN @limedaring

CODE EUROPE TRACY OSBORN @limedaring

CODE EUROPE TRACY OSBORN @limedaring

CODE EUROPE TRACY OSBORN @limedaring

CODE EUROPE TRACY OSBORN @limedaring

CODE EUROPE TRACY OSBORN @limedaring White space makes a website feel more professional and luxurious .

CODE EUROPE TRACY OSBORN @limedaring

CODE EUROPE TRACY OSBORN @limedaring

CODE EUROPE TRACY OSBORN @limedaring White space makes your website easier to use — a ! ecting your bottom line.

CODE EUROPE TRACY OSBORN @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/

CODE EUROPE TRACY OSBORN @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.

CODE EUROPE TRACY OSBORN @limedaring Your content is   lacks contrast. 4.

CODE EUROPE TRACY OSBORN @limedaring

CODE EUROPE TRACY OSBORN @limedaring

CODE EUROPE TRACY OSBORN @limedaring

CODE EUROPE TRACY OSBORN @limedaring

CODE EUROPE TRACY OSBORN @limedaring

CODE EUROPE TRACY OSBORN @limedaring Make sure you have enough contrast between your content and the background .

CODE EUROPE TRACY OSBORN @limedaring webaim.org/resources/contrastchecker/

CODE EUROPE TRACY OSBORN @limedaring ( Tidbit: Too much contrast can also cause issues.)

CODE EUROPE TRACY OSBORN @limedaring

CODE EUROPE TRACY OSBORN @limedaring

CODE EUROPE TRACY OSBORN @limedaring Your content is hard to read and understand. 5.

CODE EUROPE TRACY OSBORN @limedaring

CODE EUROPE TRACY OSBORN @limedaring It was the White Rabbit, trotting slowly back again, and looking anxiously about as it went, as if it had lost something; an d 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 itselfThe 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?'

CODE EUROPE TRACY OSBORN @limedaring It was the White Rabbit, trotting slowly back again, and looking anxiously about as it went, as if it had lost something; an d 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 itselfThe 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?'

CODE EUROPE TRACY OSBORN @limedaring css-tricks.com/bookmarklet-colorize-text-45-75-characters-line-length-testing/

CODE EUROPE TRACY OSBORN @limedaring Content principles Less is more Big paragraphs are a sign of clutter. Break into bullets if you can.

CODE EUROPE TRACY OSBORN @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.

CODE EUROPE TRACY OSBORN @limedaring For best results, use the latest version of Firefox. Chrome for Mac and Windows is also supported. 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.

CODE EUROPE TRACY OSBORN @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 re
ect the new Django 1.9 styles. The few minor typos have been " xed. 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.

CODE EUROPE TRACY OSBORN @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.

CODE EUROPE TRACY OSBORN @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.

CODE EUROPE TRACY OSBORN @limedaring Your headlines don’t explain what the product is and aren’t exciting. 6.

CODE EUROPE TRACY OSBORN @limedaring

CODE EUROPE TRACY OSBORN @limedaring Headlines: Talk bene " ts, not details. Keep it short. Use natural, friendly language.

CODE EUROPE TRACY OSBORN @limedaring

CODE EUROPE TRACY OSBORN @limedaring

CODE EUROPE TRACY OSBORN @limedaring

CODE EUROPE TRACY OSBORN @limedaring

CODE EUROPE TRACY OSBORN @limedaring

CODE EUROPE TRACY OSBORN @limedaring It’s hard for your users to ! nd what you want them to do. 7.

CODE EUROPE TRACY OSBORN @limedaring

CODE EUROPE TRACY OSBORN @limedaring What’s the most important   action on your design? Make it easy to " nd and use.

CODE EUROPE TRACY OSBORN @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.

CODE EUROPE TRACY OSBORN @limedaring

CODE EUROPE TRACY OSBORN @limedaring

CODE EUROPE TRACY OSBORN @limedaring

CODE EUROPE TRACY OSBORN @limedaring

CODE EUROPE TRACY OSBORN @limedaring Your design takes   too long to download. 8.

CODE EUROPE TRACY OSBORN @limedaring

CODE EUROPE TRACY OSBORN @limedaring imageoptim.com

CODE EUROPE TRACY OSBORN @limedaring ! lamentgroup.com/lab/font-loading.html

CODE EUROPE TRACY OSBORN @limedaring upwork.com/hiring/development/11-tips-to-optimize-javascript-and-improve-website-loading-speeds/

CODE EUROPE TRACY OSBORN @limedaring developers.google.com/speed/pagespeed/insights/

CODE EUROPE TRACY OSBORN @limedaring Your design doesn’t work   on phones and other   alternate sizes. 9.

CODE EUROPE TRACY OSBORN @limedaring responsivedesign.is/examples/ethan-marcotte/

CODE EUROPE TRACY OSBORN @limedaring responsivedesign.is/examples/ethan-marcotte/

CODE EUROPE TRACY OSBORN @limedaring

CODE EUROPE TRACY OSBORN @limedaring Some reassurances:

CODE EUROPE TRACY OSBORN @limedaring My thought process, every time:

CODE EUROPE TRACY OSBORN @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! ”

CODE EUROPE TRACY OSBORN @limedaring

CODE EUROPE TRACY OSBORN @limedaring Thank you! Chat with me online: @limedaring

Tracy Osborn
@limedaring

1 / 105

Design feels hard. Who wants to worry about the golden ratio? (Spoiler, no one does, even designers.) But everyone has to do just a bit of design in their work. We'll go over lots of examples and provide you with functional takeaways to make your designs better.

This presentation is aimed at helping folks who aren't designers understand the biggest design issues that they could be making, and learn how to fix those mistakes.

Video