Web & Mobile Design

Web & Mobile Design — questions and answers

What's the difference between designing for native mobile apps and responsive websites?

Native apps follow platform conventions—iOS uses bottom tab bars and swipe gestures, Android favours navigation drawers and floating action buttons. Responsive websites adapt a single layout across breakpoints and rely on browser capabilities. Native designs can assume consistent gestures and system fonts, while responsive work must handle varied browsers, input methods and unpredictable viewport sizes.

What does a design handoff include for developers?

A handoff typically includes screen designs at required densities, component specifications with measurements in pixels or density-independent units, colour values as HEX or RGB, typography with font names and weights, spacing defined in a grid or increment system, interaction states like hover and disabled, and notes on animations or transitions. Many designers also provide clickable prototypes showing flow.

How do breakpoints get decided in responsive design?

Breakpoints are chosen based on where a layout begins to fail rather than targeting specific devices. Common approaches include starting with a mobile design and adding breakpoints when content becomes too stretched or cramped, typically around 768px for tablets and 1024px or 1200px for desktops. Some designers define breakpoints by testing actual content across a range of widths.

Why do mobile designs specify touch target sizes?

Fingers are less precise than mouse cursors. Apple's Human Interface Guidelines recommend a minimum of 44×44 points for tappable elements, while Material Design suggests 48×48 density-independent pixels. Smaller targets lead to mis-taps and frustration. Designers ensure buttons, links and controls meet these thresholds even when the visible icon or text is smaller, using padding to expand the interactive area.

What's the purpose of a design system in this kind of work?

A design system provides reusable components—buttons, form fields, cards, modals—with consistent styling and behaviour across an entire product. It includes spacing scales, colour tokens and typography rules so designers and developers work from a shared vocabulary. This speeds up production, reduces inconsistency and makes updates easier when one change propagates through all instances of a component.

How does designing for dark mode affect the process?

Dark mode requires separate colour palettes where backgrounds darken and text lightens, but not simply inverting values. Shadows become less visible, so elevation often relies on lighter surfaces instead. Colours need adjusting to maintain sufficient contrast, and pure white or black are usually avoided in favour of off-tones that reduce eye strain. Designers typically create and maintain both themes in parallel.