TodayTools

UI and UX design flashcards

Design screens people understand at first glance and enjoy using.

Donate
Beginner friendly, starts from zero
Section
How to study
0
UI and UX designStart from zero · 1 of 12

What is UX design, in one plain sentence?

UX ( experience) design is planning how a product works so people can do what they came for easily, from the first tap to the last.

UX is the journey.
Show again
12 left
Got it

Tap to turn over. Swipe right if you know it, left to see it again.

All topics

What you will learn

  1. Start from zero

    • What UI and UX are4 cards
    • Key words6 cards
    • Getting ready2 cards

  2. Core basics

    • The design process4 cards
    • Visual basics6 cards
    • Interaction basics6 cards
    • Organising content2 cards

  3. Next steps

    • Research and testing6 cards
    • Components and states4 cards
    • Responsive and mobile3 cards
    • Accessible design3 cards
    • Content design2 cards

  4. Go deeper

    • Measuring UX3 cards
    • Ethics and dark patterns3 cards
    • Heuristics and cognition3 cards
    • Working with developers3 cards
    • Designing AI and complex products2 cards
    • Career and portfolio3 cards

Final test and certificate

10 questions drawn fresh from the whole topic, about 15 minutes. Sign in, score 80% or more and get a free certificate with your name and a public check link anyone can open, such as an employer or a teacher. Not signed in? Try a practice test from the cards.

Take the final test

About these cards

  • Reviewed 26 October 2026
  • CoversWCAG 2.2Material Design 3Apple HIG (2026)
How these cards are made

UI and UX design at a glance

UX design is planning how a product works for people; UI design is how its screens look and feel.

Think of a kitchen. UX is where the stove, sink and fridge go so cooking feels easy. UI is the colour of the cupboards, the shape of the handles and the labels on the jars.

Words you will meet

User
A real person who uses the product, not you or your team
Usability
How easily someone can do what they came to do
User research
Talking to and watching real users to learn what they need
Wireframe
A simple sketch of a screen showing layout, without colours or pictures
Prototype
A clickable model of the product used to test ideas before building
User flow
The steps a person takes to finish a task, like paying a bill
Accessibility
Making the product work for people with disabilities too
Contrast
How much text or icons stand out from the colour behind them

The steps

  1. 1. Start from zero (12 cards): What UI and UX are, why they matter and the key words of the craft.
  2. 2. Core basics (18 cards): The design process, visual basics, interaction rules and organising content.
  3. 3. Next steps (18 cards): Usability testing, components and states, mobile layouts, accessibility and microcopy.
  4. 4. Go deeper (17 cards): UX metrics, dark patterns and law, heuristics, developer handoff, AI products and your portfolio.
All 12 cards in Start from zero
What is UX design, in one plain sentence?
UX (user experience) design is planning how a product works so people can do what they came for easily, from the first tap to the last.
What is UI design, and how is it different from UX?
UI (user interface) design is how the screens look: buttons, colours, text and icons. UX decides what should happen; UI makes it clear and pleasant to see.
Where do you meet good and bad UX in daily life?
A lift with clearly marked buttons, a ticket machine that confuses you, a form that deletes everything after one mistake. You notice bad UX more because good UX feels invisible.
Why do companies pay for UX design?
Clear products sell more and cost less to support. If Arjun cannot find the pay button, the shop loses a sale and gains a support call.
Who is the user, and why is it never just you?
The user is the real person who will use the product. You already know how it works, so you cannot see where a newcomer gets stuck. You must ask and watch others.
What does usability mean?
Usability is how easily someone can do a task: can they finish it, how fast, with how many mistakes, and do they feel good after.
What is user research?
User research means learning from real people by talking to them, watching them use something, or reading what they do. It turns guesses into facts.
Wireframe or prototype: what is the difference?
A wireframe is a plain sketch of where things go on one screen. A prototype links screens together so people can click through and try the idea.
What is a user flow?
A user flow is the list of steps to finish a task, like open app, pick a movie, choose seats, pay, get ticket. Drawing it shows extra or missing steps.
What do accessibility and contrast mean in design?
Accessibility means people with poor sight, hearing, movement or memory can use the product too. Contrast is how much text stands out from its background, a big part of it.
What do you need before you start?
Paper and a pen, or a free design tool, and the habit of asking why. No drawing talent or coding is needed to begin.
What will you be able to do after this topic?
Talk to users, sketch flows and screens, build a clickable prototype, test it, check accessibility and hand clear designs to developers.
UI and UX design cheatsheet

Numbers to remember

  • 4.5 : 1 Contrast for normal text
  • 3 : 1 Large text, icons, borders, focus rings
  • 24 x 24 px WCAG 2.2 minimum target
  • 44 pt / 48 dp Apple and Material target size
  • 16 px, 1.5 Body text size and line height
  • 45 to 75 chars Comfortable line length
  • 5 users One usability test round

Process

  • Empathise Learn about users
  • Define Write the problem statement
  • Ideate Many ideas before choosing
  • Prototype Cheapest version to try
  • Test Watch real users try it

Research methods

  • Interview Why people act as they do
  • Survey How many share a view
  • Usability test Where a design fails
  • Card sort How users group content
  • Tree test Can they find it in the menu
  • A/B test Which live version performs better

Component states

  • Default Resting look
  • Hover / pressed Pointer and tap feedback
  • Focus Visible keyboard position
  • Disabled Not available, say why nearby
  • Loading Work in progress
  • Error / empty Problem or nothing yet, with next step

Error message formula

  • What happened Payment did not go through
  • Is it safe Your money has not been taken
  • What now Check your PIN and try again
  • Where Show it next to the field
Donate