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.
Understanding UI/UX Design Principles
Before drawing individual screens, map the path a person takes from a goal to a result. This is a user flow. A student buying a ticket, submitting homework, or changing a password may need several steps.
Each step should answer one clear need. List what the person knows, what they must choose, and what can go wrong.
This planning prevents screens from becoming collections of buttons with no clear route through them. Navigation should match the words and categories people already expect.
Visual interface design has links to older forms of visual communication. Manuscripts used headings and margins to organize reading. Posters used scale, type, and empty space to attract attention from a distance.
Public signs used familiar symbols so people could act quickly. Digital designers use similar ideas, but a screen changes as someone interacts with it. A layout must work not only as a still image but through many states, including an empty search, a completed form, a failed payment, or a slow connection.
People usually scan a page before reading closely. They look for landmarks such as a page title, a main action, and the current location in a menu. Too many equally strong elements force the eye to work harder.
Grouping can show which information belongs together without adding boxes around everything. Designers often reveal details only when they are needed. This is called progressive disclosure.
It keeps a first screen simpler while leaving important controls available at the right moment. Color should support meaning, not carry the whole message, since some users cannot distinguish certain colors.
Accessibility includes more than readable text and tap size. Some people use a keyboard instead of a mouse. Some use a screen reader that reads page content aloud.
A clear heading structure, useful button names, visible keyboard focus, captions, and text descriptions for meaningful images make a major difference. Access needs can be permanent, temporary, or situational.
A person with an injured hand, bright sunlight on a phone, or a noisy bus faces barriers too. Designing for these conditions often improves the experience for everyone.
Testing is most useful when it watches real behavior rather than collecting general opinions. Give a participant a realistic goal and stay quiet while they attempt it. Notice where they pause, reread, choose the wrong control, or ask for help.
A person saying that a design looks good does not prove that they can use it. Record patterns across several people, then rank problems by how often they occur and how much they block a task.
Change one important issue at a time when possible. In a critique, point to evidence from the flow or test, not only personal taste.