Skip the first one (Portfolio part 7)

Why do we crumple up our first draft and throw it away? Because we thinkwe can do better. Take a moment and appreciate that – you’re lucky you thought so.

After Portfolio Part 6, I had a workable layout for each project page. But, I couldn’t let myself “ship it”. Instead I tore it down and tried maybe four different variations before settling on a finished design. Here is a quick reflection on the process.

Round 1

Keeping with Google Material guidelines, my intention was for each project “page” to containa collectionof “cards” (the trendy twitter, tinder variety). The Upswing page, for example, would have cardsdescribing thefeatures I built for our web app, a map of our clients in the U.S., etc.

I envisioned this:


Because I was using the shell of Polymer Topeka app, I tried using an existing layout. My first iteration looked like this:

Screen Shot 2015-05-11 at 2.47.28 PM

And this just doesn’t cut it.

I tried on a couple other variations of this, without feeling any better about them:

Screen Shot 2015-05-11 at 2.45.45 PM

So, I went back to the drawing board, back to Dribbble, back to PatternTap, looking for inspiration. I also let more than a week pass without working on the site. I could have started coming up with content and copy. I could have started creating the card components.

I caught this video on twitter and appreciated the message:

I’ve seen a lot of people get discouraged in the design process, especially. And they give up, or ship something shabby because they think they’ve hit the boundary of their ability. The misconception is that good design isn’t something you practice – it’s an innate skill you’re born with – which is a myth.

In boxing terms (which I used for heading), these fledgling designers quit after round 1.

Round 2

I thought more about the 5 second test – that in the first five seconds of looking at a project page, the user should have a rough idea of what it was about. So, I knew I needed a “hero image” and short description in plain sight, capturing users’ attention to make thatfirst impression. Here is something sketched out in Illustrator:

Screen Shot 2015-04-19 at 1.04.20 PM

I was definitely bogged down some by constantly thinking in terms of page animations. Such as here is how I thought this page would animate:


Ridiculous, isn’t it. But it got me there. This is what it looks like now:

Closing statements

In skiing, I’ve heard people say that you always “skip your last run” – because you always get hurt on the last one. You’re tired and maybe a little reckless. In design, it should be said “skip your first one” – because it’s a stab in the dark, a rough draft, and so on. I wager that the first attempt is almost never good enough for prime time.

This brings to mindan article I read a while back – called the Anosognosic’s Dilemma. An anasognosic, according to wikipedia “a deficit of self-awareness, a condition in which a person who suffers a certain disability seems unaware of the existence of his or her disability”. In the article, the disability is stupidity – imbeciles aredoomed for notrecognizing their own ignorance. Not like Forrest Gump though, who understood his own failings and did alright.

So – and this is not a breakthrough –be comforted that the dissatisfaction you feel for something you’ve createdis a good sign; you know what a good piece of work should look like, and that’s not it. The next version of itwill be better.