What is user interface design? User interface (UI) design is the process of creating the visual and interactive elements of a digital product, such as websites, apps, or software, that users see and interact with. It covers layout, colour, typography, buttons, icons, and spacing. Its goal is to make interactions intuitive, efficient, and visually coherent.

---

When “looking good” isn’t enough

Most organisations recognise that their website needs to look professional. Fewer recognise that a website can look professional and still frustrate every visitor who lands on it.

The navigation is ambiguous. The hierarchy doesn’t guide the eye. The enquiry form is buried three clicks deep. The button looks like a heading. A potential client, who had every intention of getting in touch, leaves without taking action.

This is what poor UI design actually costs. Opportunity.

UI design is frequently treated as the cosmetic layer applied after the important decisions have been made: structure, content, and development. That framing is the problem. UI design is the system of visual and interactive decisions that determines whether users can accomplish their goals with confidence. It’s functional before it’s decorative.

Recent research shows that cluttered layouts, inconsistent components, and confusing navigation increase extraneous cognitive load. It makes users feel fatigued, reducing both usability and engagement. Conversely, simplifying visual information improves task efficiency and satisfaction.

This guide covers what UI design is, how it differs from UX, the core principles that govern it, and what a professional UI design process looks like in practice.

UI design vs UX design

UX (user experience) design focuses on the overall experience — how a product works, how users navigate it, and whether it meets their goals. UI (user interface) design focuses on the visual and interactive layer and the specific elements users see and interact with. UX defines the structure; UI makes it visible, usable, and on-brand.

Why both matter and how they work together

The distinction is important in practice, not just in definition.

A product with excellent UX but weak UI looks unpolished and undermines trust, even when the underlying logic is sound. Users make rapid judgments about credibility from visual quality. A product with excellent UI but weak UX looks good and frustrates users. The first impression is positive; the experience that follows isn’t.

In a well-run project, UX research and information architecture precede UI design. The interface is built on a validated understanding of what users need to accomplish and how they expect to navigate. In most professional agencies, including Butterfly, UX and UI are integrated disciplines rather than sequential handoffs — the thinking overlaps and informs each other throughout the project.

For a deeper treatment of UX as a business discipline, see our guide to why UX design matters.

Types of user interfaces

The main types of user interfaces are: Graphical User Interfaces (GUI) — visual elements like icons, buttons and menus; Command Line Interfaces (CLI) — text-based command input; Voice User Interfaces (VUI) — voice commands; Touch User Interfaces (TUI) — direct touch interactions on screens; and emerging AR/VR spatial interfaces.

GUI (Graphical User Interface)

The dominant interface type for websites, desktop software, and mobile apps. Everything users see on screen — menus, buttons, icons, windows, layouts — is a GUI element. For web and app UI design, GUI is the primary concern.

CLI (Command Line Interface)

Text-based; users type commands rather than interact with visual elements. Still widely used in technical environments such as developer tools and server administration. Rarely the primary interface for consumer-facing web products.

VUI (Voice User Interface)

Interaction via voice command — Siri, Alexa, Google Assistant. Increasingly relevant as voice search grows. For web designers, VUI principles intersect with voice search optimisation and how content is structured for spoken retrieval.

TUI (Touch User Interface)

Direct interaction via touchscreen — phones, tablets, kiosks. Specific design requirements apply: larger touch targets, gesture support, and reduced reliance on hover states, which don’t translate to touch contexts.

AR/VR interfaces (emerging)

Spatial interfaces where users interact in three-dimensional environments. Early-stage for most organisations, but worth monitoring as the technology matures and spatial computing becomes more accessible.

The core principles of user interface design

These are the principles that separate UI design from graphic design. Applied consistently, they create interfaces that users can navigate without instruction, because the design itself communicates how to use it.

1. Clarity

Every element on screen should have a clear purpose. If it doesn’t, it shouldn’t be there.

Text should say what it means without requiring interpretation. Labels should match the language users actually use, not the language the organisation uses internally. Visually, clarity means hierarchy established by size, weight, and position — not decoration.

