Transcript
Page 1: UI & UX Design for Startups

UI & UX DesignStartupsfor

Page 2: UI & UX Design for Startups

WHY?

Page 3: UI & UX Design for Startups

Not just for the sake of beauty.

Page 4: UI & UX Design for Startups

“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

Page 5: UI & UX Design for Startups

What is the difference between UI and UX?

Page 6: UI & UX Design for Startups

This is the User InterfaceWhat users see and perceive.

Page 7: UI & UX Design for Startups

This is the User ExperienceHow users feel and interact.

Page 8: UI & UX Design for Startups

Synergy

Page 9: UI & UX Design for Startups

HAVE A GOOD START

Page 10: UI & UX Design for Startups

The Hierarchy of Needs

CREATIVITY

PROFICIENCY

USABILITY

RELIABILITY

FUNCTIONALITY

Reference taken from Smashing E-Book “Psychology of Web Design”

Page 11: UI & UX Design for Startups

Define Your Core Values.Why You’re Making This Product.

Page 12: UI & UX Design for Startups

Know Your Target Market.What problem they have. Who are they exactly.

Page 13: UI & UX Design for Startups

Think Benefits.Not Features.

Page 14: UI & UX Design for Startups

Plan Your Product Roadmap.Launch, Learn, Iterate, Repeat.

Page 15: UI & UX Design for Startups

9 STEPS TO BETTER UI/UX DESIGN

Page 16: UI & UX Design for Startups

Make Use Case & User Journey.

Page 17: UI & UX Design for Startups

Plan the journey. Help user get what they need / want.

Page 18: UI & UX Design for Startups

Start with goal and define where users come from.

Page 19: UI & UX Design for Startups

Just One Goal in One Page.

Page 20: UI & UX Design for Startups

Stripe

Page 21: UI & UX Design for Startups

Basecamp

Page 22: UI & UX Design for Startups

Nasty Gal - Product Details

Page 23: UI & UX Design for Startups

Create Visual Hierarchy.

Page 24: UI & UX Design for Startups

Guide the users. Which information they should read first.

Page 25: UI & UX Design for Startups

Hopskoch

Page 26: UI & UX Design for Startups

AirBnB - Place Details

Page 27: UI & UX Design for Startups

Time

Page 28: UI & UX Design for Startups

Use Proximity & Contrast.

Page 29: UI & UX Design for Startups

Emphasise your message. Make use of “White Space”

Page 30: UI & UX Design for Startups

Group similar level of navigation / information.

Page 31: UI & UX Design for Startups

Use contrast but not too much.

Click Me!

Good!

Click Me!

Meh…

Click Me!

Ouch!

Page 32: UI & UX Design for Startups

Handle User On-Boarding.

Page 33: UI & UX Design for Startups

Step by Step Tutorial

Page 34: UI & UX Design for Startups

Introduce “how it works” on-the-go.

Page 35: UI & UX Design for Startups

Mind Your Typography.

Page 36: UI & UX Design for Startups

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.

Page 37: UI & UX Design for Startups

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.

Page 38: UI & UX Design for Startups

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!

Page 39: UI & UX Design for Startups

Set The Right Tone & Voice.

Page 40: UI & UX Design for Startups

MailChimp

Page 41: UI & UX Design for Startups

Maskoolin

Page 42: UI & UX Design for Startups

The Design Quality Affects Credibility.

Page 43: UI & UX Design for Startups

Do Not Try This, Ever…

Page 44: UI & UX Design for Startups

Yep…

Page 45: UI & UX Design for Startups

Kill Me!

Page 46: UI & UX Design for Startups

Prototype. Feel the User Experience.

Page 47: UI & UX Design for Startups

Flinto

Page 48: UI & UX Design for Startups

MarvelApp

Page 49: UI & UX Design for Startups

Thank You! Let’s do the Q&A :)

Follow Me @madeforyou

This has been a presentation by Richard Fang.


Top Related