A fresh design

Come get your Vectorheart!

The last time you visited here, you probably saw 1 of 2 possible designs. If you visited at the start of the year, you saw the almost-boilerplate NextJS setup. If you visited within the past few months, you saw the 3D 'living city' design.

Regardless of which you saw, we're onto something new now, with a 'Vectorheart' aesthetic. For context, that aesthetic is commonly associated with the 'Wipeout' game series.

Why change?

I looked at the previous design, and found myself asking some questions:

• Who is this for?
• Why is this living city even here?
• Why is the readability so "meh"?

The answer to all 3 tie together.

The first one is 'people who might actually visit the site'. See, I built the previous site as a bit of a playground (a lot of my projects go that way), but that doesn't always work for projecting what you're trying to project.

The second one was more of a quirky idea. I wasn't sure how to showcase different project types I'd worked on. I did genuinely like the idea and how it was presented in the end, but it also felt forced. Sort of like it was a standout feature, taking away from what this site should really be about. When the focus should have been on the content, it was instead taken away by the background, which ended up being covered by blurred-glass panels.

As for the third one? It had a bit of a brown-ish vibe to it, and to actually make content stand out, I had to resort to the glass panels or similar. I don't dislike that aesthetic, but it felt wrong for the context of the site.

I looked at the home page not too long ago, and realised it felt kind of cramped. I could navigate to latest blog or projects if I needed to, but it took a bit of looking and thinking. The visual part wasn't overwhelming as such, but it didn't feel 'clean'.

Why this aesthetic?

I spent a decent amount of time looking through Dribbble for inspiration. There's a lot of 'sameness' about the designs I saw - that's not to say they're bad, just that they didn't really feel like they'd stand out. There were a few unique ones though. Some which were clearly designed for selling service, others which were portfolio presentation works in themselves. None of them really vibed with me. I didn't know what I wanted, but none I saw were it.

I started pinning down the specifics I wanted to address. Readability was a big one, which plays into contrast, white-spacing, and font-size. Contrast is a difficult one to solve when you have colour involved, so why not just do away with colour? That also solves the 'brown' issue of the previous site. White-spacing is also a well known design principle, as it can negate the need for boxes around everything or dividers. Font-size is always a little tricky to me, as I can't really visualise how it'll actually look until we're approaching finish.

Buuuuut... I love oversized text in designs. In this new site design, the purpose of the oversized text on the home page is that it tells the visitor who I am, but if even if it's just use sparingly as a design element, I still like it.

So, at this point, I've settled on monochrome (there are grey elements in this design) and large text with nice spacing. I already have content for the site too.

Then it hit me. I don't know what triggered it, but some part of my brain recalled some sort of design style featuring small symbols like crosses, squares, etc. I briefly recall a 'demo disc' pack that I'd gotten with the PSOne (the smaller version of the original Playstation 1) back in the early 2000's. It was an off-white colour, and I'm sure I remember it having randomly scattered symbols on the design.

Thought about it a bit more, and realised that I was probably thinking about the Wipeout aesthetic. That features geometric lines, random glyphs and 'HUD elements', and flat colouring. It's pitched as a futuristic-tech aesthetic, with strong hints towards an almost east-Asia origin as the stereotypical 'high tech' origin. Although it is typically presented in colour, it also works well if you transfer it into monochrome - so that's what I went with.

The reason I went with this aesthetic is because it solved the problems I had.

Did anything change during development?

Absolutely! One of the things I implemented during development was an old-school style 'Mac menu flash' effect when clicking on a linkable element. It felt really cool, harkening back to a long time ago - being that we're on a monochrome design.

Then I considered the downsides. Some people have photosensitive epilepsy, and flashing elements could cause problems for them. So, as cool as I thought it was, I opted to remove it before release in the interest of safety.

In it's place, I did opt to implement colour invert on hover. This was actually super nice to do in an aesthetic that isn't colourful. It solves a visibility problem too I feel.

The header icon also changed a bunch during development. Originally, it said 'Scott P.' and had a simple triangle (just as a placeholder, though it did fit with the aesthetic). Then I changed it to say 'Software Developer', but in Japanese... before the cringe overwhelmed me. Not because Japan is cringey (absolutely not!), but because I'm not Japanese, I don't speak Japanese (I wish I did), and it feels forced to do it for the sake of having something there.

I eventually settled on the 'outline globe' icon, and you know something? I think it works really well. It's to the point, indicates what it does, but doesn't feel forced. It enhances the design.

Why light mode? Don't developers hate it?

I'm sure some developers don't mind it, but for me, yep, you're right that I dislike light website generally. I think I found a little way to take the edge off: Don't use pure white.

I picked this idea up a while ago when building a website for a client. What I originally thought was white didn't seem to sear my retinas as much. It turns out that it was actually an off-white colour. More than that, it was a super-subtle gradient.

Go too far, and you end up into clearly grey or yellow. Keep it subtle, and you avoid burning eyeballs as much but still get the benefits of contrast against content.