Information architecture, wireframes and prototypes

Information architecture (IA)

IA is how content is organised, labelled and navigated.

• Sitemaps show the structure of screens.
• User flows show the steps to complete a task, including decisions and error paths ("Apply → not logged in → sign up → verify email → back to the job with the form pre-filled").
• Navigation patterns: bottom tabs (3–5 top-level destinations on mobile), side nav (many sections on desktop apps), hub and spoke, search-first.
• Use the users' language for labels (card sorting reveals it).

Wireframes

Low-fidelity layouts showing structure and priority without visual polish. Start on paper or in Figma with grey boxes. Explore several options quickly: the point is to decide what goes on the screen and in what order of importance.

Ask for each screen: What is the user trying to do here? What's the primary action? What information do they need to decide? What happens on empty, loading and error states?

Prototypes

Interactive simulations to test flows before building:

• Low fidelity (clickable wireframes): test structure and flow cheaply.
• High fidelity: realistic visuals and interactions; test details, and present to stakeholders.

Figma skills interviewers expect

• Frames and Auto Layout (responsive stacks with padding and spacing: the single most important Figma skill).
• Components and variants (a button with sizes, states and icon options), instances with overrides.
• Styles/variables for colours, typography, spacing and modes (light/dark).
• Constraints and layout grids for responsive designs.
• Prototyping: interactions, smart animate, overlays, flows.
• Dev Mode / handoff: inspect, measurements, exporting assets, naming layers clearly.

Check yourself

• Draw the user flow for resetting a forgotten password, including errors.
• Why start with low-fidelity wireframes?
• What problem does Auto Layout solve?