UI (User Interface) is the set of screens, controls and visual elements through which a person operates a website or application. Buttons, menus, form fields, icons, typography, colour and layout all belong to it. UI design is the discipline of deciding how those elements look, behave and fit together so that using the product feels clear and consistent.
Building Blocks of an Interface
Interfaces are assembled from a limited vocabulary of components that people already recognise:
- Navigation: menus, tabs, breadcrumbs and footers that help visitors move around
- Input controls: text fields, dropdowns, checkboxes, radio buttons and date pickers
- Actions: primary and secondary buttons, links and toggles
- Feedback: alerts, validation messages, progress bars and confirmation notices
- Content containers: cards, tables, accordions and modal windows
Why States Matter as Much as Appearance
A button is not one picture but a family of them. A well-designed component has a default look and also a hover state, a keyboard focus outline, a pressed state, a disabled state and often a loading state. Form fields need an error appearance and a success appearance. Designing only the default view leaves developers to guess the rest, which is how inconsistencies creep in.
Documenting these states is a core part of UI work. Teams often gather them into a design system so the same component behaves identically on every page.
Many teams also define design tokens: named values for colours, font sizes and spacing that every component draws from. If the brand's main blue changes, updating one token changes it everywhere instead of requiring a hunt through hundreds of style rules, which is what makes a design system practical to maintain.
Visual Choices That Support Usability
Good UI is not decoration. Colour contrast keeps text readable, consistent spacing groups related items, and a clear type scale signals what is a heading and what is body copy. A single, distinct style for the main call to action shows visitors where to click. These choices also affect accessibility, since people with low vision or colour-vision differences rely on contrast and clear labelling rather than colour alone.
Interfaces also have to suit how they are used. A control that works with a mouse pointer may be too small for a thumb, so touch layouts need larger tap targets and enough space between neighbouring links. Hover effects do not exist on touch screens, so they should never be the only way to reach something important, such as a submenu.
UI Compared With UX and Graphic Design
UI is often confused with neighbouring roles. UX design looks at the whole journey, including research, flows and task completion, while UI focuses on the interface used along that journey. Graphic design produces visual material such as logos or brochures, which are usually fixed images, whereas UI designs interactive, responsive systems that change with user input.
An attractive interface that confuses people has good visuals but weak UX. A sound flow wrapped in a dated, inconsistent interface has the reverse problem. Strong projects need both.
Our UI/UX design and website design services cover interfaces for business websites. Related glossary entries include UX, wireframes and responsive design.