Skip to content

Subtle Intentionality in Branded UIs

We’re a studio that builds custom websites. We could certainly build templated websites, but we believe our skills are best suited for creating value through tailor-made products.

a small orange lego brick on a larger panel of blue lego brick

I want to dig into what that looks like for UI, because the spectrum of customization can run from barely modifying Bootstrap to something more akin to Pimp My Ride.

We aim to land somewhere in the middle: noticeably non-generic yet sophisticatedly subtle. Achieving such balance is full of nuance and not without its challenges. But the reward, for those who see it, is a glimpse of the artist’s hand. It’s subtle intentionality that makes something cleverly custom.

Here’s a high level look at three facets we scrutinize in pursuit of intentionally branded UIs:

1. Color & Type

Let’s start with the elements that are foundational to creating a branded interface: color and type. A tell tale sign of a templated website is when these two don’t quite match a brand. A website might require a wider variety of colors or typefaces than other branded communications, but any additions should be intentional and easy to justify.

Often, our design intent is to use limited color palettes and no more than two font families. Sure, there’s a “less is more” vibe going on here, but we feel this really helps brands commit to a tone within their UI. Active? Serious? Friendly? Trustworthy? There’s a certain confidence that comes with leaning into only a few baseline elements, and in doing so we help brands avoid looking like they’re trying too hard to hit.

hidden level's homepage

Ex. Hidden Level’s UI sticks to a primary color, an accent, and some neutrals

2. Shapes

While it may be true that much of the web shares basic components and layout, that shouldn’t discourage designers from exhausting methods for customization.

strategic's logo and team member container share the same angle

Ex. We matched the angle used in Strategic’s logo in this section separator

For example, we often make callbacks to a company’s logo or brand elements in imaginative ways. Though few would ever notice, we try to derive things like the degree of an angle or type of curve and mimic them in the shape of buttons, containers, and so on. If nothing else, it creates a story and hopefully some uniqueness for the UI.

3. Backgrounds & Patterns

I believe everything in web design should be an intentional choice, right down to backgrounds. That said, I’m sometimes guilty of defaulting to a white page background color when a slightly warmer cream would be a more deliberate choice. The same is true for solid backgrounds in general, which are so prevalent that it’s difficult to have any sense of ownership or customization in a site’s design.

We find subtle patterns are great for making backgrounds feel more intentional. And not just any subtle patterns, but ones who have rhyme and reason. It needn’t always be composed of brand shapes, but there should be a nod to the brand in some way.

two background elements on that use a subtle wave pattern

Ex: Squint and you might be able to see the subtle waves on, a nod to the side profile of bacon ;)

The Logo Test

Writing and photos often play primary roles in site ownership. But have we done at least one small thing to make the UI feel unique to its brand as well?

A good way to check if we’ve succeeded in tailoring a website is to put someone else’s logo on it. If there’s not a slight tension, chances are we can push the UI to have more personality. Too much tension and we’ve likely overdone it.

Other Posts on Art Direction