Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time
-
Upload
bow-kraivanich -
Category
Design
-
view
381 -
download
0
Transcript of Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time
![Page 1: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/1.jpg)
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
![Page 2: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/2.jpg)
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
![Page 3: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/3.jpg)
Table of Content 1. User Research & Planning
2. UX design fundamental
3. Beyond the Visual Design
4. Tools
5. Reading List
![Page 4: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/4.jpg)
User Research & Planning
![Page 5: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/5.jpg)
Persona
![Page 7: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/7.jpg)
Card Sorting
![Page 8: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/8.jpg)
Close Cart Sorting
![Page 9: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/9.jpg)
Open Cart Sorting
![Page 10: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/10.jpg)
Information Architecture
![Page 11: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/11.jpg)
Information Architecture
+
![Page 12: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/12.jpg)
UX Design Fundamental
![Page 13: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/13.jpg)
Pay attention to patterns
Activity Feed /
Notifications
![Page 14: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/14.jpg)
Stay consistent
1
2
3
![Page 15: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/15.jpg)
Stay consistent
•
•
![Page 16: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/16.jpg)
Use visual hierarchy
![Page 17: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/17.jpg)
Use visual hierarchy
1
2
3
CTA
![Page 18: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/18.jpg)
Use visual hierarchy
1
2
![Page 19: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/19.jpg)
Signal & Clue
![Page 20: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/20.jpg)
Provide feedback
![Page 21: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/21.jpg)
Inform user
![Page 22: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/22.jpg)
Beyond the Visual Design
![Page 23: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/23.jpg)
Content that easy to digest
![Page 24: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/24.jpg)
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/
![Page 25: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/25.jpg)
Typography
Line height & spacing
![Page 26: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/26.jpg)
Color
Color & Contrast
![Page 27: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/27.jpg)
Color
Color & Contrast
![Page 28: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/28.jpg)
Color
Color & Contrast
• •
•
![Page 29: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/29.jpg)
Color
Color & Contrast
![Page 30: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/30.jpg)
Color
Basic Color system on the web
HEX RGB
![Page 31: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/31.jpg)
Color
Example Color system on the web
![Page 32: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/32.jpg)
Create a site style guide/design pattern
![Page 33: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/33.jpg)
Grid System for the Web
![Page 34: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/34.jpg)
Grid system for the web
bootstrap grid system
http://getbootstrap.com/css/#grid
![Page 35: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/35.jpg)
Grid system for the web
bootstrap grid system
http://getbootstrap.com/css/#grid
![Page 36: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/36.jpg)
Grid system for the web
responsive design
http://getbootstrap.com/css/#grid
![Page 37: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/37.jpg)
Grid system for the web
responsive design
http://getbootstrap.com/css/#grid
![Page 38: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/38.jpg)
Design for mobile
![Page 39: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/39.jpg)
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
![Page 40: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/40.jpg)
Design for Mobile
FOLLOW the UI guidelineshttps://developer.android.com/design/index.html
material design (for Andriod)
![Page 41: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/41.jpg)
Design for Mobile
Use the default UI elements
![Page 42: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/42.jpg)
Design for Mobile
Clear App
![Page 43: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/43.jpg)
Design for Mobile
Always design on the real device
![Page 44: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/44.jpg)
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
![Page 45: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/45.jpg)
Tools The real world tools for UX/UI designers
![Page 46: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/46.jpg)
Prototyping Tools
![Page 47: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/47.jpg)
•
Prototyping Tools
Sketch + Invision
https://www.invisionapp.com/sketch-prototyping
![Page 48: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/48.jpg)
Prototyping Tools
Simple design, prototyping and collaboration https://marvelapp.com
![Page 50: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/50.jpg)
![Page 51: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/51.jpg)
Working with developer
![Page 53: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/53.jpg)
Development Tools
Invision Inspect
![Page 54: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/54.jpg)
Development Tools
Chrome Inspector
![Page 55: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/55.jpg)
Development Tools
Chrome Inspector
•
![Page 56: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/56.jpg)
Development Tools
Chrome Inspector
•
![Page 57: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/57.jpg)
Recommended Reading List
![Page 58: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/58.jpg)
Recommended Reading
The Elements of User Experience
UX StrategyDesigning with the Mind in Mind
Don't Make Me Think
![Page 59: Web and App Design Fundamental: Quick and dirty tips to improve your UX in no-time](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a650b8c7f8b9afd398b48bd/html5/thumbnails/59.jpg)
THANK YOU!
Q&ABy Bow Kraivanich bow.kraivanich www.bowkraivanich.com@bowkraivanich