UI design, short for user interface design, is the work of shaping everything a person sees and touches in a product. That covers the buttons, the screens, the type, the colour, the spacing between elements, and the small motions when something opens or loads. The job is to make the product clear to read and easy to operate, so a first-time user can find the primary action without thinking about it.
UI design versus UX design
People mix these up constantly, and the line between them is real even though one person often does both. UX design decides how the whole experience is structured. It covers the flow a person moves through, the order of the steps, and whether they can actually reach the thing they came for. UI design is the visual and interactive layer that sits on top of that structure.
Here is a way to keep them straight. UX work answers the question of what screens exist and in what order. UI work answers what those screens look like and how each control responds when you press it. A checkout that asks for shipping before payment is a UX decision. The size of the "Pay now" button and the green tick that confirms the order are UI decisions.
The building blocks of an interface
Every interface is assembled from a small set of repeating parts, and once you can name them you can start controlling them.
- Colour and contrast, including a primary brand colour, a few neutrals for text and backgrounds, and one accent for actions you want people to take.
- A type scale, which is a fixed set of font sizes you reuse everywhere instead of picking a new number for each heading.
- Spacing and layout, meaning the gaps inside and between elements and the grid that holds them in place.
- Icons, used sparingly and at consistent sizes so they read as a family.
- Components, the assembled pieces like buttons, text inputs, cards, and menus that you build once and reuse.
Set up a type scale
A type scale is the single fastest way to make a layout look intentional. Pick a base body size of 16px, then multiply by a ratio to generate the larger sizes. A ratio of 1.25, sometimes called the major third, is a safe starting point. That gives you roughly 16px body, 20px for a small heading, 25px, 31px, and 39px as you climb. Round to whole pixels and stop at five or six steps. The discipline is using only those values. When a heading needs to feel bigger, you move up one rung on the scale rather than typing 23px because it looked right that afternoon.
Pair the scale with two or three font weights, such as 400 for body text and 600 for headings, and set body line height to about 1.5 so paragraphs stay readable. Long lines tire the eye, so cap your text column at roughly 60 to 75 characters.
Set up a spacing system
Do the same thing for space that you did for type. Choose a base unit of 8px and build every gap, margin, and padding from multiples of it: 8, 16, 24, 32, 48, 64. An 8px grid is common because the numbers divide cleanly and stay sharp on most screens. Using 4px as a half-step is fine for tight spots like the gap between an icon and its label.
The payoff shows up in consistency. When every gap is a multiple of 8, elements line up without you fussing over them, and a layout built by two people on different days still looks like one product. Group related items with less space between them and push unrelated groups apart with more, which is the law of proximity doing your organising for you.
Principles you can apply today
A handful of ideas carry most of the weight in interface work. Each one comes with a concrete move you can make.
Build a clear visual hierarchy
The eye should land on the most important thing first. You create that order with size, weight, colour, and space. On a pricing page, the recommended plan gets the largest card, the boldest heading, and the accent-coloured button, while the other plans stay quieter. If everything is bold, nothing is.
Stay consistent
Similar things should look and behave the same way across the whole product. One button style for primary actions, one for secondary, and a single set of corner radii. A user who learns that your blue filled button means "this is the main action" should never have to relearn it three screens later.
Give feedback for every action
When someone clicks, taps, or types, the interface has to respond visibly. A button shows a pressed state, a form field turns red and explains what went wrong, a save shows a spinner and then a confirmation. Without feedback people click twice, get confused, and lose trust in whether anything happened.
Reduce the effort it takes to act
Count the steps between a person and their goal, then remove the ones you can. Pre-fill fields you already know, default to the most common choice, and keep the primary action in reach. A signup that asks for name, email, and password beats one that asks for ten things up front.
Check your colour contrast
Contrast is the one principle with a hard number behind it, so there is no guessing involved. The Web Content Accessibility Guidelines set a minimum contrast ratio of 4.5:1 for normal body text against its background, and 3:1 for large text, which means roughly 24px or 18.66px bold and up. Light grey text on a white card is the most common way teams fail this.
- Take your text colour and its background colour.
- Run them through a contrast checker. The WebAIM Contrast Checker is a free web tool, and most design apps and browser dev tools have one built in.
- If the ratio sits below 4.5:1 for body text, darken the text or lighten the background until it passes.
Do this for placeholder text and disabled states too, since those are where contrast quietly drops below the line.
What UI designers actually deliver
The output of UI work is a set of files and decisions a team can build from. In practice that means:
- Wireframes that lay out structure and content without final styling.
- High-fidelity screens that show the real type, colour, and spacing for each state, including empty, loading, and error states, not just the happy path.
- Interactive prototypes that link screens together so people can click through a flow before any code is written.
- Reusable components with their variants defined, such as a button in its default, hover, pressed, and disabled forms.
- Specs and tokens, the exact colour values, sizes, and spacing numbers a developer needs to rebuild the design without measuring pixels by hand.
Most of this lives in a tool like Figma, where designers draw the screens and developers inspect them for those values.
Why a design system matters
Once a product grows past a dozen screens, redrawing the same buttons and forms by hand becomes wasted effort and a source of drift. A design system captures those decisions once. It holds the colour palette, the type scale, the spacing units, and the components, all defined in a single place so the team builds new screens quickly and they all match.
You do not need a giant system to start. Begin with the four things from this article: a colour set with checked contrast, a type scale, an 8px spacing system, and a primary and secondary button. That core is enough to keep a small product coherent, and it is exactly the problem we focus on now.
Takeaways
- UI is the visual and interactive layer; UX is the structure underneath. You usually need both.
- Build a type scale from a 16px base and a 1.25 ratio, and reuse only those sizes.
- Build spacing from an 8px base and use multiples of it for every gap and margin.
- Use hierarchy, consistency, feedback, and lower effort to make screens easy to act on.
- Hit at least a 4.5:1 contrast ratio for body text and verify it with a checker.
- Deliver real states and reusable components, then collect the recurring pieces into a design system.