2. Consistency

The same action should always look and behave consistently throughout the interface.

Consistent use of colour — one action colour, one warning colour, neutrals. Consistent typography — a clear heading hierarchy, a predictable body style. Consistent components — how cards work, how modals open, how errors are displayed.

Consistency reduces cognitive load: users learn the system once and apply that knowledge to every subsequent interaction. A 2025 usability study found that denser, more complex layouts with inconsistent patterns significantly increased perceived cognitive load and degraded the overall user experience, while simpler, structured layouts improved both usability and comprehension.

3. Visual hierarchy

Users scan before they read. Visual hierarchy guides the eye to the most important element first.

The tools of hierarchy: size, weight, colour, position, and whitespace. Every page should have one visually dominant element — the heading, the CTA, the critical piece of information the user needs to see first. Everything else supports it.

4. Feedback and responsiveness

Every user action should produce a visible response.

Buttons that look pressed. Forms that confirm submission. Loading states that signal activity. The absence of feedback creates anxiety: “Did that work? Should I try again?” Micro-interactions — small, deliberate feedback animations — confirm actions without disrupting flow. They are a functional requirement, not an embellishment.

5. Accessibility

UI design is not complete if it only works for users without disabilities.

Core requirements: WCAG AA colour contrast ratios, keyboard navigability, meaningful alt text on images, adequate click and touch target sizes, and screen reader compatibility. WCAG 2.2 has now been approved as ISO/IEC 40500:2025, making it an internationally recognised standard. In Australia, federal digital guidance expects agencies to meet at least WCAG Level AA, and that expectation is extending beyond government to healthcare, education, and digital products broadly.

For organisations in those sectors, accessibility is a compliance requirement. For all organisations, it’s a design requirement.

6. Simplicity

Simplicity is not the absence of features. It’s the absence of unnecessary complexity.

Every additional element, colour, and interaction pattern adds to the user’s cognitive load. The total cognitive load required to use a site directly affects how easily users can find content and complete tasks. That is why reducing visual clutter and aligning with user mental models is a practical recommendation, not a stylistic preference.

Design principle: reduce choices at decision points. Guide users toward the most likely next action rather than presenting every possible option simultaneously.

7. Familiarity

Users bring prior experience from every other digital product they’ve used. Conventions exist because they work.

A logo in the top left. Navigation at the top or left. A magnifying glass for search. These patterns are familiar because they’re consistent across most of the digital experiences your users have already had. Familiar patterns reduce the learning required to use a new interface. Innovation should serve the user’s goal; familiarity should be the default unless there is a clear reason to diverge.

---

Is your website’s UI design guiding users toward conversion — or creating friction? Butterfly’s UI audit identifies specific improvements to hierarchy, navigation, and accessibility that will improve engagement and results. Request a UI design review →

Key elements of a UI design

Understanding the principles is one thing. Knowing what UI design actually produces is another. Here are the core elements that a UI design covers.

Layout and grid systems: The underlying structure that positions elements consistently across pages. Grid systems create visual rhythm and alignment. They’re invisible to users, but are felt immediately when absent.

Colour Brand expression, emotional tone, and functional signalling: action colours, warnings, errors, success states. Most effective UI colour palettes are limited. One primary action colour, one or two supporting colours, and neutrals. The constraint is a design choice.

Typography A type scale that establishes heading hierarchy (H1 through H4), body text, supporting text, and captions. Readability requirements: minimum 16px for body text on web, adequate line height, sufficient contrast against the background. System fonts load faster; custom fonts add personality. The trade-off is worth understanding before making the choice.

Components and controls: Buttons: primary, secondary, ghost, and destructive — each with a distinct visual treatment and a defined use case. Forms: input fields, dropdowns, checkboxes, radio buttons — each with clear labelling and designed error states. Navigation: menus, breadcrumbs, and pagination — each serving a specific navigational need. Cards, modals, alerts, tooltips: the supporting vocabulary of an interface.

