UI vs UX, Why I Design Them Separately (And Why You Should Care)

Why I design UI and UX as separate phases, and how that separation produces better results for clients and users.

One of the most common things I hear from clients is ”I need a UI/UX designer.” But the UI vs UX design process is actually two completely different phases, and I design them separately. They say it as one thing, UI/UX, like they’re inseparable. And while they absolutely work together in the final product, I design them as completely separate phases. This isn’t a quirk of my process. It’s the core of it.

They’re Different Disciplines With Different Questions

UI, user interface, is about aesthetics and emotion. When I’m working through the UI lens, I’m asking: How do these colors work together? What emotions do they evoke? Is the palette warm or cool, energetic or calm? What does the typography communicate about the brand’s personality? What’s the overall feeling before anyone even interacts with anything?

UX, user experience, is about structure and function. When I’m working through the UX lens, I’m asking completely different questions: Where are elements placed and are they where users expect? Are tap targets large enough? How many steps does it take to complete a core task and can any be eliminated? Does the flow make logical sense? Can someone understand where they are in the app and where they can go?

Both are essential. As Nielsen Norman Group explains, understanding the UI vs UX design process means understanding that they require different thinking. But they require different thinking, and trying to do both simultaneously produces worse results in both.

Why the UI vs UX Design Process Order Matters

In my process, UI comes first. I lock the visual direction, the colors, typography, spacing, personality, before I touch user flows or wireframes. You can see this in action in my full app design walkthrough.

This sounds counterintuitive if you come from a traditional UX-first background. But here’s why it works: when the visual direction is already approved, the UX phase becomes purely about structure. I’m not getting distracted by aesthetic decisions while trying to solve usability problems. And when I later combine the two, both halves have been independently approved by the client, so there are rarely big surprises.

The alternative, designing how something looks and how it works at the same time, means compromising on both. You make structural decisions based on what looks good in the visual direction you’ve started, rather than what’s actually best for the user. Or you water down the visual direction to accommodate a structure that wasn’t planned with the aesthetics in mind.

What This Looks Like in Practice

The UI phase (first): Inspiration gathering, mood boards, organizing screenshots into distinct visual directions, presenting options to the client, creating mockup screens to nail the exact look and feel. All aesthetic, all emotional. No wireframes, no user flows, no information architecture.

The UX phase (second): Feature brain dump, MVP scoping, screen flow mapping, low-fidelity wireframes. All structural, all functional. Grayscale, simple shapes, no colors or typography. Just solving how things work.

The combination (last): Apply the approved visual direction to the approved wireframes. Refine where needed, sometimes a color that worked in a mockup doesn’t suit a dense information screen. But the big decisions are already made.

Why Clients Benefit From This Separation

When everything is mixed together, client feedback is harder to act on. ”I don’t like it” could mean the colors are wrong, or the navigation is confusing, or the layout doesn’t work, or all three. Separating the phases means feedback is focused: in the UI phase, we’re only talking about how things look. In the UX phase, we’re only talking about how things work.

This also means clients feel involved at each stage. They approve the visual direction before we move to structure. They approve the wireframes before we combine everything. By the time the final design comes together, they’ve been part of every decision. There’s no painful reveal where something is completely off because they’ve been collaborating the entire way.

When You’re Looking at Inspiration, Know Which Lens You’re Using

This separation applies to research too. When I’m saving screenshots for inspiration, I’m conscious of why I’m saving them.

Saving something because it looks beautiful? That’s UI inspiration. The colors, the typography, the visual treatment caught my eye.

Saving something because the layout is smart or the flow is intuitive? That’s UX inspiration. The structure, the navigation pattern, the way information is organized impressed me.

Mixing these up makes the research less useful. If you tag and sort by which lens each reference serves, your inspiration library becomes dramatically more effective when you actually need to use it.

Good UX Is Invisible

Here’s something worth remembering: when UX is done well, nobody notices it. People just accomplish their goals. They don’t think about the navigation because it’s exactly where they expected it. They don’t notice the flow because it feels natural. They don’t struggle with the interface because it anticipated their needs.

That invisibility is the result of intentional design thinking. It’s also what makes vibe coding work so well for designers, because articulating these invisible decisions clearly is already what we do, and it’s much easier to achieve when you give it dedicated focus rather than splitting your attention with visual decisions at the same time.