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.

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:

  • UX = User Experience
  • UI = User Interface

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 each specialty, 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, while other times each piece is done by many people on a team. At Forge and Smith Tess focuses on UX design, and UI design is my specialty.

web-design-UX-UI-terms

User Experience Web Design (UX)

Forge and Smith UX Designer: Tess Good

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 how they will best get there. The navigation of a site – 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 requirements (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 will be directed in a few possible ways: continue reading another article, read more about us and finally to reach out and contact us. UX design is guiding your way.

User Interface Design (UI)

Forge and Smith UI Designer: Damian Jolley

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) design, focusing on what works visually for the brand.

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.

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

Want to know more about the UX and UI web design that we do here at Forge and Smith? Check out our services.