If you’ve been following me for a while, you’ve probably realized I do a website refresh roughly every six months. I’ve been doing this for a very long time (probably more than a decade) and I do it mostly because I can but also because my website objectives change that quickly.
Things are a little different than when I launched last time. It was important then to emphasize the content as I worked on nailing down the rhythm. I removed a lot of the ornamentation off the website to encourage myself to focus on writing. Now that I have a weekly cadence down I still had a distribution problem to contend with.
After a couple of months of writing some people had noted they don’t see my tweets about my writing or forget about checking. I started a mailing list to give people an option to opt into updates (although honestly it makes me pretty nervous). I also wanted more flexibility for other content and the website I had would not scale so it had to go.
My website is set on a 12 column grid which I use out of laziness. In the print world I tend to learn towards using odd-numbered columns. I wanted something with more movement so I arranged everything in a slightly inaccurate ‘S’ shape on the grid and went with diagonally sliced rectangles. This is a pretty basic usage of a grid system.
To keep the rhythm of a website consistent, I usually assign what I call a magic number to a lot of the elements and keep repeating it or multiples of it over and over again. This website makes use of multiples or divisions of 30 and 50. Spaces between elements are measured at 50px or 30px depending on the context.
This layout required me to break this rule quite a few times in development to get the type to align exactly the way I wanted to. Typography isn’t the best on the web and I don’t like to leave it up to code to decide how type will sit. Typography is more of an art than a science.
There are three templates to this website: a homepage, a square subpage, and blog singles. They use the same styles all the way through but the square templates get a fancy background picture. This will make them easier to create going forward if I need anymore new pages.
Usually I don’t have to do this for my website because it was fairly simple until now. Given that I was going to have multiple pages with a few different templates, I pulled together a quick style guide to ensure that I was staying consistent. This also helps keep the number of styles created to a minimum and makes my development move a lot faster.
This website is mostly on white and has some deviating styles for when the content sits on a darker background. I noted only the deviated ones and when the styles remained the same from the first to last breakpoints.
If you double-checked all my styles you'll notice some of what is written is incorrect. There are typically a few changes that happen from Design > Development. These things happen however I’ve generally kept the majority of the styles.
I went back behind the camera to shoot a couple of self-portraits for use on this website. In the past I’ve used the Annie Leibovitz lighting set-up (double diffusion under a large studio light) but this time I opted for daylight against a DIY black studio back-drop. The rest is just understanding how light hits you and how to set off a pocketwizard with your foot.
The rest of the photos are pulled from my Instagram↗︎. I overlaid them over colours to reduce the intensity. The added benefit of this technique is you can save these photos at a pretty low resolution and they’ll look pretty decent. Performance wins all around.
It took me about a week to go through this process from beginning to end. I’m very used to this exercise and it’s fun to keep launching things to my .com. If you have any thoughts about it, let me know through the Dribbble shot↗︎ or on Twitter.