UI Design

UI design, short for user interface design, is the discipline of shaping the visual and interactive layer of a digital product: websites, apps and software. It decides what people see and touch, from a single button to the grid of an entire page. You will also see it called interface design.

The building blocks

• Layout: grid, margins, spacing, alignment, how blocks are organized.
• Visual hierarchy: what is seen first, second and last, through size, contrast, color and position.
• Typography: typefaces, sizes, line heights, line length.
• Color: the palette and the roles colors play (action, warning, success).
• Components: buttons, inputs, menus, cards, tabs, modals.
• Icons and imagery in one coherent style.
• Micro-interactions: the small motion that confirms a click or flags an error.

The states people forget

A button is not drawn once. It exists at rest, on hover, when pressed, in keyboard focus, disabled and loading, and sometimes in error. A form field has its own set (empty, filled, active, invalid, read-only), and so does a list (empty, loading, full, failed). States are where an interface either reassures or annoys. A mockup that shows only the ideal case leaves the developer to invent the rest, and it shows.

Principles that hold an interface together

• Rank things. One main action per screen, clearly visible; secondary actions stay quieter.
• Stay consistent. The same element looks and behaves the same everywhere, which is the job of a design system.
• Give feedback. Every action produces a visible sign: a state, a message, a transition.
• Protect legibility. Readable text size, strong enough contrast, reasonable line length.
• Use space on purpose. Margins are not wasted room. They group and separate.
• Remove before adding. Every element costs attention, and anything that does not serve the screen’s goal is too much.

From wireframe to developer handoff

UI design comes after structure. The wireframe settles where things go, the mockup gives them their look, the UI kit gathers the reusable components, and the prototype lets people test the flow. The last step is the handoff: components, their states, color and spacing variables, and responsive behavior at each screen size. The more precise the handoff, the fewer surprises during build.

Website, mobile app, business software: different conventions

A website interface adapts to screens that range from a phone to a large monitor, and is often read by skimming. A mobile app assumes thumb gestures, more generous touch targets and platform conventions: Apple publishes its Human Interface Guidelines and Google its Material Design. Business software shows dense information to people who use it eight hours a day, so efficiency matters more than visual flourish. Knowing the context of use changes element size, the place of navigation and the level of detail that is acceptable.

Accessibility is part of the job

A beautiful interface that people cannot read has failed. A few markers from the W3C accessibility rules (WCAG, consulted in October 2026): a minimum contrast of 4.5:1 between body text and its background (level AA), a tap or click target of at least 24 by 24 CSS pixels under WCAG 2.2, a visible keyboard focus, and no information carried by color alone, so an invalid field should not simply turn red. These constraints belong in the mockup, not in the final review. Our article on color for color-blind users gives concrete examples, and the web accessibility entry sets the frame.

Tools of the trade

Figma has become the reference for drawing interfaces and working together in real time, with Sketch, Framer and the open-source Penpot as alternatives. To study real interfaces, libraries such as Mobbin collect screenshots of existing apps. On Webflow, UI design takes shape directly in the visual editor and the reusable components: design in Figma, then carry the variables and components into Webflow so the live site matches the mockup.

Is UI design still a good bet with AI around?

Design tools can now generate a first interface draft from a description. That helps with exploring options and helps less with sustaining a product: consistency between screens, contrast, states and fit with the brand are still decisions to make and to check. What shrinks is the blank-page effort, not the judgment. We unpack what these tools change in our article on Figma AI in 2026.

Working as a UI designer

A UI designer works alongside the UX designer, who defines journeys and structure, and with developers, to whom the components are handed over. The job rewards mastery of type, color and layout, but above all consistency at scale: a real product has hundreds of screens and states. In small teams, one person often covers both UX and UI, which brings the role close to UX design without merging the two.

To design or redesign the interface of a site or product, see our custom web design expertise and our UX/UI and Product design team.