Introduction to UI & UX Design
Upcoming SlideShare
Loading in...5
×
 

Introduction to UI & UX Design

on

  • 633 views

 

Statistics

Views

Total Views
633
Views on SlideShare
627
Embed Views
6

Actions

Likes
5
Downloads
70
Comments
1

2 Embeds 6

https://twitter.com 3
http://www.slideee.com 3

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Introduction to UI & UX Design Introduction to UI & UX Design Presentation Transcript

  • Introduction to UI & UX Design Adhi Wicaksono
  • Why UI & UX Matters ?
  • UI & UX is not just about beauty, but how it works
  • What is the difference between UI & UX?
  • User Interface what users see & perceive
  • User Experience How users feel & interact
  • What makes design usable?
  • Responsive and intuitive page elements
  • Taken from: User Experience Design-Smashing Magazine
  • Taken from: User Experience Design-Smashing Magazine
  • Branding & consistency of theme
  • Getting started
  • Hierarchy of needs Reference from “Psychology of Web Design”
  • Lean UX
  • Lean loop
  • Creating GREAT design (Richard Fang)
  • 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.
  • Tips for better UI & UX Design
  • Make use case & user journey Referenced from Richard Fang
  • Create visual hierarchy Referenced from Richard Fang
  • Square
  • Twitter
  • Facebook
  • Soundcloud
  • Asana
  • The Boston Globe
  • Use Proximity & Contrast
  • Emphasise your message. Make use of “White Space” (Richard Fang)
  • Group similar level of navigation / information. (Richard Fang)
  • Use contrast, but not too much (Richard Fang)
  • Handle user on-boarding
  • Use coach marks
  • Use coach marks
  • Mind your typography
  • Choose appropriate font-type
  • Smashing Magazine’s Case Study • Line height = 1.48em • Character per line = 55 to 75
  • New York Times
  • The Verge
  • Merdeka.com
  • Medium
  • Set the right tone & voice
  • Berrybenka
  • Maskool.in
  • Brodo
  • Mbakdiskon
  • Endomondo
  • The White House
  • The Design Quality Affects Credibility.
  • meh… Image: Richard Fang
  • Prototype. Feel the user experience (Richard Fang)
  • MarvelApp
  • InVision
  • Flinto
  • Use Storytelling
  • TOMS
  • VANS
  • Nokn Bag
  • Waze
  • Kiva
  • Reference/Idea
  • • dribbble.com • behance.net • siteinspire.com • pttrns.com • androidniceties.tumblr.com
  • Adhi Wicaksono UI & UX Designer, Front-end web developer co-founder of GoFoodie and Aidnesia @adhiwiemail@adhiwie.web.idadhiwie