colophon

COLOPHON

Behind the Scenes

The first time I designed and built my own website it was a long drawn out, indecisive process. I had just received my design certificate and with no portfolio I was ready to venture out in the the world of freelance design. Not having a strong portfolio I wanted to show everything I could do without my site becoming too cluttered or chaotic. I’d struggle to produce anything I was fully happy with and/or I’d change my mind every two weeks. In the end I went through about 4 different designs before finally being happy enough with one to go live. I was thrilled when my site started to take off and be featured on many of the top design blogs around the web.

Although my original site served me well, it was built 5 years ago in a world where iPads were not even a thing yet. A lot has changed since then and it was time to regroup and produce something more current that better represented the work I was doing today.

To avoid the challenges I had with the first site I set some simple rules;

  • Focus on the Work! – Unlike my last site I wanted this site to be a very simple palette to display my work on. The work needed to be the focal point.
  • Break the Mold – I felt since grid based responsive sites became all the rage many sites started looking the same. It was important to me to develop an original way to show my work.
  • About the Details – Subtlety is the key to this whole site. A supporting player in the design but the details keep it interesting enough to keep your attention.
  • Make it personal – this is one thing I wanted to carry over from my first site. I wanted to try and connect with the visitor to the site by not spewing a lot of the same generic bullshit you see in many portfolio sites.

Setting myself these guiding rules made the decision making process so much simpler.

Design Decisions

Responsive

I anticipated that my audience would be on a wide variety of devices but guessed it would be a large percentage of iPhone users – you know what this industry’s like.

The site is optimised for small screens. I use a simple layout, sticking to a single column, right up until my final breakpoint (approx. 1100px) where I load in a sidebar.

My content is mostly articles with a few 600px Instagram photos thrown in, so it made no sense to go beyond this width, even on wider viewports of 1280+. Text reads better in a narrow column.

Typography

With the sites minimal style, the typography had to do a lot of work.

I pushed myself to use a font that was unfamiliar, so I hit the ever expanding Google Web font library.

Futura PT & Adobe Garamond Pro – both from Typekit

Stretto for main header font – inspired by bowies hunky dory album (with image)

Images

I use the LazyLoad plugin to control my images. Some of my photo albums have 20+ photos in them, so the page load quickly adds up. Using LazyLoad allows me to load images as users scroll them into view.

Navigation
Colour palette

I experimented with a few colour palettes; orange and brown, black and white, even purple an pink!

In the end I settled on a desaturated red (#C66) which is only a few hex colours down from the Etch red (#F66).