UI/UX Design

A low-fidelity visual sketch of a user interface showing layout, content hierarchy, and navigation without visual design (colours, fonts, images). Wireframes communicate structure quickly and are easy to change. Created before high-fidelity mockups.

"I'll share the wireframes for the checkout flow in Figma — they're low-fidelity so don't focus on colours or fonts yet, just confirm the layout and user flow are correct."

A high-fidelity static representation of the final UI, showing visual design (typography, colours, spacing, imagery) without interaction. Mockups communicate the intended visual design to developers and stakeholders before any code is written.

"The developer reviewed the mockup and flagged that the sidebar layout doesn't work on mobile — we updated the mockup before writing any code."

A clickable, interactive simulation of a product used to test user flows before building the real thing. Prototypes can be low-fidelity (paper, click-through wireframes) or high-fidelity (looks and behaves like the real product). Used in usability testing.

"We ran 5 user tests with the Figma prototype before starting development — users consistently missed the save button because it was below the fold on small screens."

A diagram showing the path a user takes through a product to complete a task, from entry point to final action. Maps decisions ($user makes a choice$), processes ($system performs an action$), and endpoints ($task complete$). Reveals missing states and edge cases.

"The user flow for password reset has 8 steps — we identified three points where users can get stuck: expired link, unrecognised email, and password validation errors without helpful messaging."

The practice of designing products usable by people with disabilities — visual (screen readers, colour contrast), motor (keyboard navigation, large tap targets), cognitive (clear language, consistent layout), and auditory (captions, transcripts). a11y is a numeronym: a + 11 letters + y.

"Our accessibility audit found three critical issues: interactive elements without keyboard focus styles, images without alt text, and form error messages not announced to screen readers."

Web Content Accessibility Guidelines — the international standard for web accessibility. Three levels: A (basic), AA (standard requirement for most organisations), AAA (highest, rarely fully achievable). WCAG 2.1 AA is the common target and is required by law in many regions.

"We target WCAG 2.1 AA compliance — this requires 4.5:1 minimum colour contrast for body text, all functionality available via keyboard, and descriptive focus indicators."

A collection of reusable components (buttons, forms, cards, navigation), design tokens (colours, spacing, typography), and guidelines that ensure visual and behavioural consistency across a product. Examples: Material Design (Google), Fluent (Microsoft), Carbon (IBM).

"New engineers can build features faster because our design system provides pre-built, accessible components — they don't design buttons from scratch, they use the standard 'Button' component with the documented variants."

A self-contained, reusable UI element: button, input field, dropdown, card, modal. In design systems, components have documented variants (primary/secondary/destructive button), states (default/hover/focus/disabled), and responsive behaviour.

"All form inputs in our product use the same Input component — it handles focus states, error messages, and label placement consistently without individual teams making local decisions."

A UI element (usually a button or link) that prompts users to take a specific action: "Sign up", "Download", "Start free trial". Effective CTAs use action verbs, contrast visually with the background, and appear at decision points in the user flow.

"The conversion rate on the landing page increased 18% after we changed the CTA from 'Submit' to 'Start my free trial' and moved it above the fold."

An approach where a single design adapts its layout, content, and interaction patterns to fit different screen sizes using flexible grids, fluid images, and CSS media queries. One codebase, multiple screen sizes.

"The navigation collapses into a hamburger menu on screens under 768px — that's our mobile breakpoint in the responsive design. Below 480px we also switch to a single-column card layout."

A UI colour scheme that uses dark backgrounds with light text, reducing eye strain in low-light environments and battery drain on OLED screens. Implemented in CSS using prefers-color-scheme media query or a manual toggle. Requires design tokens for both themes.

"Dark mode requires auditing all colours, not just swapping black and white — shadows, overlays, border colours, and semantic colours all need separate dark-mode values defined as CSS custom properties."

A placeholder UI that fills the page structure with grey shapes while content loads, shown instead of a spinner. Skeleton screens feel faster than spinners because they communicate content shape before data arrives.

"We replaced the loading spinner with skeleton screens — user perception of load time improved in testing because skeletons communicate 'content is coming' rather than 'please wait'."

A visual or physical property of an element that suggests how it should be used. A button with a raised appearance affords clicking; a text field affords typing. Poor affordances (flat buttons that look like text, invisible scroll areas) cause user errors.

"The card was clickable but had no visual affordance — no arrow, no colour change on hover, no underline. Users didn't know it was interactive. We added a hover state and a 'View details →' link."

A UI overlay that appears above the main content and requires user interaction before continuing. Used for: confirmations, alerts, complex forms. Modals trap focus (keyboard users can't tab outside), have a close button, and dismiss on Escape key. Use sparingly — they interrupt flow.

"The delete confirmation uses a modal — it blocks interaction with the rest of the page until the user confirms or cancels. We kept the modal text short: 'Delete this file? This cannot be undone.'"

A brief, unobtrusive notification that appears temporarily at the edge of the screen to confirm an action or show a status update. Unlike modals, toasts don't interrupt the user's flow. They auto-dismiss after 3–5 seconds but should also have a manual close button.

"After saving, a toast appears at the bottom-right: 'Changes saved' with a green checkmark — it automatically disappears after 4 seconds so the user can continue working without interaction."