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