"Web and App 
Design Fundamental: Quick and dirty tips to improve your UX in no-time" is created for everyone who wants to improve their website/app user experience design (UX) by applying user research, UX design, basic design principle such as typography, color, grid etc. The presentation also included a list of real-world & useful UX/UI tools we use every day.

1. Web and App
Design Fundamental
By Bow Kraivanich bowkraivanich.com@bowkraivanich
Quick and dirty tips to improve your UX in no-time
1st March 2017 At Department of Industrial Design, Faculty of Architecture,
Chulalongkorn University, Bangkok, Thailand
bowkraivanich

2. Bow Kraivanich ?
• Managing Partner at Magnetolabs Co., Ltd.
(Inbound Marketing Agency)
• Managing Director at Blankspace Co., Ltd.
(UX/UI/Web design studio)
• Ex. Co-founder at Fastinflow, Daydash
• Design Mentor at Hubba Stadium & Startup Weekend Bangkok
• Hubba Academy Instructor
me!
By Bow Kraivanich

3. Table of Content
1. User Research & Planning
2. UX design fundamental
3. Beyond the Visual Design
4. Tools
5. Reading List

4. User Research &
Planning

5. Persona

6. Competitive Analysis
credit: http://ux.in.th

7. Card Sorting

8. Close Cart Sorting

9. Open Cart Sorting

10. Information Architecture

11. Information Architecture
+

12. UX Design
Fundamental

13. Pay attention to patterns
Activity Feed /
Notifications

14. Stay consistent
1
2
3

15. Stay consistent
•
•

16. Use visual hierarchy

17. Use visual hierarchy
1
2
3
CTA

18. Use visual hierarchy
1
2

19. Signal & Clue

20. Provide feedback

21. Inform user

22. Beyond the
Visual Design

23. Content that easy to digest

24. Typography
Font Size
“16 Pixels: For Body Copy.
Anything Less Is A Costly Mistake”
https://www.smashingmagazine.com/2011/10/16-pixels-body-copy-anything-less-costly-mistake/

25. Typography
Line height & spacing

26. Color
Color & Contrast

27. Color
Color & Contrast

28. Color
Color & Contrast
• •
•

29. Color
Color & Contrast

30. Color
Basic Color system on the web
HEX
RGB

31. Color
Example Color system on the web

32. Create a site style guide/design pattern

33. Grid System for the Web

34. Grid system for the web
bootstrap grid system
http://getbootstrap.com/css/#grid

35. Grid system for the web
bootstrap grid system
http://getbootstrap.com/css/#grid

36. Grid system for the web
responsive design
http://getbootstrap.com/css/#grid

37. Grid system for the web
responsive design
http://getbootstrap.com/css/#grid

38. Design for mobile

39. Design for Mobile
FOLLOW the UI guidelines
https://developer.apple.com/ios/human-interface-
guidelines/overview/design-principles/
iOS Human Interface Guidelines
https://designcode.io/iosdesign-guidelines

40. Design for Mobile
FOLLOW the UI guidelines
https://developer.android.com/design/index.html
material design (for Andriod)

41. Design for Mobile
Use the default UI elements

42. Design for Mobile
Clear App

43. Design for Mobile
Always design on the real device

44. Design for Mobile
Always design on the real device
https://itunes.apple.com/us/app/sketch-mirror/
id677296955?mt=8
Sketch Mirror for Sketch App

45. Tools
The real world tools for UX/UI designers

46. Prototyping Tools

47. •
Prototyping Tools
Sketch + Invision
https://www.invisionapp.com/sketch-prototyping

48. Prototyping Tools
Simple design, prototyping and collaboration
https://marvelapp.com

49. Prototyping Tools
Prototypes that feel real.
https://proto.io

51. Working with developer

52. Development Tools
zeplin.io

53. Development Tools
Invision Inspect

54. Development Tools
Chrome Inspector

55. Development Tools
Chrome Inspector
•

56. Development Tools
Chrome Inspector
•

57. Recommended
Reading List

58. Recommended Reading
The Elements of User
Experience
UX StrategyDesigning with the
Mind in Mind
Don't Make Me Think

59. THANK YOU!
Q&A
By Bow Kraivanich bow.kraivanich www.bowkraivanich.com@bowkraivanich