Web Designer interview questions

A grid gives page elements a shared structure for placement and sizing.

• Columns create repeatable horizontal positions for text, images, and controls.
• Gutters keep adjacent content from visually merging.
• Consistent grid alignment makes separate sections feel related.

Columns hold content, gutters separate columns, and margins protect the layout edges.

• A 12-column grid supports common divisions such as halves, thirds, and quarters.
• Wider gutters create stronger separation but leave less room for content.
• Outer margins stop text and controls from touching the viewport edge.

A spacing system limits gaps and sizes to a small, repeatable scale.

• An 8-point base produces values such as 8, 16, 24, and 32 pixels.
• Reusing the scale makes padding and section gaps visually consistent.
• A 4-point half-step can cover compact controls without creating arbitrary values.

A fixed-width container keeps one width, while a fluid container changes with its parent or viewport.

• Fixed widths offer predictable composition but can overflow narrow screens.
• Fluid widths use percentages or flexible sizing to consume available space.
• A fluid container with a max-width keeps large-screen text from stretching too far.

Alignment creates visual relationships between elements and reduces apparent disorder.

• Shared left edges make headings, paragraphs, and controls easier to scan.
• Center alignment suits short, isolated content but weakens long text blocks.
• Deliberate misalignment needs a clear hierarchy reason or it looks accidental.

Proximity signals that items placed near one another belong together.

• A label should sit closer to its input than to the field above it.
• Related card details need smaller internal gaps than the gap between cards.
• Spacing can define groups even without borders or background panels.

Whitespace separates groups, improves readability, and directs attention.

• Space around a primary action can make it more prominent without adding color.
• Larger gaps between sections signal a stronger content boundary.
• Whitespace does not have to be white; it is any unoccupied area.

Symmetrical balance mirrors similar visual weight, while asymmetrical balance offsets unequal elements.

• Symmetry often feels stable because both sides have comparable size and placement.
• Asymmetry can balance one large image against several smaller text elements.
• Color intensity and whitespace affect visual weight as much as physical size.

Visual rhythm comes from repeating and varying elements at recognizable intervals.

• Repeated card sizes, gaps, and heading styles establish a pattern.
• A larger section break can mark a deliberate change in that pattern.
• Random spacing values interrupt rhythm and make scanning less predictable.

Visual hierarchy shows which information should be noticed first, second, and later.

• Size, weight, contrast, position, and spacing can raise or lower emphasis.
• A page title should usually dominate supporting text and metadata.
• Too many equally strong elements leave the user without a clear entry point.

A focal point appears when one element differs clearly from its surroundings.

• A larger headline stands out when nearby text uses a smaller scale.
• A dark button on a light surface gains emphasis through tonal contrast.
• Making every element large or saturated removes the contrast that creates focus.

A typeface is the overall letter design, while a font is a specific style within that family.

• Inter is a typeface family.
• Inter Regular at a chosen size is a font selection.
• Weight and italic styles are separate fonts within the same typeface family.

Font size sets the text scale, while line height controls the vertical distance between baselines.

• Body text often starts near 16 pixels in browsers, but the typeface affects perceived size.
• A line height around 1.4 to 1.6 commonly gives multiline text enough breathing room.
• Very tight lines collide visually, while very loose lines break paragraph continuity.

Moderate line length helps the eye move to the next line without losing its place.

• Roughly 45 to 75 characters per line is a useful range for body copy.
• Very wide text columns make the return sweep difficult.
• Very narrow columns create frequent breaks and a choppy reading rhythm.

Font weight should separate levels of importance without turning every label bold.

• A semibold heading can contrast with regular body text while staying in one family.
• Small text may need a sturdier weight because thin strokes lose clarity.
• Using too many weights weakens consistency and can add unnecessary font files.

A useful type pairing combines clear contrast with compatible proportions and tone.

• A display face can handle headings while a restrained face supports long body copy.
• Similar x-heights, measured by the lowercase x, can make two families feel more harmonious at nearby sizes.
• Limiting the page to one or two families keeps hierarchy easier to control.

Kerning adjusts one letter pair, tracking adjusts spacing across text, and leading means line spacing.

• Kerning fixes awkward pairs such as A and V.
• Tracking can open a short uppercase label but usually harms body text when exaggerated.
• In web layouts, leading is controlled with the CSS line-height property.

A typographic scale is a limited set of related text sizes used across an interface.

• It assigns repeatable sizes to body text, labels, subheadings, and page titles.
• A modest ratio creates subtle hierarchy, while a larger ratio feels more dramatic.
• Reusing the scale avoids isolated sizes that are hard to maintain consistently.

Clear heading levels let readers scan the page and understand how sections nest.

• The page title should be visually distinct from section and subsection headings.
• Adjacent levels need enough difference in size, weight, or spacing to be recognizable.
• Visual styling should support the semantic H1 to H6 structure rather than contradict it.

RGB, HEX, and HSL can represent the same screen color through different controls.

• RGB exposes red, green, and blue channels and supports an alpha value for transparency.
• HEX is a compact notation that is convenient for copying exact color values between Figma and CSS.
• HSL separates hue, saturation, and lightness, which makes related lighter or less saturated colors easier to derive.