Design for Non-Designers / PHPTek

Slide 1

Slide 1 text

P HP TEK T RAC Y O S B OR N @limedaring Design for Non-Designers Basics of designing so you can make effective, lovely interfaces.

Slide 2

Slide 2 text

P HP TEK 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

P HP TEK T RAC Y O S B OR N @limedaring Thanks to our Sponsors!

Slide 4

Slide 4 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 5

Slide 5 text

P HP TEK T RAC Y O S B OR N @limedaring I will be tweeting all links: @limedaring (“daring” — not “darling”) #talkpay

Slide 6

Slide 6 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 7

Slide 7 text

P HP TEK T RAC Y O S B OR N @limedaring image credit: Dan Saffer

Slide 8

Slide 8 text

P HP TEK T RAC Y O S B OR N @limedaring Design: Making an interface that   works well.

Slide 9

Slide 9 text

P HP TEK T RAC Y O S B OR N @limedaring Design for Non-Designers Basics of designing so you can make effective, lovely interfaces. #talkpay

Slide 10

Slide 10 text

P HP TEK T RAC Y O S B OR N @limedaring Design for Non-Designers Basics of designing so you can make effective, lovely interfaces. #talkpay

Slide 11

Slide 11 text

P HP TEK T RAC Y O S B OR N @limedaring Design for Non-Designers Basics of designing so you can make effective, lovely interfaces. #talkpay

Slide 12

Slide 12 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 13

Slide 13 text

P HP TEK T RAC Y O S B OR N @limedaring Design for Non-Designers Basics of designing so you can make effective, lovely interfaces. #talkpay

Slide 14

Slide 14 text

P HP TEK T RAC Y O S B OR N @limedaring Design for Non-Designers Basics of designing so you can make effective, lovely interfaces. #talkpay

Slide 15

Slide 15 text

P HP TEK T RAC Y O S B OR N @limedaring Design for Non-Designers Basics of designing so you can make effective, lovely interfaces. #talkpay

Slide 16

Slide 16 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 17

Slide 17 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 18

Slide 18 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 19

Slide 19 text

P HP TEK T RAC Y O S B OR N @limedaring How can we create effective, basic designs?

Slide 20

Slide 20 text

P HP TEK T RAC Y O S B OR N @limedaring Let’s talk about clutter

Slide 21

Slide 21 text

P HP TEK T RAC Y O S B OR N @limedaring Pay attention to clutter #talkpay

Slide 22

Slide 22 text

P HP TEK T RAC Y O S B OR N @limedaring Fastest way for better looking designs: Cut down on clutter.

Slide 23

Slide 23 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 24

Slide 24 text

P HP TEK T RAC Y O S B OR N @limedaring grid

Slide 25

Slide 25 text

P HP TEK T RAC Y O S B OR N @limedaring Line things up — pixel differences are deﬁnitely unconsciously noticed. 

Slide 26

Slide 26 text

P HP TEK T RAC Y O S B OR N @limedaring Shortcut: Use integrated grid systems and guides!

Slide 27

Slide 27 text

P HP TEK T RAC Y O S B OR N @limedaring getbootstrap.com

Slide 28

Slide 28 text

P HP TEK T RAC Y O S B OR N @limedaring foundation.zurb.com

Slide 29

Slide 29 text

P HP TEK T RAC Y O S B OR N @limedaring getskeleton.com

Slide 30

Slide 30 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 31

Slide 31 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 32

Slide 32 text

P HP TEK T RAC Y O S B OR N @limedaring color

Slide 33

Slide 33 text

P HP TEK T RAC Y O S B OR N @limedaring Color principles Keep your colors complimentary. Use mostly neutrals + one brighter color for important bits.

Slide 34

Slide 34 text

P HP TEK T RAC Y O S B OR N @limedaring https://www.smashingmagazine.com/2016/04/web-developer-guide-color/

Slide 35

Slide 35 text

P HP TEK T RAC Y O S B OR N @limedaring Shortcut: Use color palette websites!

Slide 36

Slide 36 text

P HP TEK T RAC Y O S B OR N @limedaring foundation.zurb.com

Slide 37

Slide 37 text

P HP TEK T RAC Y O S B OR N @limedaring material.io

Slide 38

Slide 38 text

P HP TEK T RAC Y O S B OR N @limedaring colourlovers.com

Slide 39

Slide 39 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 40

Slide 40 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 41

Slide 41 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 42

Slide 42 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 43

Slide 43 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 44

Slide 44 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 45

Slide 45 text

P HP TEK T RAC Y O S B OR N @limedaring fonts

Slide 46

Slide 46 text

P HP TEK 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 47

Slide 47 text

P HP TEK T RAC Y O S B OR N @limedaring Shortcut: Use curated font websites!

Slide 48

Slide 48 text

P HP TEK T RAC Y O S B OR N @limedaring http://hellohappy.org/beautiful-web-type/

Slide 49

Slide 49 text

P HP TEK T RAC Y O S B OR N @limedaring http://hellohappy.org/beautiful-web-type/

Slide 50

Slide 50 text

