The Relationship Between Visual Design and User Experience Design
Visual design is a critical surface-level component within the broader UX design framework.
1Defining UX Beyond Aesthetics
Many perceive UX designers primarily as artists creating beautiful interfaces. However, visual design represents only one specific layer of the comprehensive design process. Effective product development requires collaboration among diverse skill sets, including research, information architecture, and strategy. Understanding these distinct components helps teams hire appropriately and deliver superior user experiences.
2The Five Planes Framework
Jesse James Garrett introduced a five-plane model to categorize UX design elements: Strategy, Scope, Structure, Skeleton, and Surface. These planes progress from abstract foundational decisions to concrete visual outputs. By visualizing these layers, teams can better understand how early strategic choices dictate the final appearance of any digital application.
3Strategy and Scope Foundations
The Strategy plane addresses business objectives and user needs, similar to planning a building's purpose. Decisions here influence the Scope, which defines the value proposition and specific product features. Teams often utilize tools like business model canvases and roadmaps to align stakeholders on what the product must achieve for its users.
4Structuring the User Journey
Structure defines how users interact with and navigate through product features. Information architects classify data and map out logical flows, ensuring the product remains intuitive. This phase occurs before any visual elements are applied, focusing entirely on the organization of information and the functional pathways that users will eventually follow.
5Skeleton and Interface Layout
The Skeleton plane translates structural decisions into tangible wireframes and prototypes. These line drawings depict item placement on the screen without aesthetic styling. By focusing on layout and interaction, designers ensure the product functions correctly before committing to colors, typography, or other visual elements that define the final surface presentation.
6Surface: The Visual Layer
The Surface plane is the most visible aspect of UX design, encompassing colors, typography, icons, and microcopy. While essential for user engagement, it remains the final stage of the design process. Visual design serves as the presentation layer that brings the underlying architecture and functional decisions to life for the end user.
7Interdisciplinary Team Dynamics
Modern UX design is too broad for a single individual to master every specialized activity. Teams benefit from having researchers, information architects, and UI designers working in parallel. This collaborative approach allows for diverse perspectives, faster iteration cycles, and more robust decision-making regarding business goals and technical integration requirements for the product.
8UI and UX Collaboration
UI designers specialize in the visual aspect, ensuring aesthetics remain consistent with usability principles. While a UI designer focuses on the surface, they must understand core UX principles to maintain a seamless experience. If a product's visual style is inconsistent or confusing, users may abandon it before discovering its underlying functional value.
9Importance of Visual Consistency
Visual design elements like high contrast and standardized button styles guide users through complex tasks. A shopping cart icon, for instance, immediately communicates purchase functionality. When visual design adheres to usability principles, it reinforces the product's architecture, making the interface predictable and reducing the cognitive load required for users to navigate successfully.
10Iterative Testing and Evaluation
Unlike physical construction, digital product design is never truly finished. Teams must continuously test hypotheses through heuristic evaluations and usability studies. Findings from these tests often create a rippling effect, requiring adjustments across all five planes, from strategic feature prioritization down to the specific visual styling of an interactive element.
11Evaluating Design Roles
When job descriptions label a role as UI/UX, companies seek candidates proficient in both visual design and foundational UX tasks like research and wireframing. Recognizing this distinction helps professionals identify which skills to prioritize. A strong understanding of the entire framework allows designers to contribute effectively at any stage of development.
12Strategic Design Integration
Visual design is a vital component of the user experience, but it is not the entirety of the discipline. By viewing design through the five-plane framework, teams can ensure that aesthetics support the product's core strategy. This holistic approach leads to products that are not only beautiful but also functional and successful.
Original article: UX Daily — The Relationship Between Visual Design and User Experience Design