Design for Developers

Design Hacks for Developers
Talks @ Women Tech Maker (Yangon) 2015

Transcript

1. Design for Developers by Pwint Phyu Kyaw [ Yangon ]
2. 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.
3. Why is design important ?
4. It’s not just what it looks like and feels like. Design is how it works. !
5. Users don’t see your code. They just see the UI of your app.
6. While (!functional_design){ iterate(); //Failure is on its way! } Reference : https://speakerdeck.com/prtksxna/interface-design-for-developers
7. Don’t worry
8. You just need some tools to solve the problems.
9. Design Hacks
10. Typography Image Source : http://abduzeedo.com/typography-mania-19
11. Typography is the King.
13. Typography Tools http://hellohappy.org/beautiful-web-type/
14. Typography Tools http://www.google.com/fonts
15. Typography Tools http://www.typegenius.com/
16. Typography Tools http://www.typegenius.com/
17. WhatFont http://chengyinliu.com/whatfont.html Available in • Bookmarklet • Chrome Extension • Safari Extension
18. No more than two typefaces.
19. Let the content breath.
21. Visual Hierarchy ( Font Weight + Size + Color )
22. Registration Successful ! User Account Information Jonathan Doe john@mail.com Registration Successful ! User Account Information Jonathan Doe john@mail.com
23. Color
24. Don’t know which color to use ?
25. Google Material Colors http://www.google.com/design/spec/style/color.html
26. Flat UI colors http://flatuicolors.com/
27. Adobe Color CC https://color.adobe.com
28. Use icons in design " ♥ $ %
29. UX Design
30. What is UX Design ? • User-centered design • Usability • Interface design • Prototyping • Interaction design • Information architecture • Blah blah blah ……………………………………………….
31. Use UI patterns which are already used.
32. Learn from others
33. http://www.pttrns.com
34. Resources
35. http://www.google.com/design/
36. https://hackdesign.org
37. Design School for Developers http://webdesign.tutsplus.com/series/design-school-for-developers--webdesign-13793
38. http://agiledesigners.com
39. Thanks for listening. & @EyeOfDragonLi