P HP TEK T RAC Y O S B OR N @limedaring fontpair.co

Slide 51

Slide 51 text

P HP TEK T RAC Y O S B OR N @limedaring fontpair.co

Slide 52

Slide 52 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 53

Slide 53 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 54

Slide 54 text

P HP TEK T RAC Y O S B OR N @limedaring white space

Slide 55

Slide 55 text

P HP TEK T RAC Y O S B OR N @limedaring The ultimate clutter reducer

Slide 56

Slide 56 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 57

Slide 57 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 58

Slide 58 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 59

Slide 59 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 60

Slide 60 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 61

Slide 61 text

P HP TEK 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 62

Slide 62 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 63

Slide 63 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 64

Slide 64 text

P HP TEK 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 65

Slide 65 text

P HP TEK T RAC Y O S B OR N @limedaring User experience principles

Slide 66

Slide 66 text

P HP TEK T RAC Y O S B OR N @limedaring What’s the most important   action on your design? Make it easy to ﬁnd and use.

Slide 67

Slide 67 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 68

Slide 68 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 69

Slide 69 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 70

Slide 70 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 71

Slide 71 text

P HP TEK T RAC Y O S B OR N @limedaring Pay attention to your goals. Make them easy to ﬁnd and use.

Slide 72

Slide 72 text

P HP TEK 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 73

Slide 73 text

P HP TEK 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.

Slide 74

Slide 74 text

P HP TEK 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.

Slide 75

Slide 75 text

P HP TEK 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 76

Slide 76 text

P HP TEK 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 77

Slide 77 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 78

Slide 78 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 79

Slide 79 text

P HP TEK T RAC Y O S B OR N @limedaring What’s the most important   action on your design? Make it easy to ﬁnd and use. #talkpay

Slide 80

Slide 80 text

P HP TEK T RAC Y O S B OR N @limedaring Headlines: Talk beneﬁts, not details. Keep it short. Use natural, friendly language.

Slide 81

Slide 81 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 82

Slide 82 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 83

Slide 83 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 84

Slide 84 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 85

Slide 85 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 86

Slide 86 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 87

Slide 87 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 88

Slide 88 text

P HP TEK T RAC Y O S B OR N @limedaring Images and imagery

Slide 89

Slide 89 text

P HP TEK T RAC Y O S B OR N @limedaring Images: Stock photos usually look like stock photos. You can accomplish a lot with just type and screenshots. Remember to pay attention to ﬁle size. Don’t forget retina-quality images.

Slide 90

Slide 90 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 91

Slide 91 text

P HP TEK T RAC Y O S B OR N @limedaring unsplash.com unsplash.com

Slide 92

Slide 92 text

P HP TEK T RAC Y O S B OR N @limedaring photopin.com photopin.com

Slide 93

Slide 93 text

P HP TEK T RAC Y O S B OR N @limedaring fiverr.com

Slide 94

Slide 94 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 95

Slide 95 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 96

Slide 96 text

P HP TEK T RAC Y O S B OR N @limedaring Don’t be afraid of imitation.

Slide 97

Slide 97 text

P HP TEK T RAC Y O S B OR N @limedaring Great designers steal   (and use shortcuts) #talkpay

Slide 98

Slide 98 text

P HP TEK T RAC Y O S B OR N @limedaring Great designers steal   (and use shortcuts) #talkpay

Slide 99

Slide 99 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 100

Slide 100 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 101

Slide 101 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 102

Slide 102 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 103

Slide 103 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 104

Slide 104 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 105

Slide 105 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 106

Slide 106 text

P HP TEK T RAC Y O S B OR N @limedaring Quick overview of a design process

Slide 107

Slide 107 text

P HP TEK T RAC Y O S B OR N @limedaring 1.  Collect inspiration and   sketch ideas.

Slide 108

Slide 108 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 109

Slide 109 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 110

Slide 110 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 111

Slide 111 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 112

Slide 112 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 113

Slide 113 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 114

Slide 114 text

P HP TEK T RAC Y O S B OR N @limedaring 2.  Mock it up?

Slide 115

Slide 115 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 116

Slide 116 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 117

Slide 117 text

P HP TEK T RAC Y O S B OR N @limedaring 3.  Build it.

Slide 118

Slide 118 text

P HP TEK T RAC Y O S B OR N @limedaring

Slide 119

Slide 119 text

P HP TEK T RAC Y O S B OR N @limedaring My thought process, every time:

Slide 120

Slide 120 text

P HP TEK 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 121

Slide 121 text

P HP TEK T RAC Y O S B OR N @limedaring This is only the starting point!

Slide 122

Slide 122 text

P HP TEK T RAC Y O S B OR N @limedaring Reduce visual clutter — Keep the number of fonts and colors low. Add white space. Line things up. Keep content short and easy to skim.

Slide 123

Slide 123 text

P HP TEK T RAC Y O S B OR N @limedaring Make sure your goal is easy to ﬁnd and use.

Slide 124

Slide 124 text

P HP TEK T RAC Y O S B OR N @limedaring Keep your content simple, friendly,   and to the point.