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.