UI/UX Learning: From Discovery to Design
Download as PPTX, PDF2 likes524 views
The document outlines key learnings in UX/UI design from discovery to deployment, emphasizing the importance of understanding problems and solutions through research. It discusses methods for collecting knowledge and insights, such as utilizing platforms like Google and social media groups. Additionally, it covers design principles like persuasive design and affordance, alongside practical resources for design asset generation.
UI/UX Learning: From Discovery to Design
- 1. UI/ UX LEARNINGS From Discovery to Design
- 2. • 3rd GenerationIndianChinese • Self TaughtUX Designer • Workingin QuantumInventions • Impulsive HoarderofIdeas! ABOUT ME
- 3. • Discovery • Design • Deployment WHAT I WILL BE COVERING
- 4. • Discovery of THE QUESTION • Discovery of THE SOLUTIONDISCOVERY Icon Created by Gregor Cresnar from the Noun Project
- 6. Discovery of the Problem “neversolvetheproblemIamaskedto solve” TheDesignofEverydayThings DonNorman
- 7. • From collected existing Knowledge • Research into a new unknown Domain Discovery of THE SOLUTION
- 9. • PinBoard • Evernote • Pinterest • Pocket Collecting for FutureUse Collected existing Knowledge
- 10. • PinBoard • Evernote • Pinterest • Pocket Collecting for FutureUse Collected existing Knowledge
- 11. • PinBoard • Evernote • Pinterest • Pocket Collecting for FutureUse Collected existing Knowledge
- 12. Collecting for FutureUse Collected existing Knowledge • PinBoard • Evernote • Pinterest • Pocket
- 13. Automotive UX Source:tesla.com A Case Study Researchintoanew unknown Domain
- 14. Whatmade me seriously thinkaboutit? This article… A Case Study Researchintoanew unknown Domain
- 15. Whatmademeseriously thinkabout it? This article… A Case Study Researchintoanew unknown Domain
- 16. • AnEvaluationofTypefaceDesignina Text-RichAutomotiveUserInterface • Slideshare: CarUI DesignandSafety- SlippyUX • ISODocument:Roadvehicles--Ergonomicaspectsoftransportinformationandcontrolsystems-- Specificationsandtestproceduresforin-vehiclevisualpresentation Few Insights I found… A Case Study Researchintoanew unknown Domain
- 17. • Where toFind? – Google – Youtube – SlideShare – Slack: https://userexperiencedesign.slack.com/ Topic_automotive – https://ux.stackexchange.com/ – Online Groups: LinkeIn Groups / Slack / Facebook • What toFind? – UsetheRight Terminology • How toFind? – Follow theScent Lesson on Research A Case Study Researchintoanew unknown Domain
- 18. • Persuasive Design • FittsLaw • Anti Affordance DESIGN Icon Created by Gregor Cresnar from the Noun Project
- 19. Whatis it? Persuasivedesign is an area ofdesignpracticethatfocuseson influencing humanbehavior through aproduct’s or service’s characteristics interaction-design.org PersuasiveDesign
- 20. SlideShare: Persuasive Design or The Fine Art of Separating People from Their Bad Behaviours - Online REALWORLD EXAMPLESPersuasiveDesign
- 22. A Quick Exercise Fitts Law
- 23. Whatis it? Fittslaw predicts thatthe time required torapidlymovetoa target area isa function ofthe ratiobetweenthedistancetothe targetand thewidthofthetarget Wikipedia.org Fitts Law
- 27. But firstwhat isAffordance? theperceived or actual properties ofthething,primarily those fundamentalpropertiesthatdeterminejust howthethingcould possiblybe used… The Design of Everyday Things Don Norman Anti Affordance
- 28. Sowhatis Anti-Affordancethen? When designingsomething,itis as importanttoprevent misuseas it istoencourage the correct use.This is done withanti-affordances www.muffin.works Anti Affordance
- 29. Camden Bench www.muffin.works REALWORLD EXAMPLESAnti-Affordance Drilling Machine CordlessSIM Phone
- 32. • Store Upload • App Asset DEPLOYMENT Icon Created by Danil Polshin from the Noun Project
- 33. App Store Splash Screens Store Upload
- 34. App Store Splash Screens Store Upload
- 35. Linked Smart Objects Further Reading: helpx.adobe.com : Generate image assets from layers TechniqueUsedStoreUpload
- 36. Adobe Image Generator Further Reading: helpx.adobe.com : Generate image assets from layers TechniqueUsedStoreUpload Syntax iOS/splash.png, 200% iOS/splash@2x.png
- 37. App Assets Generation App AssetsGeneration
- 38. Adobe Image Generator Further Reading: helpx.adobe.com : Generate image assets from layers TechniqueUsedAppAsset Generation Syntax Default iOS/ + 200% iOS/@2x + 300% iOS/@3x + Android/mdpi/ + 150% Android/hdpi/ + 200% Android/xdpi/….
- 39. Few thingsI can beofhelp with… • HFI-CUA Course • Online Resources • Books Q&A
- 40. • Linked In: linkedin.com/in/robbyhsu/ • E-mail: robert.hsu@gmail.com • Pinterest: in.pinterest.com/robbyhsu/ LET’S CONNECT!
- 41. THANKYOU!