User experience (UX) and user interface (UI) design are two related but distinct disciplines in the world of digital product development. While they often overlap, there are some key differences between UX and UI that are important for designers, developers, and product managers to understand. In this article, we’ll highlight 9 things you need to know about the relationship between UX and UI design.
- UX focuses on the entire user journey while UI focuses on screens.
UX design considers the full experience a user has with a product, from initial awareness all the way through purchasing, onboarding, regular usage, and support. The UX designer’s goal is to eliminate friction and create intuitive interactions at every touchpoint. UI design focuses specifically on the look, feel, and interactivity of the actual screens the user engages with. While UX aims to improve the whole journey, UI hones in on individual moments on each screen.
- UX deals with function while UI deals with form.
A simple way to distinguish the disciplines is that UX design is concerned with how things work while UI design is concerned with how things look. UX designers focus on the functional elements like navigation menus, search bars, and buttons. Their goal is to make features and flows that are useful and instinctive. UI designers focus on the presentation of those features, dealing with visual design elements like layout, color schemes, and typography.
- UX comes before UI in the design process.
Since UX focuses on logic and UI focuses on aesthetics, UX design generally comes first in the typical design cycle. UX designers map out user flows, wireframes, prototypes and conduct user research to uncover usability issues. Those insights inform the UI design – where screens and visuals come to life. UI adds the surface-level polish after the underlying UX framework is in place.
- UX is more analytical while UI is more creative.
Due to the different concerns of the two disciplines, UX designers tend to have more analytical mindsets, while UI designers tend to have more artistic sensibilities. UX designers like to take a rigorous, research-based approach, relying on data to optimize experiences. UI designers prefer a more intuitive, subjective approach, using visual aesthetics and personal taste to craft pixel-perfect designs.
- UX design skills include research, analysis and information architecture.
Common skills for UX designers include user research, heuristic analysis, usability testing, A/B testing, data synthesis, persona development, interaction design, information architecture, prototyping, and wireframing. They utilize both qualitative insights like user interviews as well as quantitative data like analytics and surveys. The goal is always driving metrics like engagement, retention, and conversion.
- UI design skills include visual design, motion graphics and front-end coding.
UI designers excel at visual design skills like color theory, typography, animation, responsive design, and drawing wireframes and mockups. Coding languages like HTML, CSS, and JavaScript are also important for bringing designs to life in the browser, as is some graphic design ability in tools like Sketch, Figma, Photoshop, and Illustrator. The output is visually appealing screens that align to brand guidelines.
- UX deliverables include journey maps, personas, wireframes and prototypes.
Typical UX design deliverables include sitemaps, user flows, empathy maps, personas, user stories, wireframes, and low to high-fidelity prototypes. These artifacts document the logical app structure and demonstrate the functionality and interactions in an experience. Stakeholders can review UX deliverables to provide feedback before any visuals are designed.
- UI deliverables include style guides, design systems and polished screens.
For UI designers, common deliverables include style guides, design systems, font and color specifications, and visually complete screen designs. These artifacts show the precise visual treatments and branding elements that will be present in the final product. Stakeholders can respond to the aesthetics: approving color schemes, typography, iconography, and other visual details.
- UX and UI both contribute immense value.
While UX and UI serve different purposes, they are both crucial to delivering great products and experiences. There is some overlap in skills, but strong collaboration between UX and UI designers is ideal. UX provides the logical framework while UI brings it to life visually. Both require technical and creative prowess to craft something users will enjoy and find valuable.
Conclusion
UX and UI design are unique yet complementary disciplines. UX focuses on user needs and function while UI concentrates on aesthetics and form. UX designers employ analytical research and information architecture while UI designers utilize visual design skills. While their deliverables and details differ, UX and UI work together to create cohesive digital products that delight users and bring value to businesses. With an understanding of their distinct roles, designers can collaborate to make the most engaging user experiences.
