The Relationship Between Visual Design and User Experience Design

by Kasturika | | 17 min read
691 shares

A common perception about UX designers is that we are artists who can create beautiful interfaces from a blank canvas. While the aesthetics of products are important, visual design is only one aspect of the design process – in which team members with different skillsets and expertise collaborate with each other. Knowledge of the components of user experience design can help beginners evaluate which skills to focus on, and help companies appreciate interdisciplinary product teams and hire the right combination of team members to deliver great experiences.

In his book, The Elements of User Experience, Jesse James Garrett provides a framework for the various aspects of UX design. While the framework was originally drawn for websites, it is applicable to all digital applications and can help bring clarity on the relationship between visual design and UX design.

Show Hide video transcript
  1. Transcript loading…

Garrett’s Elements of User Experience

Jesse James Garrett's five elements of user experience design depicted as an iceberg, with all but the surface element submerged underwater.

Jesse James Garrett's 5 planes of Strategy, Scope, Structure, Skeleton and Surface make up the Elements of User Experience.

© Daniel Skrok, Christian Briggs, Kasturika Ramamoorthy and Interaction Design Foundation, CC BY-SA 3.0

Garrett breaks down the elements of user experience into 5 planes stacked in order. At the bottom of the stack is the most abstract plane – Strategy. As we move up each plane, we become less abstract and more visible. The top-most plane is the Surface, and is the most visible or concrete aspect of UX design.

We can understand the framework through the analogy of a building.

Strategy

Let’s say you have a piece of land and would like to construct a building. The first few decisions of the project include: Why are you constructing a building; is it to live in or for commercial purposes? Who might want to rent the building? Is the location favorable for potential buyers or renters? You consult appraisers and attorneys to help you with these decisions. Through these questions, you identify the business objectives and the user needs.

Scope

The decisions taken on the Strategy plane influence the scope. In the case of the building, you consult a professional, who inspects the land to assess what is possible to construct on it – a detached house, an apartment building, an office space or maybe a shopping mall. The scope of the project defines what the value proposition, the productand the features that meet the business objectives and user needs are.

Structure

Once the scope is decided, your architect creates some blueprints, showing the entrance and exits to different rooms, hallways, restrooms, elevators and staircases. This is the structure – how the user interacts with and navigates around the product’s features.

Skeleton

The architect creates sketches or 3D models based on the blueprint and includes details of the interiors. The architect also enlists the help of a builder to create a full-scale sample of a portion of the building, complete with furniture and fittings, to give you a more realistic feel of the space. Here—on the Skeleton plane—the interface of the product becomes visible.

Surface

Finally, an interior designer helps you decide the color of the walls, the flooring, the furniture and accessories in individual rooms. The Surface plane is where the layer of presentation is put in place.

The Digital “Building”

Let us apply this framework to a fictitious digital product.

The UX team first identifies the users, their challenges and how users currently solve those challenges. They conduct surveys and interviews and use tools such as user personas and customer journey maps. At the end of these activities, the team may find out, for example, that freelance writers (potential users) find it difficult to maintain books of accounts (the challenge). Perhaps existing applications do not cater to the specific nature of their services (opportunity).

UX designers often work closely with business stakeholders for these strategy-related activities and decisions, sometimes with the help of a business model canvas to help understand how the business will create, deliver and capture value.

The team brainstorms to identify potential solutions and then scopes out the value proposition. Let’s say the team decides to offer a freemium mobile application for freelance writers. They identify the different features of the application and create a product roadmap, which prioritizes the features to introduce first. The designers consult business stakeholders as well as technical teams to create the roadmap.

The team then begins work on the structure of the application. This typically includes different types of flowcharts and maps indicating how information is classified and how users navigate around the product. Let’s say the first feature to roll out is invoices. The team classifies the different pieces of data associated with invoices – date of issue, payment terms, due date, etc. There may be other pieces of data, such as customer name, contact information and payment modes. The team then identifies the relationships between these different pieces of data in a logical manner. This task is sometimes handled by specialists called information architects.

The skeleton of the application is where the first drawings are created, in the form of wireframes. Wireframes are simple line drawings, usually no more than labelled boxes and lines depicting different items on the screen. These wireframes may be turned into prototypes to get a feel of how the application works.

The surface is where all the visual design elements—colors, typography, icons and illustrations—come into the picture. This also includes the content and microcopy such as labels, headings, messages and instructions.

As we can see, UX design is a broad discipline, with scope for many specialists to handle specific activities, such as research, information architecture, visual design and copywriting.

UX Design Process depicted as a flowchart.

Through much of the UX design process, deliverables will include information presented as flowcharts or maps, which do not require artistic skills.

© Daniel Skrok and Interaction Design Foundation, CC BY-SA 3.0

The Role of Visual Design

“Problems with visual design can turn users off so quickly that they never discover all the smart choices you made with navigation or interaction design.”
– Jesse James Garrett

