'

A Crash Course on Product Design for Developers

Понравилась презентация – покажи это...





Слайд 0

DESIGN DEVELOPERS A crash course on for


Слайд 1

Outline 1.  2.  3.  4.  Why learn design User-centered design Visual design Recap


Слайд 2

Outline 1.  2.  3.  4.  Why learn design User-centered design Visual design Recap


Слайд 3

What is ?


Слайд 4

Not this


Слайд 5

Nor this


Слайд 6


Слайд 7

Nope


Слайд 8

This is Google


Слайд 9


Слайд 10


Слайд 11


Слайд 12

The Iceberg Secret


Слайд 13

Design is the product


Слайд 14

“[Design is] not just what it looks like and feels like. Design is how it works.” – Steve Jobs


Слайд 15

I’m Yevgeniy Brikman ybrikman.com


Слайд 16

I’m NOT a designer


Слайд 17

But I use design all the time


Слайд 18

And so do you


Слайд 19

Résumé design


Слайд 20

Homepage design


Слайд 21

Interior design


Слайд 22

System design


Слайд 23

Slide deck design


Слайд 24

This talk teaches you basic design tools


Слайд 25

Think of it as a designer’s “Hello, World”


Слайд 26

It’s based on my book, Hello, Startup hello-startup.net


Слайд 27

And my work at Atomic Squirrel atomic-squirrel.net


Слайд 28

Outline 1.  2.  3.  4.  Why learn design User-centered design Visual design Recap


Слайд 29


Слайд 30

Design is about helping people achieve their goals


Слайд 31

User-centered design tools 1.  2.  3.  4.  Personas Simplicity Emotional design Usability testing


Слайд 32

User-centered design tools 1.  2.  3.  4.  Personas Simplicity Emotional design Usability testing


Слайд 33

Never design for the average person


Слайд 34

The average person doesn’t exist


Слайд 35

“The average person has one testicle and one fallopian tube.” – Bo Burnham


Слайд 36

Instead, define personas


Слайд 37

Name, age, bio, work, skills, goals


Слайд 38

Design for 1-3 primary personas


Слайд 39

User-centered design tools 1.  2.  3.  4.  Personas Simplicity Emotional design Usability testing


Слайд 40

Physical products: physical limits


Слайд 41


Слайд 42


Слайд 43

Software products: mental limits


Слайд 44


Слайд 45


Слайд 46


Слайд 47

“Perfection is attained not when there is nothing more to add, but when there is nothing more to remove.” – Antoine de Saint Exupéry


Слайд 48

User-centered design tools 1.  2.  3.  4.  Personas Simplicity Emotional design Usability testing


Слайд 49

People interact with a computer as they would with another person


Слайд 50

Every piece of software makes you feel something


Слайд 51

Design your product to be a good human being


Слайд 52

Be considerate and responsive


Слайд 53


Слайд 54


Слайд 55


Слайд 56

Be forgiving


Слайд 57


Слайд 58


Слайд 59


Слайд 60

Be funny


Слайд 61


Слайд 62


Слайд 63


Слайд 64


Слайд 65


Слайд 66

Be yourself


Слайд 67


Слайд 68


Слайд 69


Слайд 70

“Your product has a voice–and it's talking to your customers 24 hours a day.” – 37Signals


Слайд 71

User-centered design tools 1.  2.  3.  4.  Personas Simplicity Emotional design Usability testing


Слайд 72

Record real users trying to use your product


Слайд 73

Repeat monthly


Слайд 74

Usability testing tools http://www.hello-startup.net/resources/design/


Слайд 75

Outline 1.  2.  3.  4.  Why learn design User-centered design Visual design Recap


Слайд 76

We’ll improve the visual design of two examples:


Слайд 77

Résumé


Слайд 78

Website


Слайд 79

Visual design tools 1.  2.  3.  4.  Design reuse Layout Typography Contrast


Слайд 80

Visual design tools 1.  2.  3.  4.  Design reuse Layout Typography Contrast


Слайд 81

“Good artists copy; great artists steal.” – Steve Jobs


Слайд 82

Website, mobile, & email templates http://www.hello-startup.net/resources/design/


Слайд 83

Wireframing & mockup tools http://www.hello-startup.net/resources/design/


Слайд 84

Stock photography, clip art, icons http://www.hello-startup.net/resources/images-photos-graphics/


Слайд 85

Visual design tools 1.  2.  3.  4.  Design reuse Layout Typography Contrast


