Website 2.0 is here! And it’s looking fresh, if I do say so myself 😎

Now I’m not going to say that "it’s been built from the ground up". Because it hasn’t. When I released the first version of this website at the beginning of the year, it was the first time I’d used Framer, and the first time I’d really designed a website for myself - all my previous endeavours were built on templates in Squarespace or Webflow. And whilst I was pretty happy with what I produced, I knew that the website suffered from two things; my lack or familiarity with Framer, and my desire to add everything I could thing of, in one go.

I’ve now been using Framer for about 6 months, tinkering away at my own website, and building new ones for clients under ninethreeone. As I’ve now become more comfortable in Framer, and as I’d spotted several things that I’d overcomplicated, I thought it was about time for a redesign

Colour palette

When I set up the colour palette at the beginning of the year, I decided to "future proof" myself by creating 9 values of varying lightness, for each colour, and included colours "just in case". This meant that my complete palette wasn’t far off 100 colours.

I don’t think this was the wrong move; I’ve worked on projects where I’ve initially created a much smaller palette to start with, and it’s much harder to fit new colours in, than it is to remove unused ones at a later date.

I looked through my site at which colours were currently in use - knowing that the site was more colourful than I wanted it to be anyway - and cut out the unused ones. I slimmed the palette down to 5 grey values, the primary orange, and 3 shades of each supporting colour that I actually needed

Colour consistency across pages

This ties in to the previous point; as I’d created a palette with so many colours, I wanted to make sure I was using them. So I decided that each main page (About, Work, Blog etc) and their corresponding child pages would each use a different coloured theme. This meant changing the colour of supporting UI like '.' at the end of an H1, or underlines and dividers, to the colour of that theme. But at that time I also remembered about the setting in Safari that allows the browser header to adopt the body colour of the website you’re currently viewing. Once I enabled this myself and started to see it in action on others' websites, I wanted to do the same on mine, so I changed the body colour of each of those main pages to correspond to their theme too

At first I thought this was quite fun and cool and novel. But it didn’t take long before I found it annoying that my browser would change colour with (almost) every click. And in addition to that, if I went onto a different tab, and then wanted to get back to my site by clicking on its tab, I’d sometimes think I’d clicked on the wrong tab because everything was purple for example.

It was all-in-all a fun experiment, but I’ve now undone all of this and use the same orange theme on every page, which in my opinion makes everything feel much more together

Nested pages

As I mentioned in the last section, I was applying those themes to the parent pages, but also to all of their children. And let me tell you, there were a LOT of children.

I think when I first built the site, I didn’t really have much of a structure in mind, beyond the main few pages. Similarly, whilst I’d drafted a lot of the content I wanted to include, I’d also left lots of gaps that I told myself I’d fill in, once the site was built. Combining both of these things led to an issue where I kept creating new child pages every time I thought up some content that deviated every so slightly from the content on the parent page. This meant that I ended up with pages that were 3 or 4 levels deep, which not only meant a lot of maintenance to keep all those pages up to date, but it also created navigation problems. If any website visitor had any chance of finding those pages, I needed to make sure I had buttons everywhere, links back to the parent (and grandparent??) pages etc etc

It was all too much to maintain, and a nightmare for anyone to navigate. So I’ve removed most of the children and instead opted for longer parent pages

New fonts and styles

This is probably the part I was most excited about. I can’t remember how I found it, but I stumbled upon Vault Alarm by Simplebits and I loved it. But more importantly, I loved the idea of having a thick, weighty, bold font that I could use to title my pages. Up until that point, I’d only ever used a single font on a single site, and relied on colour and font weight to provide distinction between different headers and body text. But now that I’ve seen how good it can look to have a "statement" font, paired with an easily legible, "default" font, I can’t imagine going back

Disclaimer: if you visit the Simplebits website and notice any similarities between it and my own website, I can assure you that this was purely coincidence, but seeing their website did certainly help me validate using orange as my primary colour 😅

Simplified blog

The blog was one of the first things I built when I first set up this website because I wanted a place to share stuff. I was encouraged by other internet folk who had blogs, posting short, ~2 minute long blog posts about whatever they felt like, and I wanted to do the same

Things started off fairly well, but I found that I’d accidentally designed it in a way that was putting me off writing new posts.

On the blog page, alongside the title and description of each article, I wanted to display a thumbnail that would hopefully entice visitors into clicking on the article. Once they got into the article, they’d see a full width header image, showcasing some of the things they were going to read about. And then if they decided to share the article on social media, I wanted a unique 'share image' to be used, again showing off what was in the article.

This meant that for each article I wrote, I ended up spending twice as long designing graphics for it, to the point where I lost interest in writing the post altogether

I’ve now removed these thumbnails, header images and share images, which should halve the amount of time it takes to publish a blog post, and will hopefully lead to me writing more, which was my goal right from the beginning

In conclusion

This website is still a 'forever work-in-progress' - I’m going to continue tweaking it, adding to it and improving it over time, whilst also using it as a bit of a sandbox for testing design ideas and any new stuff that I discover in Framer. I hope for now that you like what you see, and keep your eyes peeled for whatever updates come next

Thanks for reading!

Alex :)