Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Design 101 for Developers
Slide 2
Slide 2 text
I’m @cjdowner
Slide 3
Slide 3 text
I’m a designer Make this bigger 302px 302px San Fransisco Display Heavy, 200pt rgba(255, 147, 0, 1) “Aesthetic experience wizard?”
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
Designers should code…
Slide 6
Slide 6 text
…but I can’t code…
Slide 7
Slide 7 text
Should developers design?
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
What is design?
Slide 11
Slide 11 text
UI UX
Slide 12
Slide 12 text
UI UX Visual
Slide 13
Slide 13 text
UI UX Visual Interaction
Slide 14
Slide 14 text
UI UX Visual Interaction Design?
Slide 15
Slide 15 text
What isn’t design?
Slide 16
Slide 16 text
• Design isn’t a magical process
Slide 17
Slide 17 text
• Design isn’t a magical process • Design isn’t a phase that ends before development…
Slide 18
Slide 18 text
Design sketch mockup p:type review iterate spec export Development development things
Slide 19
Slide 19 text
• Design isn’t a magical process • Design isn’t a phase that ends before development… • You don’t need to be artistic
Slide 20
Slide 20 text
• Design isn’t a magical process • Design isn’t a phase that ends before development… • You don’t need to be artistic • Design isn’t just about taste
Slide 21
Slide 21 text
Why design?
Slide 22
Slide 22 text
Developers will run into design problems all the time…
Slide 23
Slide 23 text
Savin’ Time ⌛
Slide 24
Slide 24 text
“Can you make the animation smoother?”
Slide 25
Slide 25 text
“Move this 2px to the left”
Slide 26
Slide 26 text
Design Rules Header 1
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
Consistency
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
Space is your friend
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
Don’t let constraints design for you
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
Avoid system colours
Slide 37
Slide 37 text
R:0 G:0 B:255
Slide 38
Slide 38 text
many blues…
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
How it works How it looks >
Slide 41
Slide 41 text
Be boring…
Slide 42
Slide 42 text
…and ignore trends
Slide 43
Slide 43 text
Question everything
Slide 44
Slide 44 text
What’s the secret to good design?
Slide 45
Slide 45 text
Iteration
Slide 46
Slide 46 text
Good design happens when there’s an overlap between designers and developers…
Slide 47
Slide 47 text
Anyone can be a designer!
Slide 48
Slide 48 text
Designers vs Developers
Slide 49
Slide 49 text
Designers: Lead
Slide 50
Slide 50 text
Recap
Slide 51
Slide 51 text
• Developers already design! • The design phase is parallel • Consistency is key • Don’t design what’s the easiest to code
Slide 52
Slide 52 text
• Design obvious over clever • Be your own worst critic • Designers: Involve developers!
Slide 53
Slide 53 text
A clean UI is like clean code
Slide 54
Slide 54 text
Grazie Mille http://speakerdeck.com/cjdowner http://sketchapp.com Image credits: http://unsplash.com