UI & UX Design for Startups
-
Upload
richard-fang -
Category
Design
-
view
2.229 -
download
11
description
Transcript of UI & UX Design for Startups
![Page 1: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/1.jpg)
UI & UX DesignStartupsfor
![Page 2: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/2.jpg)
WHY?
![Page 3: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/3.jpg)
Not just for the sake of beauty.
![Page 4: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/4.jpg)
“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](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/5.jpg)
What is the difference between UI and UX?
![Page 6: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/6.jpg)
This is the User InterfaceWhat users see and perceive.
![Page 7: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/7.jpg)
This is the User ExperienceHow users feel and interact.
![Page 8: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/8.jpg)
Synergy
![Page 9: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/9.jpg)
HAVE A GOOD START
![Page 10: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/10.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/11.jpg)
Define Your Core Values.Why You’re Making This Product.
![Page 12: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/12.jpg)
Know Your Target Market.What problem they have. Who are they exactly.
![Page 13: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/13.jpg)
Think Benefits.Not Features.
![Page 14: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/14.jpg)
Plan Your Product Roadmap.Launch, Learn, Iterate, Repeat.
![Page 15: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/15.jpg)
9 STEPS TO BETTER UI/UX DESIGN
![Page 16: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/16.jpg)
Make Use Case & User Journey.
![Page 17: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/17.jpg)
Plan the journey. Help user get what they need / want.
![Page 18: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/18.jpg)
Start with goal and define where users come from.
![Page 19: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/19.jpg)
Just One Goal in One Page.
![Page 20: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/20.jpg)
Stripe
![Page 21: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/21.jpg)
Basecamp
![Page 22: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/22.jpg)
Nasty Gal - Product Details
![Page 23: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/23.jpg)
Create Visual Hierarchy.
![Page 24: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/24.jpg)
Guide the users. Which information they should read first.
![Page 25: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/25.jpg)
Hopskoch
![Page 26: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/26.jpg)
AirBnB - Place Details
![Page 27: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/27.jpg)
Time
![Page 28: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/28.jpg)
Use Proximity & Contrast.
![Page 29: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/29.jpg)
Emphasise your message. Make use of “White Space”
![Page 30: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/30.jpg)
Group similar level of navigation / information.
![Page 31: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/31.jpg)
Use contrast but not too much.
Click Me!
Good!
Click Me!
Meh…
Click Me!
Ouch!
![Page 32: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/32.jpg)
Handle User On-Boarding.
![Page 33: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/33.jpg)
Step by Step Tutorial
![Page 34: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/34.jpg)
Introduce “how it works” on-the-go.
![Page 35: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/35.jpg)
Mind Your Typography.
![Page 36: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/36.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/37.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/38.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/39.jpg)
Set The Right Tone & Voice.
![Page 40: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/40.jpg)
MailChimp
![Page 41: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/41.jpg)
Maskoolin
![Page 42: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/42.jpg)
The Design Quality Affects Credibility.
![Page 43: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/43.jpg)
Do Not Try This, Ever…
![Page 44: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/44.jpg)
Yep…
![Page 45: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/45.jpg)
Kill Me!
![Page 46: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/46.jpg)
Prototype. Feel the User Experience.
![Page 47: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/47.jpg)
Flinto
![Page 48: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/48.jpg)
MarvelApp
![Page 49: UI & UX Design for Startups](https://reader034.fdocuments.in/reader034/viewer/2022052201/53ef04c58d7f7289708b61e1/html5/thumbnails/49.jpg)
Thank You! Let’s do the Q&A :)
Follow Me @madeforyou
This has been a presentation by Richard Fang.