UI/UX design principles help students create digital products that are clear, useful, and pleasant to use. UI focuses on the visual interface, while UX focuses on the user's full experience completing a task. This cheat sheet helps students plan screens, organize information, and evaluate whether a design supports real users.
It is useful for app mockups, website layouts, portfolio projects, and design critiques.
The most important ideas are hierarchy, consistency, accessibility, feedback, and usability. Strong interfaces guide attention with size, contrast, spacing, and alignment. Good UX reduces friction by making tasks easy to understand, complete, and recover from if something goes wrong.
Designers improve their work by testing with users, measuring task success, and revising based on evidence.
Key Facts
- Visual hierarchy rule: make the most important action the most noticeable using size, contrast, color, position, or spacing.
- Contrast rule: important text and controls should stand out clearly from the background and nearby elements.
- Consistency rule: repeated actions should use the same labels, colors, icons, and placement across screens.
- Accessibility rule: body text should usually be at least 16 px on screens, and interactive targets should be large enough to tap accurately.
- Spacing rule: group related items close together and separate unrelated items with more white space.
- Feedback rule: every user action should produce a visible response, such as a loading state, confirmation message, error message, or changed button state.
- Usability testing formula: task success rate = successful attempts / total attempts x 100.
- Error prevention rule: use clear labels, helpful constraints, confirmation for destructive actions, and undo when possible.
Vocabulary
- UI
- UI, or user interface, is the visual and interactive part of a product that a person sees and uses.
- UX
- UX, or user experience, is the overall experience a person has while trying to complete a goal with a product.
- Wireframe
- A wireframe is a simple layout sketch that shows structure, content areas, and navigation before detailed styling is added.
- Visual Hierarchy
- Visual hierarchy is the arrangement of elements so users notice the most important information first.
- Affordance
- An affordance is a visual clue that suggests how an object can be used, such as a button looking clickable.
- Usability
- Usability is how easily, efficiently, and successfully a user can complete tasks in a product.
Common Mistakes to Avoid
- Making every element look important is wrong because users cannot quickly identify the main action or next step.
- Using color alone to show meaning is wrong because some users may have color vision differences or low contrast screens.
- Changing button styles for the same action is wrong because inconsistency makes users relearn the interface on each screen.
- Crowding the layout with too much content is wrong because weak spacing makes groups unclear and increases cognitive load.
- Skipping user testing is wrong because a design that seems obvious to the creator may confuse real users.
Practice Questions
- 1 A signup page has 20 test users, and 15 complete the form without help. What is the task success rate?
- 2 A mobile menu has 8 items, but testing shows users only use 3 regularly. What percentage of the menu items are regularly used?
- 3 A button is 32 px tall, and the design guideline requires a minimum tap target of 44 px. How many pixels must be added to meet the guideline?
- 4 A checkout screen uses three different colors for primary buttons on three steps. Explain which UI/UX principle is being broken and how to fix it.