This page needs a newer browser to run its tools. You can still read everything here.

Visual design for interfaces interview questions

Interview questions on visual design for interfaces: short warm-ups, then what each harder question tests, the first step of a good answer and its follow-ups.

8 questions: 3 warm-ups and 5 with model answers · Levels: Fresher to staff

Warm-up questions

Short questions with short answers, each answered in full.

Fresher to mid

How do you decide which action on a screen is the primary one?

Answered in the lesson Visual hierarchy, layout and grids
Fresher to mid

Why use a spacing scale instead of choosing each gap by eye?

Answered in the lesson Visual hierarchy, layout and grids
Fresher to mid

How do you pick the body text size for a new product?

Answered in the lesson Typography for interfaces

Questions with model answers

What each question tests, the first step of a good answer and the follow-ups to expect.

Mid to senior

On Ward Desk's complaint page, a department head asks for Escalate, Close and Add comment to be filled, same-size primary buttons, "so officers never miss one". Officers use the page forty times a day. What do you do?
What it tests

Choosing a primary action from the task, ranking the rest with fewer levers, and settling the disagreement with evidence rather than taste.

First step

Ask what an officer does most on this page and what each button costs when pressed by mistake. Then rank the three actions on those two facts before you touch any style, and decide how you would check the ranking with officers.
Follow-ups
- Close ends the complaint for good. Does it get the same style as Add comment?
- The head insists on three equal buttons. What do you test, and what result would change your mind?
- The page is used on a phone at 360 px. What changes?
From the lesson Visual hierarchy, layout and grids
Model answer, Pro. Model answers open with any pass; prices are in the notice on this page.
Opening the model answers with your pass…
Model answers open with any MySmartCoPilot pass.
Pro pass · 1 week₹79$2.99
30 days₹179$5.99
1 year₹1,699$45
One payment; a pass never renews. The price shown is the total you pay: no fees or charges are added at checkout.
Passes can’t be bought right now, so the model answers can’t be opened at the moment. If you have a pass, enter your licence key.
Choose a pass I have a licence key
It also opens every other in-depth part in Learn and every Pro tool. Sales are final, except where the law gives you a right to withdraw, for example in the EU and the UK (refund policy).
In the answer:
- Model answer
- Common mistakes
- Rubric
- Variants
- about 3 minutes
Mid to staff

A Ward Desk dashboard has three columns. A CSS grid rule puts the Urgent column on the left, though the code lists it last. A keyboard tester says the tab order jumps. What do you check, and what do you change?
What it tests

Knowing why the code order matters, checking order against position at each width, and fixing the markup rather than patching the focus.

First step

List the blocks in code order and in screen order at each width the layout changes, and mark where they differ. Then ask whether the order carries meaning on this dashboard, since that decides how serious the difference is.
Follow-ups
- At 360 px the columns stack. Does the same code order still work?
- A colleague proposes adding tabindex values to fix the jump. What is wrong with that?
- How would you stop the problem coming back after the fix?
From the lesson Visual hierarchy, layout and grids
Model answer, Pro.
In the answer:
- Model answer
- Common mistakes
- Rubric
- Variants
- about 3 minutes
Mid to senior

Ward Desk officers write reply letters in a template set at 13 px, line height 1.3, across a 1,100 px column. Officers say they tire by the afternoon, and a manager wants 18 px type to fix it. What do you check and change?
What it tests

Separating size, line length and line height, using numbers with sources, and weighing the cost of longer pages before deciding.

First step

Work out the characters per line of the current template and compare it with the limit you would hold it to. Then list what the manager's single change would fix and what it would leave, before you propose a different set of values.
Follow-ups
- The legal team wants the letter to stay on one printed page. How does that change your answer?
- Officers on small laptops see the column at 900 px. What happens to your numbers?
- How would you check that the new template is actually easier to read?
From the lesson Typography for interfaces
Model answer, Pro.
In the answer:
- Model answer
- Common mistakes
- Rubric
- Variants
- about 3 minutes
Mid to staff

MealBox status chips in an order table are 28 px tall. A tester who enlarged the browser text to 200 % sees the labels cut off. The engineer says it is an edge case and not worth fixing. What do you do?
What it tests

Linking the symptom to a fixed height, citing the criteria that apply, and proposing a fix that follows the content.

First step

Reproduce the cut at 200 % and at one more setting, and read off which property sets the chip's height. Then find out which criteria cover the case and who is affected, so that your answer to the engineer is about people and not about taste.
Follow-ups
- The table has 40 rows and a long label would make some rows taller. Is that acceptable?
- How would you stop the same fault returning in other components?
- The designer asks for the chips to stay one line. What are the options?
From the lesson Typography for interfaces
Model answer, Pro.
In the answer:
- Model answer
- Common mistakes
- Rubric
- Variants
- about 3 minutes
Senior to staff

Ward Desk's Hindi buttons look fine in the design file, but on devices the tops of some vowel signs are cut off. The English buttons are fine. The designer says the font is the same. How do you find the cause and fix it?
What it tests

Reasoning from line box and font metrics rather than guessing, checking more than one script, and fixing the system, not one button.

First step

Compare what differs between the design file and the device: the line height, the container's height and what clips. Then ask which numbers about the font you could read directly, so that you reason about the cut with measurements and not with screenshots.
Follow-ups
- Bengali and Tamil buttons ship next quarter. What do you reuse and what do you remeasure?
- Engineering suggests overflow visible. What are the risks?
- How would you put this check into the team's workflow?
From the lesson Typography for interfaces
Model answer, Pro.
In the answer:
- Model answer
- Common mistakes
- Rubric
- Variants
- about 3 minutes

All UI/UX Design interview questions · The UI/UX Design track

Warm-up questions

How do you decide which action on a screen is the primary one?

Why use a spacing scale instead of choosing each gap by eye?

How do you pick the body text size for a new product?

Questions with model answers

On Ward Desk's complaint page, a department head asks for Escalate, Close and Add comment to be filled, same-size primary buttons, "so officers never miss one". Officers use the page forty times a day. What do you do?

A Ward Desk dashboard has three columns. A CSS grid rule puts the Urgent column on the left, though the code lists it last. A keyboard tester says the tab order jumps. What do you check, and what do you change?

Ward Desk officers write reply letters in a template set at 13 px, line height 1.3, across a 1,100 px column. Officers say they tire by the afternoon, and a manager wants 18 px type to fix it. What do you check and change?

MealBox status chips in an order table are 28 px tall. A tester who enlarged the browser text to 200 % sees the labels cut off. The engineer says it is an edge case and not worth fixing. What do you do?

Ward Desk's Hindi buttons look fine in the design file, but on devices the tops of some vowel signs are cut off. The English buttons are fine. The designer says the font is the same. How do you find the cause and fix it?