What Actually Happens During a UI/UX Design Phase

Design isn't picking colors — it's solving the site's structure before development starts

A lot of business owners picture "design" as choosing fonts and a color palette. That's the smallest part of it. The actual work of a UI/UX design phase is figuring out how a visitor moves through the site, what they need to see at each step, and where friction is likely to make them leave — all worked out before a developer writes any code. Skipping this phase doesn't save time; it just moves the same decisions into the development stage, where they're more expensive to change.

UI (user interface) is what the site looks like — layout, visual hierarchy, typography, color. UX (user experience) is how it works — the flow from landing on a page to completing an action, the logic of navigation, the friction in a form. They're handled together because a beautiful interface that's confusing to use fails just as often as an ugly one that's easy to use, and the two disciplines constantly inform each other.

Discovery: figuring out what the site actually needs to do

Before any screens get drawn, the design phase starts with understanding the business's goals, its audience, and what a visitor is actually trying to accomplish on the site. A local service business site needs to make it fast and obvious how to request a quote. An e-commerce site needs product discovery and a low-friction checkout. A SaaS landing page needs to explain the product's value fast enough to hold attention. This step also usually includes a look at competitor sites — not to copy them, but to understand what visitors in that space already expect.

Information architecture: deciding what goes where

This is the step of mapping out every page the site needs and how they connect — the navigation structure, the hierarchy of content, and which pages need to be one click from the homepage versus buried deeper. Get this wrong and the site ends up either overwhelming (too many nav items, no clear priority) or frustrating (important information three clicks deep). This groundwork also directly shapes SEO, since a clear site structure makes it easier for both search engines and AI answer tools to understand what each page is about.

Wireframes: the skeleton before the skin

Wireframes are low-fidelity layouts — boxes and placeholder text showing where content sits on the page, without color, imagery, or final copy. The point of keeping them deliberately plain is to get agreement on structure and flow before anyone's attention gets pulled toward visual details. It's much cheaper to move a wireframe's call-to-action from the bottom of the page to the top than to redo a fully designed and coded page because the layout wasn't working.

This is also where user flow gets mapped concretely — the exact sequence of screens or sections a visitor moves through to complete a goal, whether that's requesting a quote, adding a product to cart, or booking an appointment. A flow with unnecessary steps or unclear next actions loses people at each extra step, so tightening this before development is one of the highest-leverage parts of the whole process.

Visual design: where the brand comes in

Once the structure is agreed on, visual design applies the actual look — color, typography, imagery, spacing, and interactive states (what a button looks like on hover, what an error message looks like on a form). This stage works best when it's connected to the business's branding rather than treated as a separate exercise, since a mismatch between a logo's design language and the site's visual system reads as unpolished even when both pieces are individually well done.

Prototyping and revision rounds

Before development starts, an interactive or click-through prototype lets stakeholders and, ideally, real users experience the flow rather than just looking at static screens. This is where problems that aren't visible in a static mockup surface — a form that looks fine but is confusing to actually fill out, a navigation pattern that seems clear on desktop but is awkward on mobile. Revision rounds at this stage are inexpensive compared to the same feedback arriving after development, when a layout change means rewriting code instead of adjusting a design file.

Why skipping this phase costs more later

The temptation to skip straight to development is understandable — it feels like faster progress. In practice, structural problems that would have been caught in wireframing show up instead during development or, worse, after launch, when a visitor's confusion or a poor conversion rate reveals a flow issue that should have been caught earlier. Fixing a navigation structure or a checkout flow after the site is built and populated with real content is a meaningfully bigger job than adjusting a wireframe. This is a large part of why a website redesign often ends up necessary sooner than expected when the original build skipped proper design work.

How long this phase actually takes

It scales with site complexity. A simple landing page's design work might take a few days. A full business site with multiple page types, a service catalog, and custom functionality can reasonably take a couple of weeks of design work before development begins. That time isn't overhead — it's the stage where the cheapest mistakes get caught.

FAQ

Can I skip the UX phase and go straight to visual design?

You can, but structural problems that UX work catches early — confusing navigation, a checkout with too many steps, unclear calls to action — tend to surface later instead, when they're more expensive to fix. It's rarely a net time savings.

What's the difference between UI and UX design?

UX is how the site works — the flow, structure, and logic a visitor moves through. UI is how it looks — layout, color, typography, and visual hierarchy. They're designed together because each affects how well the other performs.

Do I need to review wireframes before development starts?

Yes, ideally. Wireframes are the cheapest stage to catch structural problems, since changing a box layout takes minutes while changing built and coded pages takes real development time.

How much input do I have during the design phase?

Typically a fair amount — most agencies build in review and revision rounds at both the wireframe and visual design stages specifically so the business can weigh in before development locks the structure in.

Does every website need a full UX design process?

Smaller sites with simple goals can move through a lighter version of this process, but skipping it entirely on anything beyond a single static page tends to surface as usability or conversion problems after launch.