Mobile (Android) App UI Design Crash Course (2016)
- 1. MOBILE (ANDROID) APP UI DESIGN CRASH COURSE by Bahni Mahariasha
- 2. Hello there, My name is Bahni, and I am… • 22 years old • from Binus University - Computer Science • a former intern at XM JWT, and Samsung R&D Institute Indonesia • currently a Freelance UI/UX Designer • on LinkedIn. Go check it out linkedin.com/in/bahni
- 4. We can say that a digital product consists of … • Container (desktop, tablet, or mobile device) • Informations (texts, images, sounds, video, vibrations, etc.) • UI (buttons, textfields, icons, navigations, lists, etc.) • UX (what user feels before, during, and after using the product) Image source: wunderlist.com
- 6. The double diamond design process. More about this: goo.gl/Y9IX7D
- 9. Usability (n.) a quality attribute that asseses how easy user interfaces are to use. The word "usability" also refers to methods for improving ease-of-use during the design process. Source: nngroup.com/articles/usability-101-introduction-to-usability/
- 10. Five quality components of usability… • Learnability (How easy is it for users to accomplish basic tasks the first time?) • Efficiency (How quickly can they perform tasks?) • Memorability (How easily can they reestablish proficiency?) • Error (How many errors do users make, how severe are these errors, and how easily can they recover from the errors?) • Satisfaction (How pleasant is it to use the design?) Source: nngroup.com/articles/usability-101-introduction-to-usability/
- 12. If the product is difficult to use, people will leave.
- 14. Run a simple and cheap user testing* 1. Get representative users (5 is enough) 2. Ask them to perform representative task 3. Shut up and let the users do the talking *You can test the prototype before you test the real product. The earlier you do the test, the better the result you’ll get. Read more: nngroup.com/articles/recruiting-test-participants-for-usability-studies/
- 15. #3 Low, middle, and high fidelity.
- 16. Relax. Don’t be in a hurry.
- 20. Exercise Let’s turn it into a wireframe using Balsamiq.
- 21. Lunch break Dhuhr - 13.00
- 24. UI has a visual aesthetic. Read more: en.wikipedia.org/wiki/Visual_design_elements_and_principles Image: https://upload.wikimedia.org/wikipedia/commons/9/94/Starry_Night_Over_the_Rhone.jpg
- 25. Human Interaction Factors (Learnability, Efficiency, Memorability, Error Rates, Satisfaction) Visual Aesthetic (Color, Tone, Shape, Pattern, Typography, Composition, Perspective, etc.) So, to make a great UI we have to consider …
- 27. Connect to the internet, and then … 1. Watch this video youtu.be/w2JUhDd0CAA 2. And this one youtu.be/Y0UEGsvcYvk 3. Choose your screen size 4. Go to material.google.com/ 5. New tab, and go to angrytools.com/android/ pixelcalc/ 6. We are ready to have some fun
- 28. Exercise Let’s do the magic!
- 29. #6 Creating a design documentation for the developers.
- 30. Deliver Deliver Test and evaluate, ready the concept for production and launch. • Final testing • Production and launch • Iterate
- 31. Deliver a UI Design documentation for Developers
- 32. The documentation might includes… 1. Sitemap 2. Flow 3. Components and Measurenment* *Font, Sizes and Spacing, and Color HEX. We can also include Shadows, Border Radius, etc. if needed.
- 35. Source: grahamtodman.co.uk/blog/wp-content/uploads/2013/10/POSTING-Styleguide-GT-Design-JGM-20130824.png Components - Fonts and color (example)
- 36. Source: material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0Bzhp5Z4wHba3RXpZUWE2bV9PdDQ/components_cards33.png Components - Spacing (example)
- 38. Give it to the Developers. Let them do their stuff. Always communicate.
- 40. 1. Stay up-to-date 2. Keep learning 3. Practice more 4. Join the community
- 41. Cool stuff • slideshare.net/tyawati • gramedia.com/conf-dont-make-me-think.html • usepanda.com • uxpin.com/studio/ebooks • blog.invisionapp.com/ • uxmag.com/ • uxbooth.com • design.google.com • pttrns.com • materialup.com • androidniceties.tumblr.com
- 43. Feel free to contact me… • P: +62 857-1405-8768 • E: bahnimahariasha@gmail.com
- 44. Thank you.