UI & UX Design for Startups

Download UI & UX Design for Startups

Post on 21-Apr-2017

10.175 views

Category:

Design

0 download

TRANSCRIPT

  • UI & UX DesignStartupsfor

  • WHY?

  • Not just for the sake of beauty.

  • For me, design is a major priority because i know its 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 Youre 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! Lets do the Q&A :)

    Follow Me @madeforyou

    This has been a presentation by Richard Fang.