Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Design for Developers
Search
Li Jia Li
March 29, 2015
Design
1
200
Design for Developers
Design Hacks for Developers
Talks @ Women Tech Maker (Yangon) 2015
Li Jia Li
March 29, 2015
Tweet
Share
More Decks by Li Jia Li
See All by Li Jia Li
UX is more than UI
dragonvirus
0
48
SoTM Asia 2017 - Myanmar Presentation
dragonvirus
1
130
Introduction to Progressive Web App
dragonvirus
0
81
Analytic data report with MongoDB
dragonvirus
0
67
Material Design for Developers
dragonvirus
3
170
Other Decks in Design
See All in Design
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
2k
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
1.1k
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
690
Designing User Experience through Interaction Design
lycorptech_jp
PRO
0
400
harutaka Vision Deck
zenkigenforrecruit
0
250
BXデザイン組織が挑んだスクラム 〜ブランドを育み、デザイナーを解放する変革の物語〜(Scrum Fest Mikawa 2025)
tadashiinoue
0
330
8_8_リサーチカンファレンスプレイベント.pdf
muture
PRO
2
400
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
3.7k
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
300
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
420
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
550
第4回関東Kaggler会LT HCD-Net人間中心設計スペシャリストが語るNotebookメダルの取り方
utm529f
0
1.2k
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
890
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
580
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Transcript
Design for Developers by Pwint Phyu Kyaw [ Yangon ]
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.
Why is design important ?
It’s not just what it looks like and feels like.
Design is how it works. !
Users don’t see your code. They just see the UI
of your app.
While (!functional_design){ iterate(); //Failure is on its way! } Reference
: https://speakerdeck.com/prtksxna/interface-design-for-developers
Don’t worry
You just need some tools to solve the problems.
Design Hacks
Typography Image Source : http://abduzeedo.com/typography-mania-19
Typography is the King.
None
Typography Tools http://hellohappy.org/beautiful-web-type/
Typography Tools http://www.google.com/fonts
Typography Tools http://www.typegenius.com/
Typography Tools http://www.typegenius.com/
WhatFont http://chengyinliu.com/whatfont.html Available in • Bookmarklet • Chrome Extension •
Safari Extension
No more than two typefaces.
Let the content breath.
None
Visual Hierarchy ( Font Weight + Size + Color )
Registration Successful ! User Account Information Jonathan Doe
[email protected]
Registration
Successful ! User Account Information Jonathan Doe
[email protected]
Color
Don’t know which color to use ?
Google Material Colors http://www.google.com/design/spec/style/color.html
Flat UI colors http://flatuicolors.com/
Adobe Color CC https://color.adobe.com
Use icons in design " ♥ $ %
UX Design
What is UX Design ? • User-centered design • Usability
• Interface design • Prototyping • Interaction design • Information architecture • Blah blah blah ……………………………………………….
Use UI patterns which are already used.
Learn from others
http://www.pttrns.com
Resources
http://www.google.com/design/
https://hackdesign.org
Design School for Developers http://webdesign.tutsplus.com/series/design-school-for-developers--webdesign-13793
http://agiledesigners.com
Thanks for listening. & @EyeOfDragonLi