All jobs / UX / UI designer

UI Design interview questions

UI Design questions a UX / UI designer can be asked, from first job to senior. Open one to see the strongest answer and why it works.

  1. How do you set type on a page so the hierarchy reads without shouting?

    The strongest answer: A small scale — a few sizes with clear steps between them — plus weight, colour and space to separate the levels, so two levels never look nearly the same

    Why it works: Right — few steps, big enough to be deliberate, with weight and space doing work alongside size.

    • A few sizes, clear steps.
    • Define the scale first.
    • Use weight, colour and space too.
    • Never fix layout by shrinking text.

  2. A screen has five equally loud buttons. What is wrong?

    The strongest answer: There is no primary job — I pick one action for this moment and demote the rest

    Why it works: Exactly. One moment, one primary. More, all-red, and unlabelled hamburgers are how you hide the job.

    • One primary action per moment.
    • Demote the rest.
    • Do not add more equals.
    • Do not hide them without a label.

  3. You are building the palette for a product. How many colours, and what is each one for?

    The strongest answer: A neutral ramp for surfaces, text and borders, one accent for the primary action, and a small status set — each with a named role, so nobody picks a hue by taste later

    Why it works: Exactly — roles first, hues second; that is what makes a palette survive the second designer.

    • Name roles, not favourite hues.
    • One neutral ramp for surfaces and text.
    • One accent for the primary action.
    • A small, defined status set.

  4. Who owns the words on a button?

    The strongest answer: Design, with whoever writes — the verb is the action; I do not leave “submit” on everything because the component defaulted

    Why it works: Exactly. A verb people can do. Defaults, icon-only, and paragraph-buttons fail the tap.

    • Own the verb.
    • Do not ship component-default “submit.”
    • Icons ≠ the label.
    • Do not put a paragraph on a button.

  5. Your spacing values are 6, 7, 10, 13 and 18 px. What do you do, and why does it matter?

    The strongest answer: Snap them to a small scale built on one step, such as 4 or 8 — arbitrary values cannot be reproduced, reviewed or tokenised, and the page reads as noise instead of rhythm

    Why it works: Right — a scale is what turns spacing into a decision you can name, hand over and reuse.

    • Spacing is a scale, not a feeling.
    • Pick one step, build the scale.
    • Snap every gap onto it.
    • Tokenise the scale.

  6. The product now has icons from three sources: one set outlined, one filled, and two drawn by hand.

    What do you fix first, and what rule do you leave behind?

    The strongest answer: One set, one optical size and one stroke weight on a shared grid — plus a rule that an icon never carries meaning alone without a label or an accessible name

    Why it works: Exactly — consistency is a stated system rule, and an icon is shorthand, never the only label.

    • One set, one weight, one grid.
    • Choose a single icon source.
    • Match optical size and stroke.
    • Never let an icon label itself.

  7. Errors sound like a compiler. What do you change?

    The strongest answer: The words: human, specific, next step — I do not add a sad illustration and keep the compiler voice

    Why it works: Exactly. Words first. Sad art, more jargon, and blame fail the moment.

    • Human, specific, next step.
    • Do not decorate a compiler error.
    • Do not add jargon for “precision.”
    • Do not blame the user.

  8. Everything is bold. What did you lose?

    The strongest answer: A reading order for the job — I demote until one thing leads, I do not add more bold to “emphasise”

    Why it works: Exactly. Lead with one. More bold, more colour, smaller type, and invented 9/10s hide the job.

    • One thing leads.
    • Demote the rest.
    • Do not bold-everything.
    • No invented hierarchy score.

  9. What is a layout grid actually for, and when is breaking it the right call?

    The strongest answer: It makes independent screens line up and gives handoff a shared vocabulary; I break it deliberately for a full-bleed element or content that will not fit, and I say that I did

    Why it works: Right — the grid is a contract between screens and with engineering, so an exception is announced, not silent.

    • A grid is a shared contract.
    • Set columns, gutters and margins.
    • Break it deliberately, say why.
    • Note the exception in handoff.