UI Designer interview questions

Visual hierarchy guides attention through deliberate visual differences.

• I would use size, weight, color, contrast, position, and spacing to show relative importance.
• The page title, current status, and primary action should be easy to find first.
• Supporting details should remain readable but receive less emphasis.

I would rebuild the hierarchy around the user's main task.

• First, I would identify the primary action and the information needed to complete it.
• I would group related content so the screen has a clear structure.
• I would strengthen one or two focal points and reduce the emphasis of secondary controls through scale, contrast, and placement.

A grid makes an interface easier to scan, maintain, and extend.

• Shared alignment lines create visual order across different content blocks.
• Predictable columns help new screens follow the same layout logic.
• I would choose margins, columns, and gutters for the target viewport rather than force every element into equal widths.

Breaking the grid is useful only when the exception has a clear purpose.

• It can create meaningful emphasis for an important element.
• It can also give an image or other media the wider area it needs.
• I would use the exception rarely and keep clear alignment anchors in the surrounding content.

Spacing should make relationships between elements visible.

• I would use smaller gaps within a group and larger gaps between separate groups.
• I would start with the product's existing spacing scale to maintain consistency.
• I would test the result with real labels and realistic content lengths.

An eight-point spacing system makes layout decisions more consistent and easier to communicate.

• It limits common spacing choices to a small, repeatable scale.
• The shared scale makes design handoff clearer because values are predictable.
• Smaller values can still support details such as icon alignment, but each exception should be intentional and documented.

I would reduce the density by clarifying structure before hiding controls.

• I would group settings by purpose and give each group a clear heading.
• I would separate frequent choices from advanced settings while keeping necessary controls discoverable.
• Before collapsing a section, I would check whether disclosure makes settings harder to find or compare.

Whitespace is functional when it explains structure and improves usability.

• It separates related groups and creates a comfortable reading rhythm.
• It gives important controls enough room to stand out.
• Its amount should reflect content relationships and viewport limits, not be added only to create a premium look.

I would use optical alignment when equal coordinates still look uneven.

• I would compare the visible shapes, not only their bounding boxes.
• Icons and letters can have uneven optical weight even when their measurements match.
• A small adjustment is appropriate if it improves perceived alignment at the actual display size.

The card layout should support variable content without making key actions move unpredictably.

• I would first decide whether aligned rows are important or natural card heights better fit the content.
• I would test long titles, missing images, and translated text rather than rely on ideal examples.
• I would place variable content in an area where its length does not shift primary actions unexpectedly.

A useful type hierarchy gives every text role a clear and consistent purpose.

• I would keep the number of roles limited so users can recognize them quickly.
• Roles should differ visibly through size, weight, line height, or color.
• Page titles, section headings, body text, labels, and metadata should keep the same treatment across screens.

I would choose body text settings by testing readability in the real viewing context.

• I would start with the product's existing type scale rather than introduce an isolated size.
• I would judge the text at the actual device size, not only on a zoomed design canvas.
• Line height should separate lines comfortably without making the paragraph feel like disconnected strips.

Too many font weights weaken hierarchy by adding differences without clear meaning.

• Text roles become harder to recognize when many weights look almost the same.
• The extra variation can create visual noise instead of useful emphasis.
• I would reserve stronger weights for clear accents and confirm that the chosen font renders them distinctly.

A long heading should wrap clearly without losing its place in the hierarchy.

• I would test the layout with a realistic worst-case heading rather than a short placeholder.
• I would keep a readable line length and avoid shrinking the text until it loses emphasis.
• The layout should allow enough height, and truncation is suitable only when the full heading is available elsewhere.

All caps can support short secondary labels, but it needs careful testing.

• I would check the label length, the font's legibility, and behavior across languages.
• I would also see whether adjusted letter spacing is needed for comfortable reading.
• I would avoid all caps for long text because it reads more slowly and can compete with headings.

Line length should support a steady reading rhythm.

• Very long lines make it difficult to find the beginning of the next line.
• Very short lines interrupt reading with too many line breaks.
• I would set a comfortable text measure and adapt surrounding columns instead of stretching body text across the viewport.

Action colors should create a clear priority without hiding secondary choices.

• I would give the primary action the strongest appropriate contrast.
• Secondary actions should remain easy to find but look quieter within the existing palette.
• I would also use shape, weight, or placement so the hierarchy does not depend on hue alone.

Color alone is not a reliable way to communicate status.

• People with color-vision differences may not distinguish the selected hues.
• Bright light or a low-quality display can also weaken the color signal.
• I would pair color with text, an icon, or another visible pattern that communicates the same status.

I would evaluate the exact color pairing and context rather than reject the brand color entirely.

• I would test the foreground against its background because contrast belongs to a pair, not an isolated color.
• I would also check the text size and every relevant interaction state.
• I could use a darker accessible shade for text and reserve the original brand color for larger surfaces or nonessential accents.

A neutral palette can create clear interface levels without making every distinction colorful.

• Different neutrals can organize surfaces, borders, primary text, and disabled content.
• Adjacent levels still need enough contrast to remain visually separate.
• I would reserve accent colors for distinctions that communicate priority or status.