web and app design fundamental: quick and dirty tips to improve your ux in no-time
Post on 22-Jan-2018
381 Views
Preview:
TRANSCRIPT
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
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
Table of Content 1. User Research & Planning
2. UX design fundamental
3. Beyond the Visual Design
4. Tools
5. Reading List
User Research & Planning
Persona
Card Sorting
Close Cart Sorting
Open Cart Sorting
Information Architecture
Information Architecture
+
UX Design Fundamental
Pay attention to patterns
Activity Feed /
Notifications
Stay consistent
1
2
3
Stay consistent
•
•
Use visual hierarchy
Use visual hierarchy
1
2
3
CTA
Use visual hierarchy
1
2
Signal & Clue
Provide feedback
Inform user
Beyond the Visual Design
Content that easy to digest
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/
Typography
Line height & spacing
Color
Color & Contrast
Color
Color & Contrast
Color
Color & Contrast
• •
•
Color
Color & Contrast
Color
Basic Color system on the web
HEX RGB
Color
Example Color system on the web
Create a site style guide/design pattern
Grid System for the Web
Grid system for the web
bootstrap grid system
http://getbootstrap.com/css/#grid
Grid system for the web
bootstrap grid system
http://getbootstrap.com/css/#grid
Grid system for the web
responsive design
http://getbootstrap.com/css/#grid
Grid system for the web
responsive design
http://getbootstrap.com/css/#grid
Design for mobile
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
Design for Mobile
FOLLOW the UI guidelineshttps://developer.android.com/design/index.html
material design (for Andriod)
Design for Mobile
Use the default UI elements
Design for Mobile
Clear App
Design for Mobile
Always design on the real device
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
Tools The real world tools for UX/UI designers
Prototyping Tools
•
Prototyping Tools
Sketch + Invision
https://www.invisionapp.com/sketch-prototyping
Prototyping Tools
Simple design, prototyping and collaboration https://marvelapp.com
Working with developer
Development Tools
Invision Inspect
Development Tools
Chrome Inspector
Development Tools
Chrome Inspector
•
Development Tools
Chrome Inspector
•
Recommended Reading List
Recommended Reading
The Elements of User Experience
UX StrategyDesigning with the Mind in Mind
Don't Make Me Think
THANK YOU!
Q&ABy Bow Kraivanich bow.kraivanich www.bowkraivanich.com@bowkraivanich
top related