UX vs. UI: How They Work Together in Web Design

If the terms ‘UX’ and ‘UI’ have you picturing robots taking over the world, you’re not alone. These two areas of web design can cause confusion, especially for those outside the industry. If you’re planning to hire a web designer or web design company for a project, you should know the difference between UX vs. UI design, so you can understand the skills and services they offer.

While both are related and integral to a site’s success, they’re unique and contribute to different elements to the overall design.

Let’s tackle the acronyms first:

The words ‘experience’ and ‘interface’ give an idea of each term’s meaning. In a previous article I used the analogy of designing a house to illustrate the process of web design. UX is best described as the architecture (planning, structure), while UI is the interior design (style, colour, look and feel).

I want to delve further into the precise aspects and deliverables associated with UX vs. UI, because understanding how they relate to you and your site’s visitors can help you better understand the design process — and designers.

UX and UI designers work in the same realm and on the same projects, but apply their own skills at various stages. Sometimes UX and UI are done by the same person, whether it’s within an agency or a freelancer, while other times you’ll find companies employ multiple designers who specialize in each area.


User experience web design (UX)

UX design brings critical analysis and logic to the design process: designing systems, structure, and flows that a user will take. This user-centric design considers what the user wants and needs, and how they will best get there. Website navigation — how a user reads through a page, where they click to navigate between pages, how they find and access the information they want — is part of the user experience.

UX design specifically for the web also takes into consideration search engine optimization (SEO), browser restrictions, and other web-specific requirements.

  • UX Deliverables: Site map, wireframes and prototyping
  • UX Tools: Research, analytics, diagrams
  • See It In Action: When you’ve finished reading this article, you’ll be directed to a few possible next steps: continue exploring another article, read more about us, or reach out and contact us. UX design is guiding your way through a logical journey.

User interface design (UI)

UI design deals with styling the structure and content — what the user sees during the experience. This is when branding, colours, typography, graphics, photography, and other visual elements are introduced. User interface design is client-centric (and brand-centric), focusing on what works visually for the brand to evoke the desired look, tone, and feel.

Good web interface designers take into consideration the restrictions on coding, development, and page load times.

  • UI Deliverables: Style tiles, layout mockups
  • UI Tools: Colour swatches, typography, photography, graphic editing software
  • See It In Action: When you visit a page of cool blues and clear typography paired with stunning photography that makes you feel like you are on vacation at a secluded beach — that is good UI design in action.

It’s not UX vs. UI at all

Good web design melds UX and UI together. A good UI designer will understand and appreciate UX design, and vice versa.

In fact, UI design is actually seen as a subset of user experience design by many experts. The way a visitor feels when they encounter your content, and the way your branding is presented, both influence the overall user experience. Poor visuals, bad copy, and a cluttered design can prevent someone from following a path through your website.

Similarly, messy navigation options like cluttered drop-down menus or too many menus everywhere on the screen create both a confusing user experience and a jarring interface.

UX design includes content strategy and information architecture. It covers everything from which content goes where to conversion forms, scrolling vs. clicking, and what copy is on your CTA buttons. UI design makes sure that your brand message translates into design, and that your website is consistent with your business’ persona. Someone visiting your website should get the same experience as if they come into your store, talk to you on the phone, or follow you on social media.

Rather than thinking of it as UX vs. UI, know that you need both for your website to achieve its goals and create happy users.


Want to know more about the UX and UI design we do here in Vancouver at Forge and Smith? Check out our web design and web development case studies!