Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time
2 likes1,203 views
The document is a guide to web and app design fundamentals, authored by Bow Kraivanich, focusing on improving user experience (UX). It covers key topics such as user research, planning, visual design principles, typography, color systems, responsive design, and tools for UX/UI designers. The document also includes resources for further reading and emphasizes consistency in design practices.
Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time
- 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
- 5. Persona
- 7. Card Sorting
- 13. Pay attention to patterns Activity Feed / Notifications
- 19. Signal & Clue
- 20. Provide feedback
- 21. Inform user
- 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
- 28. 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
- 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
- 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
- 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