Revisiting my personal brand for 2021

Finding some clarity through simplicity and focus

I have a lot to do this decade, but my focus for this year is focus itself. My goal is to wind down all the things in my life that I’m tired of and drain my energy, reallocating that time to something new and fulfilling.

My first step to achieving this is revisiting my personal brand, something I haven’t done properly or thoughtfully in long while. Taking the time to think about my own brand was refreshing, so I thought I’d document some of the decisions I made. I also built the site from scratch on Next.js and Vercel.

Overall Style

I’m a digital product designer by trade… I think. I come from a principled digital design background and my best work (functionally and aesthetically) is usually found in wireframes or minimalist interfaces. Finding my own design aesthetic, or at least one that feels natural when you use it, was as much a return to first principles as it was a choice.

From a utility point of view, I wanted something versatile that could frame all the projects and companies that I work on without clashing too much. This is the same thinking a lot of agencies use when figuring out their brand… or rather anti-brand.

From an intrinsic point of view, I wanted it to feel like an extension of myself. It should be based off the same principles I use when writing a blog post, having a conversation or designing a product. In essence, it should be comfortably simple, otherwise the added cognitive load of growing, maintaining and using it makes it a project in and of itself.

I ended up using a simple layout with soft animations and high-contrast colours to promote easy reading and a sense of calm — something easy to extend, reproduce and scale without much effort.

https://haydenbleasel.com/

Typeface

Working on different brands and products for the last half-decade, I’ve explored more fonts than I want to admit to. However in all that time, I haven’t found one single font that I’d say “hell yes” to for my personal brand.

Part of the problem is just loving typefaces — beautiful combinations of serifs and sans-serifs, different ligatures, alternative letter designs, terminals and skews. But even just looking for a single, no-nonsense typeface, they all had personality that embodied the designers and context that birthed them, so they didn’t feel like they’d be an authentic choice based of anything except style and usage.

But, I was lucky enough to find Universal Sans, a variable typeface generator by Family Type. Playing around with it for hours, I custom-built my new typeface to combine the simplicity of fonts like Helvetica Neue and Plain with the geometry and roundness of Roobert and the character of ABC Favorit Pro.

I combined this new typeface with a larger-than-normal base font size of 18px and a major third’s type scale to create the foundations of the new site.

Animations

When you’re designing a brand with limitations on colour, personality comes to the forefront through things like layout, sound, motion and interaction. The new website has a lot of small animations around the place, from the slight vertical movement when you hover on social icons to the more obvious circular arrow outline movement when clicking a button.

Even subtle animations and movement can make a website feel more alive without drawing too much attention. Large and full-width images across the site have a tiny interaction on them that slowly zoom the image as you leave your mouse over it.

I was also lucky enough to have Gavin Barnett help out with some motion design for the work page, bringing one of my old product illustrations to life as a high-performance Lottie animation.

Build on other platforms

Maintaining content in a codebase or a custom CMS is a job in itself, so my goal this time around was to utilise my existing accounts on Medium and Spotify to power my content. For Spotify, this wasn’t a problem as they have a pretty solid web API. Medium is a different story as they only have a publishing API that pushes content into the platform, not drawing it out.

Thankfully, they do have an RSS feed. It’s only updated every 5 or so minutes so there’s a bit of delay, the XML content comes through pretty abstract and the images are max-res’ed to 1024px, so it took a bit of hacking apart to get it working…

const parser = new Parser();
const feed = 'https://medium.com/feed/@haydenbleasel';

const { items } = await parser.parseURL(feed);

const posts = (items as MediumPost[]).map((item) => {
const content = item['content:encoded'];
const dom = new JSDOM(content);
const doc = dom.window.document;

return {
title: item.title,
id: slugify(item.title as string, {
lower: true,
strict: true,
}),
date: item.isoDate,
summary: doc.querySelector('h4').textContent,
image: doc.querySelector('img').src.replace('1024', '3840'),
tags: item.categories,
};
});

Intelligent Design

I’ll spare you the cliché Steve Jobs quote but a lot of good design goes beyond how something looks. The playlists section of my website redesign is particularly interesting — after pulling in my playlists using the Spotify Web API, the button colours for individual playlists are generated from the least-contrasting dominant colour in the playlist image that still has a colour contrast ratio of AA.

I used a bit of image onload magic together with get-contrast and color-thief:

import Image from 'next/image';
import ColorThief from 'colorthief';
import { isAccessible, ratio } from 'get-contrast';

function getColor(image: HTMLImageElement) {
const colorThief = new ColorThief();
const palette = colorThief.getPalette(image, 8) || [];

const colors = palette.filter((color) => (
isAccessible('#FFFFFF', `rgb(${color.join(',')})`)
)).sort((a, b) => {
const ratioA = ratio('#FFFFFF', `rgb(${a.join(',')})`);
const ratioB = ratio('#FFFFFF', `rgb(${b.join(',')})`);

return ratioA > ratioB ? 1 : -1;
});

return colors[0];
}

const [color, setColor] = useState('var(--black)');
const dominantColor = getColor(event.target);

if (dominantColor) {
setColor(`rgba(${dominantColor.join(',')})`);
}

You can browse the full code here but essentially it generates something like this:

https://haydenbleasel.com/playlists

Anyway, that’s probably enough about a website redesign for now. If you want to see how it’s built, you can check out the source code on GitHub. Otherwise, I’d love to have you on my private mailing list. I’ll be sending out small updates whenever I publish a new product or blog article (like this one).

✌️