CheatSheetsHero

Browse / UI/UX Design Cheatsheet

March 02, 2025 23:03
accessibility
design
ui
usability
ux
Download PDF
Missing something?

UI/UX Design Cheatsheet

A comprehensive cheatsheet covering essential UI/UX design principles, processes, and best practices. This guide provides a quick reference for designers to create user-friendly and engaging digital experiences.

Core Principles

Usability Heuristics (Jakob Nielsen)

Visibility of system status: Keep users informed about what is going on, through appropriate feedback within reasonable time.

Match between system and the real world: Speak the users’ language, using words, phrases and concepts familiar to the user.

User control and freedom: Offer users an ‘emergency exit’ to leave unwanted states without having to go through an extended dialogue.

Consistency and standards: Follow platform conventions and industry standards.

Error prevention: Eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

Recognition rather than recall: Minimize the user’s memory load by making elements, actions, and options visible.

Flexibility and efficiency of use: Allow experienced users to tailor frequent actions. Accelerators – unseen by the novice user – may often speed up the interaction for the expert user.

Aesthetic and minimalist design: Dialogues should not contain information which is irrelevant or rarely needed.

Help users recognize, diagnose, and recover from errors: Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

Help and documentation: Provide help that can be easily searched, is focused on the user’s task, list concrete steps to be carried out, and is not too large.

Key UX Principles

Learnability

How easy is it for users to accomplish basic tasks the first time they encounter the design?

Efficiency

Once users have learned the design, how quickly can they perform tasks?

Memorability

When users return to the design after a period of not using it, how easily can they reestablish proficiency?

Errors

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?

The UX Design Process

Typical UX Design Process Steps

1. Research: Understand user needs, behaviors, and goals through methods like user interviews, surveys, and competitive analysis.

2. Analysis: Analyze research data to identify patterns, insights, and opportunities for design improvements.

3. Design: Create wireframes, prototypes, and user flows to visualize the user experience and test different design solutions.

4. Testing: Evaluate design solutions with real users to identify usability issues and gather feedback for iterative improvements.

5. Implementation: Collaborate with developers to implement the design and ensure it meets user needs and business goals.

6. Evaluation: Continuously monitor and evaluate the user experience to identify areas for further optimization and improvement.

Common UX Deliverables

User Personas

Representations of target users, based on research.

User Flows

Diagrams showing the steps a user takes to complete a task.

Wireframes

Low-fidelity prototypes outlining the structure and layout of a page.

Prototypes

Interactive models used for testing and validation.

Usability Testing Reports

Documents summarizing the findings of usability tests.

Style Guides

Documents outlining the visual and interaction design standards.

Research Methods

User Interviews

One-on-one conversations to gather in-depth insights.

Surveys

Quantitative data collection from a large audience.

Usability Testing

Observing users interacting with a product or prototype.

A/B Testing

Comparing two versions of a design to see which performs better.

Card Sorting

Users organize topics into categories to inform information architecture.

UI Design Principles

Visual Hierarchy

Arrange elements to guide the user’s eye in order of importance.

  • Size: Larger elements attract more attention.
  • Color: Use color to highlight important elements.
  • Contrast: High contrast elements stand out.
  • Spacing: Use spacing to group related elements.

Gestalt Principles

Proximity

Elements that are close together are perceived as a group.

Similarity

Elements that share visual characteristics are seen as related.

Closure

The mind fills in gaps to create complete figures.

Continuity

Elements arranged on a line or curve are perceived as related.

Figure/Ground

The eye differentiates an object from its surrounding area.

Accessibility

WCAG (Web Content Accessibility Guidelines):

  • Perceivable: Information and UI components must be presentable to users in ways they can perceive.
  • Operable: UI components and navigation must be operable.
  • Understandable: Information and the operation of the UI must be understandable.
  • Robust: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

Color Contrast: Ensure sufficient contrast between text and background (minimum 4.5:1 for normal text, 3:1 for large text).

Keyboard Navigation: Make sure all interactive elements can be accessed and operated using a keyboard.

Alternative Text: Provide descriptive alternative text for images.

UI Design Patterns

Navigation Patterns

Breadcrumbs

Show the user’s location in the site hierarchy.

Tabs

Organize content into distinct sections.

Mega Menus

Large, multi-level menus for complex navigation.

Pagination

Divide content into discrete pages.

Input & Feedback Patterns

Autocomplete

Suggest options as the user types.

Progress Indicators

Show the status of a process.

Tooltips

Provide contextual help on hover.

Confirmation Messages

Confirm successful actions or warn about potential errors.

Layout Patterns

Cards

Content containers that group related information.

Lists

Display structured data in a vertical format.

Grids

Arrange content in a two-dimensional structure.

Full-screen Takeovers

Overlay the entire screen with a modal or notification.