UI.UX
UI.UX DESIGN BEGINNER’S GUIDE
UI.UX
THE UI.UX BASICS UI.UX UI.UX TIPS UI.UX p.3 p.3 p.3 p.4 p.5 p.5-6 p.7 p.8 p.9 p.10 p.11 p.12 01 02
PART.1
UI.UX
#110 #137 USER INTERFACE DESIGN USER EXPERIENCE DESIGN pt dp No.2 No.3 No.1 ppi points per pixel dpi dots per pixel www.instagram.com/p/CFebtwznpV8/
UI.UX
THE
BASICS
www.instagram.com/p/CDtF7Ygn6dk/
#116 www.instagram.com/p/CD_Rj7_nCyR/ ATOMS MOLECULES ORGANISMS TEMPLATES PAGES
TEMPLATES
ATOMS ORGANISMS MOLECULES
PAGES
Microinteractions
#86 #139 www.instagram.com/p/CClAiqoHp5n/ www.instagram.com/p/CF9jRseHGjt/ PERSONA PERSONA NEXT PAGE
The
Trigger The Rules Feedback Loops and Modes
of Players 1 Uploading ... Completed Upload Document.pdf Recommended
Number of Players 2 Number
UX.UI www.instagram.com/p/CCA2zbvnM1b/ The Empty State There is nothing here Find another keyword Let’s take a look! New to here? Please check your internet connection. 01 CTA 02 Please come back in 2 hours. Sorry! We are fixing the problem! 03 icon Welcome! Say Hi to new friends Send Message No message yet!
UX.UI 01 04 01 02 03 04 Loading... Loading Page Nielsen Norman Group www.instagram.com/p/CGhfBZLH4Hr/ Loading... 03 LOGO socialmore.com.hk 02 Loading
UX.UI 01 04 Marco White Space Blank Space www.instagram.com/p/CG17snynr8x/ 03 Margin Padding 02 Micro White Space 01 02 03 04 UI Marco White Space Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetuer Lorem ipsum dolor sit amet, consectetuer LOREM IPSUM @LOREM Lorem ipsum Micro White Space Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetuer Lorem ipsum dolor sit amet, consectetuer LOREM IPSUM @LOREM Lorem ipsum Content Padding Border Margin Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetuer Lorem ipsum dolor sit amet, consectetuer Lorem ipsum LOREM IPSUM @LOREM
Tooltips UX.UI 01 Tooltips Tooltips Tooltips www.instagram.com/p/CKd8ycSnVRO/ 03 Tooltips 02 Tooltips UI 01 02 03 04 Tooltip 05 Tooltips 04 Tooltips Tooltips Tooltip Tooltip 05 Sha Tin, Tai Po, Tsuen Wan, Tuen Mun, Yuen Long, Kwun Tong Tai Po or 17 others Search user by entering their username Search user by entering their username Print Print Show/ Hide contents from end-users. If hidden, will no longer be visible in preview mode or to end-users when thry access hep site. Show Contents Help This is a tooltip content for mobile. When tap the help icon, it appears.
Persona
Persona (Target Audience)
Persona
Persona
Persona 03
Alan Cooper 1983
Persona
Persona
UX.UI
www.instagram.com/p/CClAiqoHp5n/
01 02
03
Persona
My Persona Tool
02 Hubspot Make
Persona
01
Persona PDF Add New Section
EXAMPLE World Wide Web Consortium UX.UI Principles About Accessible Design www.instagram.com/p/CIfi4-qHAR0 UI 01 02 03 04 AA The Woodman set to work at once. The Woodman set to work at once. The Woodman set to work at once. The Woodman set to work at once. www.Accessible-colors.com 02 01 03 04 48 40 48 24 Material Design 48 x 48 dpi 9mm
UI.UX Part.1 Part.2 http://socialmore.com.hk/ socialmorehkSocial More Hk