UI & UX DesignStartupsfor
WHY?
Not just for the sake of beauty.
“For me, design is a major priority because i know it’s what will set my business apart.”Boo-keun Yoon CEO of consumer electronics, Samsung
What is the difference between UI and UX?
This is the User InterfaceWhat users see and perceive.
This is the User ExperienceHow users feel and interact.
Synergy
HAVE A GOOD START
The Hierarchy of Needs
CREATIVITY
PROFICIENCY
USABILITY
RELIABILITY
FUNCTIONALITY
Reference taken from Smashing E-Book “Psychology of Web Design”
Define Your Core Values.Why You’re Making This Product.
Know Your Target Market.What problem they have. Who are they exactly.
Think Benefits.Not Features.
Plan Your Product Roadmap.Launch, Learn, Iterate, Repeat.
9 STEPS TO BETTER UI/UX DESIGN
Make Use Case & User Journey.
Plan the journey. Help user get what they need / want.
Start with goal and define where users come from.
Just One Goal in One Page.
Stripe
Basecamp
Nasty Gal - Product Details
Create Visual Hierarchy.
Guide the users. Which information they should read first.
Hopskoch
AirBnB - Place Details
Time
Use Proximity & Contrast.
Emphasise your message. Make use of “White Space”
Group similar level of navigation / information.
Use contrast but not too much.
Click Me!
Good!
Click Me!
Meh…
Click Me!
Ouch!
Handle User On-Boarding.
Step by Step Tutorial
Introduce “how it works” on-the-go.
Mind Your Typography.
Pick your font-type to match the personality of your product.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.
Attention: Line Height. Font Size + (4px or 6px) = Good!
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.
Attention: Column Width Depend on Font Size.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.
Too Wide
Just Right!
Set The Right Tone & Voice.
MailChimp
Maskoolin
The Design Quality Affects Credibility.
Do Not Try This, Ever…
Yep…
Kill Me!
Prototype. Feel the User Experience.
Flinto
MarvelApp
Thank You! Let’s do the Q&A :)
Follow Me @madeforyou
This has been a presentation by Richard Fang.