Jargon Buster / UI Design
UI Design.
Brand, Web & DesignThe design of the visual and interactive parts of a website or app: layout, type, buttons, forms and states.
What is UI design?
UI design (user interface design) is the design of the visual and interactive elements people use on a website, app or software product: layout, typography, colour, buttons, forms, icons and the way each element responds when tapped or clicked. UX design decides how something should work; UI design decides how it looks and feels at the level of each screen and component.
Why it matters
Interface quality shapes how credible a business seems within seconds of arrival. Clear hierarchy tells visitors where to look and what to do; cluttered or inconsistent interfaces create doubt and slow people down. In software and client portals, good UI reduces errors and support requests. Good UI also makes your offer easier to understand, which can help conversion as much as a copy change.
What good looks like
- Clear hierarchy Size, weight and spacing make the most important thing on each screen obvious.
- Consistent components The same element looks and behaves the same way everywhere, usually through a design system.
- Feedback and states Buttons, forms and links show hover, focus, loading, error and success states clearly.
- Accessible by default Sufficient colour contrast, visible focus and readable type, in line with WCAG 2.2, the current W3C accessibility standard.
- Visual restraint Visual effects used only where they help someone understand or act.
The honest view
UI is often judged on taste in a meeting room, with feedback like "make it pop" or "can the logo be bigger". A better test is whether a first-time visitor can tell what the page is for and what to do next within a few seconds. Trends such as heavy animation and low-contrast grey text look impressive in a portfolio and frustrate real users, particularly older buyers or anyone using a small screen in daylight. Treat accessibility as a baseline quality measure that every screen must pass.
What to do about it
Pick your most important page and show it to someone unfamiliar with your business for five seconds. Ask what the business does and what they would click. If they hesitate, the hierarchy needs work. Run your main colour combinations through a free contrast checker against WCAG 2.2 level AA. Ask your designer for the full set of states for buttons and forms, including error messages.
Related terms.
UX Design
Designing how a website or product works for the people using it, so tasks feel clear and easy to complete.
Brand, Web & DesignSee more DDesign System
A shared library of reusable components, styles and rules that keeps a website or product consistent as it grows.
Brand, Web & DesignSee more RResponsive Design
Designing a website so its layout adapts to any screen size, from a phone to a large desktop monitor.
Brand, Web & DesignSee more WWireframe
A simple layout sketch of a page showing structure and content priority before any visual design is applied.
Brand, Web & DesignSee moreGot a question about your own setup? Let's talk.
Your first call is with our founder, Rhodri Williams.