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

Slide 1

Slide 1 text

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!)

Slide 2

Slide 2 text

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)

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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.

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

CO DE EURO PE T RAC Y O S B OR N @limedaring Line things up — pixel differences are definitely unconsciously noticed. 

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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.

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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.

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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.

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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.

Slide 51

Slide 51 text

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/

Slide 52

Slide 52 text

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.

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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.

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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?'

Slide 67

Slide 67 text

Slide 68

Slide 68 text

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/

Slide 69

Slide 69 text

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.

Slide 70

Slide 70 text

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.

Slide 71

Slide 71 text

Slide 72

Slide 72 text

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 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. • Introduction has been updated.

Slide 73

Slide 73 text

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.

Slide 74

Slide 74 text

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.

Slide 75

Slide 75 text

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.

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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.

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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.

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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.

Slide 86

Slide 86 text

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.

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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/

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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.

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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!”

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

CO DE EURO PE T RAC Y O S B OR N @limedaring Thank you! Chat with me online: @limedaring