0425-GDSC-TMU.pdf0425-GDSC-TMU.pdf0425-GDSC-TMU.pdf0425-GDSC-TMU.pdf
- 1. Proprietary and Confidential What is a {UI Designer} doing? User Interface Design 0425’24 GDSC TMU
- 2. Proprietary and Confidential Table of contents A Recap B Intro C Exercise D User Interface Design E Q&A F Go home
- 4. What is UX? User eXperience
- 5. Proprietary and Confidential Experience + Feeling Your 體驗 + 感受/感覺
- 6. UX Before Using/Doing After If you mention about ux, mostly ppl. will be here 👂👃 👄 😀🤬 😭😁 + 💬 UX Period
- 9. What is UI? User Interface
- 10. Proprietary and Confidential User Interface It is a process of design applied to physical products that are to be manufactured by mass production Industrial Design It focuses on the interfaces between people (users) and computers. Human–Computer Interaction (HCI) Software design is the process of defining software methods, functions, objects, and the overall structure and interaction of your code so that the resulting functionality will satisfy your users requirements. Software Design
- 16. Youtube ● Scrollable list in Figma ● How To Create Scrollbar Animation
- 17. Proprietary and Confidential User Interface Design D
- 18. Proprietary and Confidential Design As a user interface (UI) designer, your goal with design interfaces in software or computerized devices with its looks or style. ● Aesthetic ○ 10 Heuristic Evaluation ○ The Grid System, Golden Ratio ○ Typeface, Reading Experience ○ Color Palette ○ Inclusive design, Accessibility ● etc. User Interface Designer
- 20. Proprietary and Confidential 01 Visibility of System Status You Are Here indicators on mall maps show people where they currently are, to help them understand where to go next. Breadcrumbs Source: NN/g
- 21. Proprietary and Confidential 02 Match the Real World When stovetop controls match the layout of heating elements, users can quickly understand which control maps to which heating element. Disk, Save Source: NN/g
- 22. Proprietary and Confidential 03 User Control & Freedom Digital spaces need quick emergency exits, just like physical spaces do. Ask Source: NN/g
- 23. Proprietary and Confidential 04 Consistency & Standards Checkin counters are usually located at the front of hotels. This consistency meets customers’ expectations. Click Logo back to homepage Source: NN/g
- 25. Proprietary and Confidential 05 Error Prevention Guard rails on curvy mountain roads prevent drivers from falling off cliffs. Red for remind Source: NN/g
- 26. Proprietary and Confidential 06 Recognition rather than Recall It’s easier for most people to recognize the capitals of countries, instead of having to remember them. People are more likely to correctly answer the question Is Lisbon the capital of Portugal? rather than What’s the capital of Portugal? What is it? Source: NN/g
- 28. Proprietary and Confidential 07 Flexibility & Efficiency Regular routes are listed on maps, but locals with knowledge of the area can take shortcuts. Trello, Drag & Drop Source: NN/g
- 29. Proprietary and Confidential 08 Aesthetic & Minimalist Design An ornate teapot may have excessive decorative elements, like an uncomfortable handle or hard-to-wash nozzle, that can interfere with usability. User Interface Design Source: NN/g
- 30. For example Aesthetic & Minimalist Design
- 31. Proprietary and Confidential Must Know Visual Hierarchy
- 33. Proprietary and Confidential Must Know Visual Hierarchy
- 36. Proprietary and Confidential 09 Help users Recognize, Diagnose, & Recover from Errors Wrong way signs on the road remind drivers that they are heading in the wrong direction and ask them to stop. Spelling wrong Source: NN/g
- 37. Proprietary and Confidential 10 Help & Documentation Information kiosks at airports are easily recognizable and solve customers’ problems in context and immediately. Hi, Do you need help? Source: NN/g
- 38. Proprietary and Confidential The Grid System Easily arrange the layout, nice and clean, easy to read
- 39. Proprietary and Confidential The Grid System E.g. Books, Articles, and more. The Grid System E.g. 8, 12, and more
- 40. Proprietary and Confidential The Grid System In visual design, a grid system helps you align screen elements based on sequenced columns and rows. Like making a map, you apply the column-based structure of a grid system to guide your design, structuring your text, images and functions consistently throughout it so they can appear instantly recognizable elsewhere. ● Easy to Adjustment ● Easy to Read ● Clean Layout ● Consistency 1961, Graphic Design
- 41. Proprietary and Confidential The Grid System Grid System is a series of horizontal and vertical line that creates a framework to build a User Interface for multiple devices. Designers create Grids for better layouts which allow users to use the interface in a better way by adapting to multiple screen sizes. ● Web Design ● App Design ● Responsive Web Design What is Grid System in UI Design?
- 43. Proprietary and Confidential Golden Ratio Golden proportion, approximately 1.618.
- 53. Proprietary and Confidential Typeface Reading Experience
- 60. Proprietary and Confidential Color Palette Look & Feel
- 61. Proprietary and Confidential A UI, visual design B UI, visual design
- 67. Proprietary and Confidential Must Know Color principles
- 68. Proprietary and Confidential Must Know Color principles
- 69. Proprietary and Confidential Must Know Color principles
- 70. Proprietary and Confidential Must Know Color principles
- 71. Proprietary and Confidential Must Know Color principles
- 72. Proprietary and Confidential Must Know Color principles
- 73. Proprietary and Confidential Must Know Color principles
- 74. Proprietary and Confidential Must Know Color principles
- 75. Proprietary and Confidential Design System v.s. Component Library Standards and Experiences Consistent
- 76. Proprietary and Confidential Differences Standards and Experiences Consistent. At its core, a design system is a set of building blocks and standards that help keep the look and feel of products and experiences consistent. Design Systems A component library is a set of pre-made, tested, and well-documented UI components that can be easily reused across the user interface of a product. Component Library/UI Kit Marketing and Brand Assets. You may utilize the Women Techmakers brand assets as long as you follow our Brand Guidelines. Brand Guide
- 77. Proprietary and Confidential (UI) Component Library + Design Guideline (UI) Component Library + Design Guideline + Framework (UI) Component Library + Design Guideline + Framework (UI) Component Library + Design Guideline (Official) (UI) Component Library + Design Guideline (Official) Material Design
- 78. Proprietary and Confidential More, you should know… User Interface Design
- 79. Proprietary and Confidential Must Know Dont’s and Do’s
- 80. Proprietary and Confidential Must Know Dont’s and Do’s
- 81. Proprietary and Confidential Must Know Dont’s and Do’s
- 82. Proprietary and Confidential Must Know Dont’s and Do’s
- 83. Proprietary and Confidential Must Know Dont’s and Do’s
- 84. Proprietary and Confidential Must Know Dont’s and Do’s
- 85. Proprietary and Confidential Must Know Dont’s and Do’s Space
- 86. Proprietary and Confidential Must Know UX/UI Design Terms
- 87. Proprietary and Confidential Must Know UX/UI Design Terms
- 88. Proprietary and Confidential Must Know UX/UI Design Terms
- 89. Proprietary and Confidential Must Know UX/UI Design Terms
- 91. Proprietary and Confidential No Code Builders
- 95. Proprietary and Confidential Scan me or click hello, tech! Support Group