Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UI Design Fundamental

1,810 views

Published on

Fundamental knowledge for UI Designer.
For more details, please reach me at hello@phowr.xyz

Published in: Design
  • Login to see the comments

UI Design Fundamental

  1. 1. UI DESIGN FUNDAMENTALPHOWR#aesthetics #usability 20 17 20 17
  2. 2. • Intentional Design • Interface without User is not User Interface • 3 pillars of UI Design • Aesthetics • Content • Interaction What’s in this course
  3. 3. • INTENTIONAL DESIGN • Interface without User is not User Interface • 3 pillars of UI Design • Aesthetics • Content • Interaction Where you are
  4. 4. Who are the audiences of the following sites and What are the purposes of them?
  5. 5. As a designer, what will you do to maximize your (company) benefits from the audiences?
  6. 6. Design everything intentionally UI Designer is a planner, not a creator. KEEP IN MIND
  7. 7. • Intentional Design • INTERFACE WITHOUT USER IS NOT USER INTERFACE • 3 pillars of UI Design • Aesthetics • Content • Interaction Where you are
  8. 8. What they needs Their behaviors Their preferences KNOW ABOUT USERS
  9. 9. WHAT USERS PERCEIVE FROM UI USER INTERFACE AESTHETICS INTERACTION CONTENT
  10. 10. • Intentional Design • Interface without User is not User Interface • 3 pillars of UI Design • AESTHETICS • Content • Interaction Where you are
  11. 11. Tell me about the aesthetics of the following designs
  12. 12. The Smith Work Table by Tom Bekkers
  13. 13. Holo Music Artist Page by Tom Koszyk
  14. 14. MyKia Concept by Tom Vranek
  15. 15. Why do you think that they are beautiful?
  16. 16. So, a beautiful design is a design that …?
  17. 17. Changes time over time Mostly comes from trends. If you can’t create trends, just follow them ABOUT AESTHETICS
  18. 18. FUTURISTIC ORNAMENTALISM
  19. 19. SIMLICITY & COMFORT
  20. 20. EXTRA DEPTH (WITH SEMI-FLAT DESIGN)
  21. 21. CUSTOM ILLUSTRATIONS
  22. 22. ANIMATIONS, GIFS & CINEMAGRAPHS
  23. 23. MICRO INTERACTIONS
  24. 24. INTEGRATED ANIMATIONS
  25. 25. OBNOXIOUS BRIGHT GRADIENTS
  26. 26. SEMI REALISTIC 3D
  27. 27. 3D METALIC & SOLID ELEMENTS
  28. 28. ONE COLOR 3D DESIGN
  29. 29. 80S – 90S COLOR PALETTES & PATTERNS
  30. 30. BIG BOLD TYPOGRAPHY
  31. 31. CREATIVE TYPOGRAPHY
  32. 32. PARTICLE BACKGROUND
  33. 33. M O D U L A R B L A N K S P A C E
  34. 34. SPLIT PAGE DESIGN
  35. 35. VIBRANT & SATURATED COLOR PAGE
  36. 36. MONDRIANISM
  37. 37. • Intentional Design • Interface without User is not User Interface • 3 pillars of UI Design • Aesthetics • CONTENT • Interaction Where you are
  38. 38. WHAT IS THIS SITE ABOUT?
  39. 39. Relevant & Useful Accurate & Structure Credible & Findable Scanable & Simple USER – CONTEXT - CONTENT
  40. 40. • Intentional Design • Interface without User is not User Interface • 3 pillars of UI Design • Aesthetics • Content • INTERACTION Where you are
  41. 41. Visibility Affordance Constraint Simplicity Feedback Consistency Learnability Tolerance Predictability Mapping
  42. 42. Visual Hierarchy Legibility & Readability Differentiate dissimilar things Communicate in user language VISIBILITY & SIMPLICITY
  43. 43. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet massa nibh, id laoreet nibh suscipit sed. Curabitur sit amet dictum metus. Nam vitae diam quis nulla efficitur rutrum vitae laoreet leo. Vestibulum pellentesque faucibus nisl, eget rhoncus ligula pharetra eleifend. Cras metus velit, convallis vitae elementum vitae, egestas eu eros. Sed eget metus vel est faucibus pulvinar vitae ullamcorper libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In commodo et dolor et tristique. Fusce lacus nisi, maximus id lectus eget, accumsan tincidunt augue. Phasellus consectetur, augue imperdiet lacinia malesuada, nulla erat ornare lorem, a dignissim nisi mi vel velit. Integer fermentum nec nibh non maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet massa nibh, id laoreet nibh suscipit sed. Curabitur sit amet dictum metus. Nam vitae diam quis nulla efficitur rutrum vitae laoreet leo. Vestibulum pellentesque faucibus nisl, eget rhoncus ligula pharetra eleifend. Cras metus velit, convallis vitae elementum vitae, egestas eu eros. Sed eget metus vel est faucibus pulvinar vitae ullamcorper libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In commodo et dolor et tristique. Fusce lacus nisi, maximus id lectus eget, accumsan tincidunt augue. Phasellus consectetur, augue imperdiet lacinia malesuada, nulla erat ornare lorem, a dignissim nisi mi vel velit. Integer fermentum nec nibh non maximus.
  44. 44. Visibility Affordance Constraint Simplicity Feedback Consistency Learnability Tolerance Predictability Mapping
  45. 45. Affordance Mapping PREDICTABILITY
  46. 46. Visibility Affordance Constraint Simplicity Feedback Consistency Learnability Tolerance Predictability Mapping
  47. 47. Keep informing actions, change of states… Error prevention and reduce cost of mistakes FEEDBACK & TOLERANCE
  48. 48. Visibility Affordance Constraint Simplicity Feedback Consistency Learnability Tolerance Predictability Mapping
  49. 49. Making similar things resemble one another Reducing the need for users to rethink and remember CONSISTENCY
  50. 50. ATOMIC DESIGN
  51. 51. • Intentional Design • Interface without User is not User Interface • 3 pillars of UI Design • Aesthetics • Content • Interaction Conclusion

×