Follow Your Own Advice

Out of all the advice I give I tend to give this one the most often. It’s old-school advice drilled into me when I was in college. I pass it along to all my students still because I believe it’s just as relevant now to our industry:

Always keep an updated portfolio.

Even if you’re not looking for a job or if you’re happy with your company, you should always have an updated portfolio, somewhere. There are many non-obvious benefits:

  • It’s another opportunity for you to practice
  • It gives you a good sense of progress throughout your career
  • It helps other Designers by providing examples of what you do
  • It helps other disciplines who are interested in our field learn more about our craft and language

In the past four years, though, while I was working at Shopify I didn’t follow my own advice. I had a writing portfolio but let my portfolio languish. As a result, when I finally went through this process I found it difficult to describe my projects a year or two or even three out from launch. The broad strokes are there but the details are lost.

Most of the production work was gone because product iterations overwrite. Even my process work had been thrown away, misplaced, or left behind. While I was able to dig up some mock-ups, it wasn’t the same and it was tedious to remake them.

I generally try to lead by example. So, here it is again:

Always keep an updated portfolio.

Goals

The main reason behind this redesign was to add the case studies–I wanted to feel “finished” with my last position and it felt strange to leave a position with no documentation. I also had a sneaking suspicion that the content was overgrowing the last design and I needed to make room for more writing in the future.

My frequent redesigns have been accommodating for doubling content every year. As you can probably tell, I’m more of an incrementalist than I am a completionist:

As I ready myself to write more for my mailing list, I needed a template that would accommodate for more posts. This meant a better way of dealing with archives and giving people more opportunities to find content that would suit them.

Content Creation

If there’s no content, there’s no website. So, I started my project by writing the case studies I didn’t have. They were written over the course of two-three weeks as I collected assets in the background. Chantel Hamilton[1] helped me clarify the structure of them and I did one final edit during production after a month break for brevity.

I wanted something more personable for my website this time so I decided to supplement a photo portrait with a video portrait. I asked my friend to help me shoot and we ended up with these shots:

My initial potrait shot
My first video portrait

After sitting with the pictures a bit I wasn’t too satisfied so I messaged my other friend Jeremiah[2] to meet me in my soul place, the desert. He shot a new video and portrait for me and I retouched them for the website.

Style Decisions

Visual design is a series of decisions made one after another to craft a look and feel. A lot of these decisions were made in previous iterations. I don’t always have to start over because I carry forward the decisions I still agree with (that’s the joy of working in iterative chunks.)

After doing some sketches on paper I started laying things out in Photoshop:

After a couple of weeks, I didn’t particularly enjoy the direction I was going in so I went back to zero. I dumped everything and started over pushing myself to play a bit more with depth, reduce the colour complexity, and increase the spacing.

After a day or so of sprinting, I felt a lot better about the direction and quickly put together the rest of the pages.

Style Guide & Development

Before I jumped into code, I wanted to double-check that I hadn’t introduced any unnecessary styles so I built a small style guide to compare styles. I went back and forth between the style guide and my mock-ups to ensure I’m more or less following the rules but I didn’t break my back. There are diminishing returns if I try to be pixel-perfect with a mock-up made for myself.

After that I was in development mode. This website is built using HTML + SCSS using Jekyll and Github pages all of which I’ve made available on it’s Github repo[3] for reference purposes.

The only thing particularly unique for my website is that I designed on and developed with an 11-column grid. I’ve done this for a very long time because I generally find even-numbered grids to be stifling. I altered csswizardry’s grid[4] to accommodate.

Launch

The complete project cost me about 120 hours from start to finish inclusive of the writing I did (minus the photoshoot). I still have a few things to work on (accessibility & performance review, better sharing images for Twitter, etc.) but I’ll work on them as I go.

Seriously though,

Always keep an updated portfolio.


↩︎ [1] Chantel Hamilton's ↗︎ website

↩︎ [2] Jeremiah Warren's ↗︎ website

↩︎ [3] For reference purposes only, you can see the code behind this website on Github↗︎

↩︎ [4] czzwizardry's grid ↗︎

latest in design

November 8, 2017

Follow Your Own Advice

Out of all the advice I give I tend to give this one the most often. It’s old-school advice drilled...

April 9, 2017

Two Habits that Changed my Career

It’s the small things that make big waves. I have two habits I’ve picked up over the years which I...

April 2, 2017

On Commitment

The biggest lessons I’ve ever learned were from periods of extended commitment. Our available choices now send us into paralysis...

March 26, 2017

Retrospectives: Bring Me Only Problems

Asking for solutions first is bad management advice. ‘Don’t bring me problems—bring me solutions!’ teaches your team not to speak...