Слайд 86

Position elements to communicate information


Слайд 87

Proximity: related items should be closer together


Слайд 88

Unrelated items should be further apart


Слайд 89

Improving the proximity in the résumé


Слайд 90

Alignment: position items along common lines


Слайд 91

Improving the alignment in the résumé


Слайд 92

Your mind inserts a line


Слайд 93

Website alignment. Where is the line?


Слайд 94

“Nothing should be placed on the page arbitrarily. Every element should have some visual connection with another element on the page.” – Robin Williams


Слайд 95

Visual design tools 1.  2.  3.  4.  Design reuse Layout Typography Contrast


Слайд 96

Measure: the length of a line of text


Слайд 97

Too much measure


Слайд 98

Too little measure


Слайд 99

Correct measure


Слайд 100

Recommendation: 45-90 characters per line


Слайд 101

Leading: the vertical space between lines of text


Слайд 102

Too little leading


Слайд 103

Too much leading


Слайд 104

Correct leading


Слайд 105

Recommendation: 120-145% of font size


Слайд 106

Typeface: the design of the letters


Слайд 107

Serif Times New Roman, Baskerville, Didot, Courier Sans serif Helvetica Neue, Arial, Eurostile, Avenir Decorative Papyrus, STENCIL, Desdemona, Rosewood


Слайд 108

Recommendation: avoid system typefaces


Слайд 109

Free & paid typefaces http://www.hello-startup.net/resources/design/


Слайд 110

Font: typeface + style


Слайд 111

Regular, 48 Condensed Bold, 48 ITALIC, 12, CAPS Thin, 48, 10pt spacing Same typeface, different styling


Слайд 112

Recommendation: every font serves one purpose


Слайд 113

Improving the fonts in the resume


Слайд 114

Recommendation: leave the font pairing to the pros


Слайд 115

Font pairing http://www.hello-startup.net/resources/design/


Слайд 116

Visual design tools 1.  2.  3.  4.  Design reuse Layout Typography Contrast


Слайд 117

Use contrast to make something stand out


Слайд 118

Using contrast to make the title stand out


Слайд 119

Use contrast to create a Call to Action (CTA)


Слайд 120

The CTA is not very noticeable here


Слайд 121

Make it stand out with more contrast


Слайд 122

Use colors to increase contrast even more


Слайд 123

Tip #1: do everything in black & white first.


Слайд 124

Then add color deliberately


Слайд 125

Website in black & white


Слайд 126

Website with color


Слайд 127

Tip #2: use palettes from professionals


Слайд 128

Color palettes http://www.hello-startup.net/resources/design/


Слайд 129

Outline 1.  2.  3.  4.  Why learn design User-centered design Visual design Recap


Слайд 130

User-centered design


Слайд 131

Personas


Слайд 132

Simplicity


Слайд 133

Design your software to be a good human being


Слайд 134

Usability testing


Слайд 135

Visual design


Слайд 136

Original résumé design


Слайд 137

Layout


Слайд 138

Typography


Слайд 139

Contrast


Слайд 140

Original website design


Слайд 141

Layout


Слайд 142

Typography


Слайд 143

Contrast


Слайд 144

Design reuse


Слайд 145

For more info, see Hello, Startup hello-startup.net


Слайд 146

Need help or advice? Atomic Squirrel atomic-squirrel.net


Слайд 147

Questions?


Слайд 148

Photo credits Pencils: Elle Google Data Center: Google Iceberg: Wallpapers Project Iceberg Secret: Joel Spolsky Steve Jobs: Albert Watson Modern interior: Plage Vinilos y Adhesivos Blueprint: Will Scullin Road: Joshua Tree National Park Man at a lake: Joshua Earle Alan Cooper: Wikipedia Pinocchio: Wikipedia Amazon Camera: Jeffrey Paul User icon: Andreas Bjurenborg Bo Burnham: Jennifer Elias Persona: Xtensio Ambient light sensor: Christian Ziberg Antoine de Saint Exupéry: Modernista Louis CK: Little Big Details Swiss Army Knife: Jonas Bergsten Giant Knife: Wegner Product Comic: Erik Burke Speed limit: Chad Elliott Mobile phone user: Alejandro Escamilla Typography: Jeremy Keith Ruler: Scott Akerman Letter A: pannan Building: Ernest Duffoo Color pencils: Capture Queen


Слайд 149


×

HTML:





Ссылка: