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. 

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.

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.