As it’s the most (and often the only) visible aspect of UX design, those new to the field think that visual design is the biggest part of a UX designer’s role. However, as we’ve seen, visual design is typically one of the last decisions taken in the design process, and there is much more to a product under the surface.

While you may have the skills to carry out all tasks, you likely will be part of a team rather than work alone. In the design process, two (and more) heads are better than one! A team of designers provides different perspectives and can generate more ideas, not to mention work in parallel to speed up their efforts. You may find that you can conduct surveys and analyze the results efficiently, while another team member creates illustrations or color palettes.

UX design also requires decisions related to business and technology, which necessitate an interdisciplinary team that can make decisions such as:

  • How will the product generate revenues?

  • Should we run third-party advertisements on the product?

  • Is it possible to collaborate / integrate with similar products to offer a more holistic experience?

All these decisions impact the product in different ways – from broad feature sets (the scope) to a small icon on a standalone screen (surface).

Specialists who work on visual design within the team are called user interface (UI) designers. When you see a job description refer to the UX designer’s role as UI/UX, it means that the company is looking for someone skilled in visual design as well as research, information architecture and wireframing.

This doesn’t, however, mean that dedicated visual designers should not understand the principles of user experience design. As the first point of contact with users, visual design is extremely important. If the user doesn’t like what she sees, then she may not invest the time to explore the product at all. Once the user decides to explore the product, the aesthetics must be consistent with the underlying architecture and adhere to usability principles to provide an experience that delights the user. For example:

  • A shopping cart icon on the surface makes it easy for the user to understand the underlying purchase functionality.

  • High contrast between background and foreground colors makes text easy to read.

  • If an interactive element on a screen is styled as a button, then the same style across all screens makes it easy to identify interactive elements.

Iterate. Iterate. Iterate.

Our discussion of UX design would be incomplete without mentioning that, unlike the physical building in our initial example, the work of the UX design team is never done. Through every stage of the design process, the team tests its hypothesis and designs. The team conducts heuristic evaluations and usability tests with real users to identify scope for improvements and opportunities.

Some questions the team may ask are:

  • How well do we understand our users? Are we solving the right problem(s)? (Strategy)

  • Does the product solve the problem(s)? What features can help solve the problem(s)? (Scope)

  • Are the product features easy to use? (Structure, Skeleton, Surface)

The findings of usability tests often have a rippling effect on the decisions taken on other planes.

The Take Away

UX design is a broad discipline, one that involves multiple activities and skills. In the order of abstraction, UX design includes decisions made on the Strategy, Scope, Structure, Skeleton and Surface planes. Visual design is part of the Surface plane and is one of the last decisions taken during a design project.

While UX designers can have all the skills associated with user experience design, it is common for UX teams to have specialists for one or more aspects of the design process. Visual designers, also called user interface (UI) designers, are specialists who focus on the visual aspect of the user’s experience. While UX designers need not be visual designers, visual designers must understand the principles of UX design, to ensure the user has a seamless experience.

References & Where to Learn More

Explore the five elements of UX in our foundational course, User Experience: The Beginner’s Guide

For a deep-dive into visual design, take our course: Visual Design: The Ultimate Guide

Read the full framework of UX in this book:
Jesse James Garrett, The Elements of User Experience: User-Centered Design for the Web, 2002

A sample chapter of Garrett’s book, Meet the Elements, is available on his website.

The original poster drawn in 2000, which shows the breakdown of all the elements, along with the different tasks, is available on Garrett’s website here.

Learn more about different UX Roles within a company: The Ultimate Guide to Understanding UX Roles and Which One You Should Go For

Hero image: © Picjumbo.com, CC-0

691 shares

Open Access—Link to us!

We believe in Open Access and the democratization of knowledge. Unfortunately, world-class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.

If you want this to change, , link to us, or join us to help us democratize design knowledge!

Share Knowledge, Get Respect!

Share on:

or copy link

Cite according to academic standards

Simply copy and paste the text below into your bibliographic reference list, onto your blog, or anywhere else. You can also just hyperlink to this article.

Kasturika, K. (2021, November 1). The Relationship Between Visual Design and User Experience Design. Interaction Design Foundation - IxDF.

New to UX Design? We’re giving you a free ebook!

The Basics of User Experience Design

Download our free ebook The Basics of User Experience Design to learn about core concepts of UX design.

In 9 chapters, we’ll cover: conducting user interviews, design thinking, interaction design, mobile UX design, usability, UX research, and many more!

A valid email address is required.
316,132 designers enjoy our newsletter—sure you don’t want to receive it?

New to UX Design? We’re Giving You a Free ebook!

The Basics of User Experience Design

Download our free ebook The Basics of User Experience Design to learn about core concepts of UX design.

In 9 chapters, we’ll cover: conducting user interviews, design thinking, interaction design, mobile UX design, usability, UX research, and many more!

A valid email address is required.
316,132 designers enjoy our newsletter—sure you don’t want to receive it?