The principle of design variety states that multiple contrasting elements can capture user attention. This is based on the human desire to indulge and explore and the fear of missing out. Like all principles of design, variety isn’t inherently beneficial to users, but it’s a good rule of thumb to keep in mind when trying to capture their attention.
In this article, I’ll talk about the variety principle of design and how it compares to other similar principles of design. I’ll also share the various ways we can cultivate variety to capture user attention.
To fully understand variety in UX design, you’ll need some examples and a comparison to other principles of design.
So first, what does variety in UX design actually look like?
And how does variety differ from similar-sounding principles?
Unity is when elements work well together to achieve a common goal. For example, a magnifying glass icon and the word “Search” could work well together to create an actionable search button. Using a variety of icons across several buttons could capture more attention because each button would look different.
Balance refers to any number of elements that are, by any measure, equal (and are visually depicted as so). Similarly to unity, variety and balance aren’t mutually exclusive.
As an example, a variety of icons can convey equality by being the same size, whereas a variety of unequal headings can be different sizes to communicate a visual hierarchy, which by nature is imbalanced.
Contrast is how different any number of elements are from each other. It’s essentially the opposite of balance. To reiterate, various elements don’t have to be contrasted in every single way to capture user attention — they can be balanced in some ways and contrasted in others.
So, with that in mind, we could say that contrast is for meaningfully conveying the difference between elements, whereas variety is typically about being superficially different just to capture attention.
It’s like dangling keys in front of a baby — it means nothing but captures their attention.
Poor usability and accessibility (or, more specifically, clutter and chaos) happen when you implement too much variety.
Firstly, you don’t need to utilize variety when users are already on the path you want them to take. Variety is used to draw attention to your conversion funnel when users aren’t in it or are in it but disengaged. When users are off-track or disengaged, they’re typically overscrolling, overscanning, not really reading, and perhaps don’t even have or no longer have a goal. Variety is a great way of quickly turning that around.
In any other case, we should avoid variety and instead help users complete the tasks that they want to complete. In these cases, their attention is already captured, so variety isn’t needed.
With all of that in mind, let’s explore the different ways to cultivate variety and the scenarios in which it makes sense.
A neat way to cultivate variety is to use multiple colors, but only if the page is fairly monochrome to begin with. Since the goal is to captivate rather than provide visual cues, brand colors are a great choice because they typically don’t provide visual cues.
This tends to work well for brands like Ballpark, which have a rich color scheme:
Typographic styles carry meaning. Italics are for phonetic emphasis, bold means important (which is why headings are bold by default), and underlines are for links. And font sizes should be relative to your design’s visual hierarchy in order to convey the structure of the content. That only really leaves us with the font families as a method of cultivating variety. But then using too many fonts is known to look quite ugly. Where do we go from here?
Well, using a different font family for only one word or one phrase in key sections is an option, just like Offspring Films has done:
Using icons is also a decent option because each one’s different. The variety can spice up a bland-looking component, as it has done on Stripe’s marketing page:
That said, this technique works especially well with a high density of text. You’ve probably noticed this on social media platforms like X, which forgo labels for their engagement buttons in favor of a variety of icons:
Using decorations is a bold way to cultivate variety. If used decoratively (like in the Stripe example), decorations can include illustrations, motifs, textures, and even icons. Just make sure they draw attention to the key sections without distracting from the important information they contain.
Presenting dynamic layouts and content can make apps and websites fascinatingly engaging. Although it can force users to zig-zag across the page and even interact unnecessarily, which in theory is bad for UX, not overdoing it can create just enough friction to make them slow down and engage but not quite enough to frustrate them.
This is super common on marketing pages, like this one from Marvel:
As you can see, there are some left/right/middle-aligned alternations and a vertical tabbed component, but it still looks extremely clean and feels really satisfying to use — not chaotic at all.
Getting creative with sizes and spaces can be a powerful way to cultivate variety.
For example, you can allocate more space to certain sections to reduce distraction from nearby elements or pack related pieces of content tightly together to ensure that users can view all of them at once. Both techniques can capture user attention if used in a standout-ish way, with the latter technique being better for sections with more clutter.
On Shopify’s website (and many others), the hero section has been expanded to fill the viewport, which narrows the focus on the message and CTA. This is especially noticeable because the rest of the page utilizes other sizing and spacing options. In fact, the page expertly leverages the Von Restorff effect by mixing variety and consistency to make key sections stand out.
Using shapes is about thinking abstractly and conveying a brand identity through aesthetic qualities like sharp, curvy, linear, circular, singular, repetitive, standard, and quirky (to name a few). Shapes are basically motifs, except that they can form the layout itself.
Stripe famously does this using horizontal slopes:
And here’s an even crazier example from Atlassian:
The point is that these sections stand out among a variety of others, some of which utilize the same aesthetic and others of which are relatively bland (by design). They create variety but in moderation.
Whether interactive or looping, animations can be the boldest and most immersive way of capturing user attention. However, using a variety of animations rapidly pushes designs into ‘over the top’ territory, so this is most definitely one to use in moderation.
I love Playground’s website. It uses animation (and layout) in so many different ways. Although it can be over the top at times, it engages you in every section, which is exactly how we should use the variety principle of design:
Variety can be a by-product of visual hierarchy.
For example, headings typically vary in size to convey their position in the content hierarchy. In addition, buttons typically vary in style, color, and/or size to differentiate between the primary CTA and other CTAs.
So before you do anything, see how much engagement you can create with a typographic scale and a set of well-designed CTA buttons:
The principle of design variety is all about keeping things fresh and grabbing attention. It’s your go-to move when users start zoning out or missing key moments in your design. By mixing it up — whether it’s with colors, shapes, layouts, or animations — you can create a dynamic, engaging experience that pulls users back in.
But remember, variety is a tool, not the whole toolbox. Overdoing it can lead to clutter and frustration, so use it sparingly and with intention. Pair it with other principles like balance and unity to keep your designs both exciting and user-friendly.
How do you use the principle of design variety in your work? Drop your ideas in the comments. I’d love to hear them.
LogRocket lets you replay users' product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.
See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.
Bento grids are creative, dynamic, and undeniably modern. Here’s more on how these layouts are transforming UX design and how to build them step-by-step in Figma.
Voice is your brand’s vibe; tone is how you deliver it. Here’s how they work together to shape user experiences.
Icons have guided us through apps and websites for decades, but it’s time for an upgrade. Let’s rethink what works, what’s outdated, and what’s next.
Poor data quality from response bias and the Hawthorne effect can derail your UX research. Here’s how to identify, prevent, and correct these common pitfalls.
Learn more →
