My old personal site dated back to my journalism days. It was primarily a home for copies of articles I’d written and broadcast material I’d produced.
These days, I’m a lot more involved in designing and developing digital services, and it’s about time I had a personal website that reflected that. Ideally, I wanted to build a site with the same design process I use with clients, and in my day job.
I also had a separate site I used only for freelancing. I found myself unhappy with both of these, unwilling to put the time into maintaining them.
Here’s the process I went through to fix that.
For the last year I’ve been working with HMRC and DWP to build better digital services for GOV.UK. The design of GOV.UK is simple, with a strong visual hierarchy, emphasis on clear typography and masterful use of whitespace.
The reasons for this are partially technical; GOV.UK needs to work as well for people in the Scottish highlands with ten year-old smartphones as it does for Macbook users in London.
It’s also partially for usability. People less experienced with computers find it easier to work with a concise visual hierarchy anchored around clear written content, rather than loud images.
I’ve come to appreciate the aesthetic value of simplicity and minimalism in design.
I picked the font Exo, which is distinctive without looking kitschy, has plenty of weights to choose from, and is readily available through the speedy Google Web Fonts service.
I went with a simple colour palette with a single turquoise brand colour to pick out calls to action, paired with whites and dark greys. I checked the palette for sufficient contrast.
Now I’d chosen my type and my colours, the last big step was to create a simple icon to represent my name. “Joshua Hackett” is too long to put in a header, especially on a mobile screen. I went with my initials, with a simple stylised angle on the J.
Once I’d come up with a brand I was happy with, I moved to paper prototyping potential page layouts. When I felt comfortable with the direction of these, I started adding layers of visual design in Sketch.
If I were doing a client project, I’d have tested each of these iterations with real users, seeing if they could find what they needed on the site.
Since this is a personal site, I used the opinions of my friends and fellow freelancers instead, along with analytics data from my old site.
In all my layouts, I tried to establish a clear visual hierarchy and make sensible use of whitespace.
Building reusable components
I built the site’s design around principles of atomic design and design systems.
Rather than treating every page as an irreducible piece of design, I broke pages down into versatile, reusable components. I had a good idea what these should be long before I started coding.
For instance, “floating” cards show up again and again, in slightly modified forms, on different pages.
All these cards have the same basic look — rounded corners, a subtle drop shadow, a slight animation when the user hovers over them — but the content within differs. One single design component manages all these use cases.
I used React components within the static site generator Gatsby to achieve this kind architecture.
I also made use of the BEM methodology for writing CSS. Splitting my CSS into small yet irreducible “blocks” was a good fit to the component mindset.
A focused portfolio
I had a lot of stuff in my portfolio: websites, magazine and newspaper layouts, audio. I needed to slim it down, for my sake and for the sake of potential clients.
Some of the earliest work just wasn’t that good compared to what I make nowadays, but some just didn’t fit so well with my current professional identity.
In both cases, I had to say goodbye to a fair amount of older work, and focus on the key contributions of design and digital development.
It’s better to have a few great things in your portfolio than a dozen mediocre things.
I used the fantastic Netlify to host the site for free. Between their global content delivery network and the Gatsby software, I got a lot of performance optimisation for free.
I tested the new site as I went along, making particular use of Google’s Lighthouse Audits and PageSpeed Insights test. Initial results were promising, but pointed out issues, particularly with image optimisation, that I needed to address manually.
And my time working on GOV.UK services has taught me that there’s no substitute for building empathy with your users. So, in order to make sure my site is fully accessible, I tried to navigate it with my eyes closed using a screen reader, without using the mouse, on a simulated slow connection, and so on.
Forcing yourself to experience these circumstances can help you notice issues with your site you didn’t realise were there, and make a better experience for users with and without disabilities. I thoroughly recommend the Funkify Chrome extension to help with this.
The new site is now live. In the spirit of continuous improvement, I’m constantly refining my portfolio and making tweaks to the design, but it’s already a much more effective summary of my professional identity than what came before.