# UI design

UI design (user interface design) is the design of the visual and interactive layer of a product: layout, typography, color, components, and how each control looks and responds in every state.

Also called: User interface design, UI, Interface design, Visual design.

## In short

- UI design is the layer people see and touch, from layout and type to color and controls.
- Every component needs designed states, including hover, focus, disabled, loading, and error.
- Accessibility basics such as contrast, target size, and visible focus belong in the UI from the start.
- A [design system](https://www.choie.co/glossary/design-system) turns UI decisions into reusable parts so screens stay consistent.

## What UI design covers

UI design takes a working structure and makes it clear and usable on a real screen. It decides where things sit, how big they are, what draws the eye first, and what each control looks like when someone uses it. Good UI makes the next action obvious without anyone reading instructions.

- **Layout and spacing.** A grid and a consistent spacing scale, so related things look related.
- **Typography.** A small set of sizes and weights that make the hierarchy clear at a glance.
- **Color.** A palette where each color has a job, such as brand, text, surfaces, success, and error.
- **Components.** Buttons, inputs, menus, cards, and dialogs, each designed once and reused everywhere.
- **Feedback and motion.** How the interface confirms an action, shows progress, or explains a problem.

## States, the part people forget

A screen in a design file shows one moment. In use, every control moves through several states, and each needs a design. Missing states are where interfaces start to feel unfinished, because engineers have to guess and every guess is slightly different.

**Diagram: States one button needs.**

Button (One component, many moments) feeds:
- Default (At rest and ready to use)
- Hover (Pointer over it, on desktop)
- Focus (Reached by keyboard, clearly marked)
- Pressed (Confirms the tap landed)
- Disabled (Not available yet, ideally with a reason)
- Loading (Working, so no second tap)

_Inputs, menus, and cards need the same treatment. Designing these once in a shared component saves redesigning them on every screen._

Screens have states too. A search with no results or a form that failed to submit needs a design that tells the person what to do next. In Choie's prototype week, the first day names every screen and state of the one workflow being built, so the empty and error versions are designed instead of guessed.

## Accessibility basics every UI should meet

Accessible UI is mostly careful UI. A few checks catch the common problems, and they cost very little when they are part of the design from the first screen.

| Check | Common guideline | How to test it |
| --- | --- | --- |
| Text contrast | At least 4.5:1 for body text and 3:1 for large text (WCAG AA) | A contrast checker in your design tool or browser |
| Touch targets | 44 by 44 points on iOS (Apple), 48 by 48 dp on Android (Material Design) | Tap every control on a real phone |
| Visible focus | A clear focus style on every interactive element | Tab through the screen with a keyboard |
| Color as a signal | Never the only way to show status or errors | View the screen in grayscale |

> **Keep the focus ring.** Never remove the browser's focus outline unless you replace it with something at least as visible.

## How UI relates to UX and a design system

[UX design](https://www.choie.co/glossary/ux-design) decides how the product works, meaning the flows, the screens, and what each one contains. UI design decides how those screens look and respond. In practice they are designed together, and a UI decision often exposes a UX problem, like a form that turns out to need too many fields once it is laid out on a phone.

A [design system](https://www.choie.co/glossary/design-system) is where UI decisions are stored so they only get made once. Colors, type sizes, and spacing become named tokens, controls become shared components, and new screens are assembled from those parts. Without one, a product drifts as each new screen invents its own version of a button. Choie sets up [design systems](https://www.choie.co/services/design-systems) in design and in code at the same time, so the components on the screens are the components that ship.

## Common UI mistakes

- **Too many styles.** Several shades of gray and a long list of font sizes make a product look inconsistent, even when each screen looks fine alone.
- **Designing at one size.** A layout drawn for a wide monitor often breaks on a phone. Check every screen at phone width early.
- **Style over clarity.** Pale gray text and icon-only buttons look clean in a mockup and confuse people in use.
- **Static mockups as the spec.** Without states and behavior written down, engineers fill the gaps themselves during the [design handoff](https://www.choie.co/glossary/design-handoff).

Choie builds the interfaces it designs, so a component in the design file and the same component in the product stay in step. Examples are in [our work](https://www.choie.co/work).

## Common questions

### What is the difference between UI and UX design?

UI design is how a product looks and responds on screen, and UX design is how it works for the person using it. UX sets the flows and structure, and UI makes them clear and usable visually.

### What does a UI designer deliver?

Final screens, a set of components with all their states, and the color, type, and spacing styles behind them, usually in Figma. On a mature team that work feeds a shared design system.

### Is accessibility part of UI design?

Yes. Contrast, target size, focus states, and readable type are UI decisions, and they are much cheaper to get right in the design than to fix after launch.

### Is UI design only about making things look good?

No. Appearance matters, but the main job is clarity: making it obvious what each element is, what can be tapped, and what will happen next.

### How does Choie handle UI design during a build?

Every Friday of a build there is a new live link to use, so type sizes, tap targets, and states get judged on a real phone as well as in a design file.

Related: [UX design](https://www.choie.co/glossary/ux-design), [Design system](https://www.choie.co/glossary/design-system), [Web accessibility (WCAG)](https://www.choie.co/glossary/web-accessibility), [Design handoff](https://www.choie.co/glossary/design-handoff), [Product design](https://www.choie.co/glossary/product-design).

HTML: https://www.choie.co/glossary/ui-design