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.
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.
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.
Ex: Squint and you might be able to see the subtle waves on hormelfoods.com, a nod to the side profile of bacon ;)