The document discusses the significance of UI and UX design in setting businesses apart, emphasizing the distinction between user interface and user experience. It outlines a 9-step process for effective design, including understanding target markets, planning product roadmaps, and utilizing visual hierarchy. Additionally, it highlights the importance of prototyping and user onboarding to enhance the overall user experience.

1. UI & UX Design
Startupsfor

2. WHY?

3. Not justfor
thesakeof
beauty.

4. “For me,design is a
major priority because
i know it’s what will
set my business
apart.”
Boo-keunYoon
CEO of consumer electronics,Samsung

5. Whatisthe
difference
betweenUI
andUX?

6. This isthe
UserInterface
Whatusersseeandperceive.

7. This isthe
UserExperience
How usersfeel andinteract.

8. Synergy

9. HAVE A GOOD START

10. TheHierarchyof Needs
CREATIVITY
PROFICIENCY
USABILITY
RELIABILITY
FUNCTIONALITY
ReferencetakenfromSmashing E-Book“Psychologyof WebDesign”

11. DefineYour
CoreValues.
WhyYou’re MakingThisProduct.

12. KnowYour
TargetMarket.
Whatproblemtheyhave.Whoare
theyexactly.

13. ThinkBenefits.
NotFeatures.

14. PlanYour
Product
Roadmap.
Launch,Learn,Iterate,Repeat.

15. 9 STEPS TO BETTER
UI/UX DESIGN

16. MakeUseCase
&UserJourney.

17. Planthejourney.Help usergetwhat
theyneed/ want.

18. Startwithgoalanddefinewhere
userscomefrom.

19. JustOneGoal
inOnePage.

20. Stripe

21. Basecamp

22. Nasty Gal - Product Details

23. CreateVisual
Hierarchy.

24. Guidetheusers.Whichinformation
theyshouldreadfirst.

25. Hopskoch

26. AirBnB - Place Details

27. Time

28. Use Proximity&
Contrast.

29. Emphasiseyourmessage.Makeuse
of “WhiteSpace”

30. Groupsimilarlevelof navigation/
information.

31. Usecontrastbutnottoomuch.
Click Me!
Good!
Click Me!
Meh…
Click Me!
Ouch!

32. Handle User
On-Boarding.

33. StepbyStepTutorial

34. Introduce“howitworks”on-the-go.

35. MindYour
Typography.

36. Pickyourfont-typetomatchthe
personalityof yourproduct.
Lorem Ipsumissimplydummy
textof theprintingand
typesettingindustry.Lorem
Ipsumhasbeentheindustry's
standarddummytexteversince
the1500s,whenanunknown
printertooka galleyof typeand
scrambleditto makeatype
specimenbook.Ithassurvived
notonlyfivecenturies.
LoremIpsumissimplydummy
textoftheprintingand
typesettingindustry.Lorem
Ipsumhasbeentheindustry's
standarddummytextever
sincethe1500s,whenan
unknownprintertooka galley
oftypeandscrambleditto
makeatypespecimenbook.It
hassurvivednotonly five
centuries.

37. Attention:LineHeight.
FontSize+(4pxor6px)=Good!
Lorem Ipsumissimplydummy
textof theprintingand
typesettingindustry.Lorem
Ipsumhasbeentheindustry's
standarddummytexteversince
the1500s,whenanunknown
printertooka galleyof typeand
scrambleditto makeatype
specimenbook.Ithassurvived
notonlyfivecenturies.
LoremIpsumissimplydummy
textoftheprintingand
typesettingindustry.Lorem
Ipsumhasbeentheindustry's
standarddummytextever
sincethe1500s,whenan
unknownprintertooka galley
oftypeandscrambleditto
makeatypespecimenbook.It
hassurvivednotonly five
centuries.

38. Attention:ColumnWidth
DependonFontSize.
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.
TooWide
JustRight!

39. SetTheRight
Tone&Voice.

40. MailChimp

41. Maskoolin

42. The Design
QualityAffects
Credibility.

43. Do Not Try This, Ever…

44. Yep…

45. Kill Me!

46. Prototype.
FeeltheUser
Experience.

47. Flinto

48. MarvelApp

49. ThankYou!
Let’sdotheQ&A:)
FollowMe@madeforyou
This has been a presentation by Richard Fang.