It’s been over 4 years since I told myself I’m going to build myself a new website. There’s been many ideas, revisions and scribbles in the notebook but how do you finally settle on a design that’s so personal to you.
Friends have asked why I don’t have anything on my website, and why it’s taken so long. Honestly, I’ve not been in any rush. They’ve said ‘just put something up there’, and ‘no-one will really care if it’s not perfect — you can always change it later’. Well, I care. I’ve been patient, and I’ve finally settled on something that I think reflects a bit of me. Clean, content focused with a few extra details that make magic. That, and I’ve got some big ideas lined up that would be a shame not to have somewhere to document them.
What I found hardest about this whole endeavor was creating a brand that spoke to who I was and what I did. When I place my brand on something it has to show that I’m a designer who loves to work with data. When I work with visualisation I always say that the data dictates the colours. The data here is my name, and without being all fancy I just want people to remember it when they see a piece of my work, ergo like the message the colours should be black and white.
The most important aspect of the website was to be able to show big, rich images with clear type at an easily readable size and to not let a loud or complex design detract from that. To achieve this I again followed the new Dave Bowker brand by going for black and white, with a splash of colour here and there to categorise the pieces of work.
The focus was to be more of a portfolio site than index of articles, however I didn’t want to exclude the possibility of a future project having a much longer description which is why I never opted for a pure picture gallery type layout. What I went for was to seperate categories of work from everything else and give them a slightly different treatment to whatever else might end up on here. That way the journal page with scope for longer articles could be simply listed, while the front-page and work category layouts could use the work images to show them off more.
I wanted to show images on site of at least 1260px wide, so a responsive site for users of smaller screen sizes and mobile devices was an absolute necessity. Very early on (of this iteration) I decided to hang the navigation and branding on the left keeping them in view yet out of the way so I can try and create a connection with the user. After all, a brand is about recognition and I want to seed that relationship as much as I can.
With 1260px wide images and another column of 140px the site is big, and line lengths aren’t really optimal for reading at that width. I decided to knock out 2 columns on the right for text and leave that area blank, but let the header, footer and those large images flow into that extra space. Resizing the window smaller first scales the main content images, pushes the footer below the left sidebar column before all being scaled down together from then on. This gives a really nice layout for all screen sizes, and even tablets and mobiles have their own adaptions for a better experience.
Details Vs. Optimisation
I wanted to do something on the site, and visualise the type of content that I work on that will expand and grow with every piece of work that’s added. This meant focusing on the structure of the site to get the content in order, then trying to make WordPress do something that it’s not really built for nor optimised to do — queries on queries on queries, and performing them quickly.
Just working on the work category visualisation on the footer adds a fair few queries to WordPress’ database, so I’ve employed a number of various methods to give the hosting servers a hand. If you’re non-tech you can skip this bit.
- First, proper loading of stylesheets via
- Then an HTML optimser such as WP-HTML-Compression saves between 20-30% of the page size.
- Next, push all of this optimsied code through WP-Super-Cache so that it caches the database requests and stores them in plain HTML.
- Also because of the large size of images on this site I use lazy loading to only load them when they’re coming into the viewport.
- Finally, I run everything through CloudFlare to optimise the delivery of the page.
In the end this site is a place for work and to document the projects I do. There’s lot’s of little details I haven’t bothered to share in this post (the multiple film references and the dinosaurs!), but the focus is on the work. Go take a look.