Design for Developers
by
Pwint Phyu Kyaw
[ Yangon ]
Slide 2
Slide 2 text
Who am i ?
My name is Pwint Phyu Kyaw a.k.a Li Jia Li.
I’m a backend PHP Developer who also know a little about
design.
I’m a co-founder of Hexcores.
Mission of the Hexcores is to simplify people life with
technology.
Slide 3
Slide 3 text
Why is design important ?
Slide 4
Slide 4 text
It’s not just what it looks like and feels like.
Design is how it works.
!
Slide 5
Slide 5 text
Users don’t see your code.
They just see the UI of your app.
Slide 6
Slide 6 text
While (!functional_design){
iterate();
//Failure is on its way!
}
Reference : https://speakerdeck.com/prtksxna/interface-design-for-developers
WhatFont
http://chengyinliu.com/whatfont.html
Available in
• Bookmarklet
• Chrome Extension
• Safari Extension
Slide 18
Slide 18 text
No more than two typefaces.
Slide 19
Slide 19 text
Let the content breath.
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
Visual Hierarchy
( Font Weight + Size + Color )
Slide 22
Slide 22 text
Registration Successful
!
User Account Information
Jonathan Doe
[email protected]
Registration Successful
!
User Account Information
Jonathan Doe
[email protected]
Slide 23
Slide 23 text
Color
Slide 24
Slide 24 text
Don’t know which color to use ?
Slide 25
Slide 25 text
Google Material Colors
http://www.google.com/design/spec/style/color.html
Slide 26
Slide 26 text
Flat UI colors
http://flatuicolors.com/
Slide 27
Slide 27 text
Adobe Color CC
https://color.adobe.com
Slide 28
Slide 28 text
Use icons in design
" ♥ $ %
Slide 29
Slide 29 text
UX Design
Slide 30
Slide 30 text
What is UX Design ?
• User-centered design
• Usability
• Interface design
• Prototyping
• Interaction design
• Information architecture
• Blah blah blah ……………………………………………….
Slide 31
Slide 31 text
Use UI patterns which are
already used.
Slide 32
Slide 32 text
Learn from others
Slide 33
Slide 33 text
http://www.pttrns.com
Slide 34
Slide 34 text
Resources
Slide 35
Slide 35 text
http://www.google.com/design/
Slide 36
Slide 36 text
https://hackdesign.org
Slide 37
Slide 37 text
Design School for Developers
http://webdesign.tutsplus.com/series/design-school-for-developers--webdesign-13793