@howitson
Design for Developers
Design for Developers
Tips to make your screens shine
or at least not embarassing
Slide 2
Slide 2 text
@howitson
Design for Developers
Slide 3
Slide 3 text
Untitled
@howitson
Design for Developers
Slide 4
Slide 4 text
Incognito
@howitson
Design for Developers
Slide 5
Slide 5 text
@howitson
Design for Developers
What ‘tcha got?
Company Brand or Style Guide
Slide 6
Slide 6 text
@howitson
Design for Developers
What ‘tcha got?
A component library
Slide 7
Slide 7 text
@howitson
Design for Developers
What ‘tcha got?
Examples of similar things
Slide 8
Slide 8 text
@howitson
Design for Developers
Good artists
borrow. Great
artists steal!
Slide 9
Slide 9 text
@howitson
Design for Developers
Slide 10
Slide 10 text
@howitson
Design for Developers
01 Design patterns (common)
ui-patterns.com/patterns
02 Mobile screens collection
mobbin.com
03 Web app screens collection
saasframe.io
Slide 11
Slide 11 text
Hierarchy
@howitson
Design for Developers
Matters
A lot
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
@howitson
Design for Developers
1.
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
Typography
@howitson
Design for Developers
More than just words
Slide 18
Slide 18 text
@howitson
Design for Developers
Image: https://dribbble.com/tiagofank
Slide 19
Slide 19 text
@howitson
Design for Developers
Expressive Fonts
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
@howitson
Design for Developers
To serif or not
to serif. That is
the question.
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
@howitson
Design for Developers
01 Font pairs for Google fonts
www.fontpair.co/all
02 Learning about typography
m2.material.io/design/typography/understanding-typography.html
Slide 24
Slide 24 text
@howitson
Design for Developers
Layouts that work
Creative Space
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
@howitson
Design for Developers
Docker / Kubernetes
Slide 30
Slide 30 text
@howitson
Design for Developers
Docker / Kubernetes
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
Consistency
Consistency
Consistency
@howitson
Design for Developers
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
Not just for walls
@howitson
Design for Developers
Painting
Slide 36
Slide 36 text
@howitson
Design for Developers
Slide 37
Slide 37 text
@howitson
Design for Developers
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
@howitson
Design for Developers
01 Color Inspiration
color.adobe.com/trends/Ui/ux
02 Color weights/values
m2.material.io/resources/color/
03 Material Color Picker
m2.material.io/design/color/the-color-system.html
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
STOP! WARNING LET’S GO!
Slide 44
Slide 44 text
At the start
@howitson
Design for Developers
Finish
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
Question
Everything
@howitson
Design for Developers