The Making of GrantGarrett.com

The new grantgarrett.com design went live a month or so ago, and I thought I’d give you a little peak behind the scenes.

Starting out I really wanted to get a good idea of why I was doing a redesign. My previous designs seemed to be doing a good enough job, so why was I going to give it an overhaul? Here is a little of the brainstorming/thinking on paper that went down before any wireframing started. It was all just a mental dump to start thinking of the “why”.

Kind of a brainstorm mixed with stream of consciousness

Drink beer, key component

I wanted to design a portfolio that more clearly communicated what was going on inside my head during design. This ended up being the “why” behind the most recent design. The largest change to the portfolio from years past would be the addition of a blog. What you’re reading now.

Then wireframing started. Here is an early start on laying the content out and trying to get a feel how the different areas would start to interact in a spacial sense. Maybe a two column format? A navigation and links sidebar next to the content column.

Real rough wireframes

Around this time I decided I wanted to keep the blog as its own separate entity. The portfolio would link to a few featured blog entries, but thats about the strongest connection they would have. I figured this would be the best option going forward. My portfolio will constantly be changing to suit my most current needs while the blog will be a more permanent place to house thoughts and ideas. Right now these two sites are very closely related and are serving the same basic role, however in the future that might not be true.

Maybe a single column format with a tabbed type of interaction?

Different layout idea

Most of my past designs all had a type of tabbed structure and I wanted to do something a bit new. I decided I would go for a long single scrolling page. Here couple more refined wireframes with this new structure.

Single page layout

A bit more refined version

Next is a screenshot of the site between the wireframe and visual design stages. Spacing, alignment, and typography have started to be worked on.

High fidelity wireframe

Next it was just constant iteration and tweaking to get to the final design. I coded up the site’s html/css/javascript by hand in Coda.