Aesthetics in UX/UI Design

Your constantly-updated definition of Aesthetics in UX/UI Design and collection of videos and articles
848 shares

What are Aesthetics in UX/UI Design?

Aesthetics is a core design principle that defines a design’s pleasing qualities. In visual terms, aesthetics includes factors such as balance, color, movement, pattern, scale, shape and visual weight. Designers use aesthetics to complement their designs’ usability, and so enhance functionality with attractive layouts.

“Design is the method of putting form and content together. Design, just as art, has multiple definitions; there is no single definition. Design can be art. Design can be aesthetics. Design is so simple, that’s why it is so complicated.”

— Paul Rand, Art director & graphic designer famous for logos such as IBM’s

See why good aesthetics involves careful consideration.

Aesthetics in Design ≠ Art

In this video, Michal Malewicz, Creative Director and CEO of Hype4, explains why you don’t need to be an artist to become a visual designer

Show Hide video transcript
  1. Transcript loading…

Aesthetics is an age-old principle that revolves around the nature of beauty and the fact that people prefer pretty things. It’s central to the fields of architecture, graphic design and more. As a vital ingredient in user experience (UX) design and interaction design, aesthetics impacts an interface’s UX in several ways. Humans are hard-wired for visual input, and users’ first impressions typically form in 50 milliseconds – as their gut reactions guide them to either continue using your design/product or abandon it. Aesthetics here refers to the lines, colors, spacing and more on websites and apps, namely what elements you choose and how you apply them. For example, when your website has good aesthetics, you:

  1. Create an attractiveness bias – to appeal to users on a visceral level, leading to:

    1. Emotional design.

    2. More traffic.

    3. More time spent on site and page/screen views.

    4. A lower bounce rate.

  2. Make users more tolerant of usability issues – Studies show that users rate visually appealing designs as more usable than they truly are. This aesthetic-usability effect has been explored extensively, notably by UX design pioneer and author Don Norman.

Attractiveness bias is a short-term effect, though – good looks can’t save a bad product. So, it’s vital to design for the user experience and optimize usability, applying well-considered aesthetics to work together with your design’s functionality.

Copyright: Fair Use

Google’s simple design showcases highly effective aesthetics – instantly declaring its purpose as users’ eyes are drawn to the function in the calm, clean layout they expect from Google.

Leverage Aesthetics to Make Beauty Work Best

In this video, Michal Malewicz talks about the aesthetic usability effect and explains why it’s important to keep it in mind when you create your design.

Show Hide video transcript
  1. Transcript loading…

Here are some key points:

  • Visual appeal exists in objectivity and subjectivity – While some aesthetic choices will resonate with all users and others will be flawed virtually everywhere (e.g., red elements on blue backgrounds), aspects of your users—including their culture, age and educational level—will impact how they perceive/receive your design. For example, the dangerous/racy connotations of the color red in the West contradict how Eastern cultures typically view red. So, user research is essential.

  • Let form follow function – This classic design concept means an object’s form (aesthetic design) should stem from the function it executes. As renowned designer Charles Eames stated, “Design is a plan for arranging elements in such a way as best to accomplish a particular purpose.” Therefore, it’s vital to set out well-chosen page/screen elements harmoniously and with a good visual hierarchy so you:

    • Guide the user’s eye to the page/screen’s functionality.

    • Make the aesthetics consistent with what users expect to see (e.g., sans-serif fonts for more casual websites).

  • Use timeless rules/principles such as the golden ratio, rule of thirds and Gestalt principles to optimize your choice and use of elements – to help eliminate users’ uncertainty and quickly give them the right visual cues. For example, by taking advantage of the Gestalt principles—where you exploit universal truths about how humans see things—you can achieve optimal contrast, spacing and more to please (or calm) users while sending the right messages about your product and brand. That includes maintaining transparency to maximize users’ trust.

  • Remember the context – Users access and use designs and products in—often complex and sometimes chaotic—real-world situations. They’ll want to achieve goals and get results fast, and need simple, crisp layouts with elements that maximize ease of use. When you respect their in-the-moment needs and use (e.g.) chunking to help lighten their cognitive loads, their appreciation will reflect in your design’s success. You can use aesthetics to highlight your design’s most crucial functionality and mute or disguise less critical functions. Good aesthetics can be extremely simple, as Google.com demonstrates.

Above all, design is a conversation with your users – and therefore why aesthetic and minimalist design (or zero clutter) is a principle used to check for usability issues in heuristic evaluation. Your element and layout choices should show your users the right things in the right way while telling them a fresh, captivating story about your brand. All your elements—including their overall effect together on each page/screen—should serve a purpose and instantly direct users to what they want to do. To produce a clean, good-looking and highly usable design, you’ll often need to make compromises and cut back on what to include. However, your design’s critical functionality always comes first – an attractive product that draws users to use it for its main purpose. Unlike art, good design aesthetics should be easily understandable – where users never have to guess what your design means.

Our landing page’s aesthetics supports its functionality.

Learn More about Aesthetics

Here’s just one of our courses addressing aesthetics.

Watch Michal Malewicz’s Master Class Beyond Interfaces: The UI Design Skills You Need to Know to learn more about how to design great user interfaces.

Read a thought-provoking account about aesthetics from a Google product manager.

See one designer’s detailed take on the relationship between aesthetics and usability.

This UX Collective blog explores aesthetics in various senses.

Find an additional, example-rich dimension of aesthetics here.

Answer a Short Quiz to Earn a Gift

Question 1

What is a core component of aesthetics in design?

1 point towards your gift

Question 2

How do aesthetics in design primarily differ from art?

1 point towards your gift

Question 3

What is one impact of good aesthetics on a user's experience with a design?

1 point towards your gift

Question 4

How does culture influence design aesthetics?

1 point towards your gift

Question 5

What is a practical way to apply aesthetics in web design to improve usability?

1 point towards your gift

Better luck next time!

0 out of 5 questions answered correctly

Do you want to improve your UX / UI Design skills? Join us now

Congratulations! You did amazing

5 out of 5 questions answered correctly

You earned your gift with a perfect score! Let us send it to you.

Letter from IxDF

Check Your Inbox

We’ve emailed your gift to name@email.com.

Do you want to improve your UX / UI Design skills? Join us now

Literature on Aesthetics in UX/UI Design

Here’s the entire UX literature on Aesthetics in UX/UI Design by the Interaction Design Foundation, collated in one place:

Learn more about Aesthetics in UX/UI Design

Take a deep dive into Aesthetics with our course Emotional Design — How to Make Products People Will Love .

All open-source articles on Aesthetics in UX/UI Design

Please check the value and try again.

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 page.

Interaction Design Foundation - IxDF. (2016, August 31). What are Aesthetics in UX/UI 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.
314,785 designers enjoy our newsletter—sure you don’t want to receive it?