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:
- 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 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 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.
Good web design melds UX and UI together. A good UI designer will understand and appreciate UX design, and vice versa – and some will do both! 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.
Originally published by Forge & Smith, written by Damian Jolley.