Iconography: Icons should reinforce labels, not replace them, for navigation and primary actions. A consistent icon style throughout the interface, mixing filled and outlined icons in the same context, creates visual noise.

Whitespace Space is not wasted space. It’s the visual breathing room that makes hierarchy legible. Tight layouts feel claustrophobic and reduce comprehension. Adequate whitespace is a structural decision, not a luxury.

The UI design process and how it fits into a project

UI design has a sequence. Skipping steps doesn’t accelerate delivery; it generates rework. Here is the workflow in brief.

1. UX foundation first. Information architecture and wireframes establish structure before visual design begins. The UI is built on a validated navigational foundation.
2. Style exploration. Colour palette, typography, and visual tone established via mood boards or style tiles, client-aligned before full design begins.
3. Component design. Build the design system. Define how each component looks across all its states: default, hover, active, disabled, error.
4. Screen design. Apply the design system to all required page and screen templates.
5. Responsive states. Design explicitly for desktop, tablet, and mobile. Don’t adapt from one breakpoint — design for each context.
6. Prototype and review. An interactive prototype for stakeholder review and usability testing before development begins.
7. Handoff to development. Design files prepared with specifications; component library documented for the development team.

How UI design affects SEO and conversion

UI design decisions have measurable consequences beyond the visual. Understanding them helps make the business case internally.

Page speed and Core Web Vitals Heavy, unoptimised visual assets degrade Google’s Core Web Vitals. These are the ranking signals that directly affect organic search performance. Image formats, animation weight, and font loading strategies are all UI design decisions with SEO consequences. Quantitative studies across mobile and web products report that performance speed is a statistically significant predictor of user retention and conversion.

Crawlability and content structure Heading hierarchy (H1, H2, H3), semantic HTML, and structured content make pages legible to search engines. Poor UI implementation, such as using headings for visual styling rather than structure and embedding content in non-crawlable elements, affects both accessibility and organic discoverability.

Conversion rate: Clear visual hierarchy, prominent CTAs, and trust signals — consistent branding, professional visual quality — all influence whether users take the desired action. A well-designed UI doesn’t just help users navigate; it removes the friction between intent and action.

Bounce rate: A poor first visual impression causes immediate abandonment. UI quality affects whether a visitor stays long enough to evaluate the proposition. In competitive search environments, that impression is formed in seconds.

UI design tools

Tool	Primary use	Best for	Cost
Figma	UI design, prototyping, design systems	Professional web and app UI	Free to paid
Adobe XD	UI design, prototyping	Adobe ecosystem users	Subscription
Sketch	UI design, design systems	Mac-based teams	Subscription
InVision	Prototyping and stakeholder review	Presenting and testing designs	Free to paid
Zeplin	Design-to-dev handoff	Development teams	Free to paid

Figma has become the standard for professional web UI design. Its collaborative, component-based approach supports the full workflow from wireframe to development handoff and is platform-agnostic, making it accessible across distributed teams.

How Butterfly approaches UI design

Butterfly’s UI design is grounded in UX research. Interfaces are designed to solve validated user problems, not to express aesthetic preferences or mirror current design trends.

Accessibility is a design requirement from day one. WCAG AA compliance is standard across all UI work, not a retrofit applied before launch.

A component-based design system is a standard deliverable on all projects, ensuring consistency across every screen, reducing development time, and making future changes maintainable without rebuilding from scratch.

For app-specific UI design — platform conventions, touch targets, and gesture navigation see our guide to app interface design.

To understand how Butterfly approaches the broader web design discipline, visit our web design services.

Frequently asked questions about UI design

UI design that looks professional and performs strategically

The most common mistake in UI design briefs is conflating quality with aesthetics. A beautifully branded interface that confuses users is a bad UI design. An unpolished interface that gets users where they need to go is better.

The goal is both: interfaces that look credible and function reliably. Applied consistently across every screen, the principles in this guide close the gap between a website that looks good and one that performs.

Talk to Butterfly about designing interfaces your users will actually want to use. Get in touch →