Why I Write

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.

On Design

I never get tired of reading quotes from some of the design greats. It’s interesting to compare them and see where they overlap and where they don’t.

Relish simplicity, and focus on the users’ goals rather than glitzy design.

Jakob Nielsen

One could describe design as a plan for arranging elements to accomplish a particular purpose.

Charles Eames

My favorite designs are the ones that don’t just solve a problem, but also engage you on an emotional level—where you take away more from it than just the end result of its function.

Mike Matas

My goal is to omit everything superfluous so that the essential is shown to best possible advantage.

Dieter Rams

Make it Concrete

I design websites.

That’s the quick answer I usually give people when they ask what I do. Noone is ever confused. They might not know exactly how a site works or the process that goes into creating one, but they a usually have a strong grasp on the idea. Once I start mentioning wireframing, user flows, or interaction design they start to lose that grasp they had when it was just website design. These new terms add a whole new layer of abstraction to their notions of a website. Their once concrete idea of website design starts to soften up a bit.

On Naming Land

The Nature Conservancy (TNC) is a group that helps protect environmentally precious areas. There is an oak savanna of brown hills east of Silicon Valley that the group was trying to protect but were having trouble gaining needed support. TNC knew it was an important area but had a hard time building enthusiasm for a bunch of brown grass. So what did they do? They gave the savanna of brown hills a name. Mount Hamilton Wilderness.

Identifying the area as a coherent landscape and naming it put it on the map for local groups and policymakers.

If you say, “There’s a really important area to the east of Silicon Valley,” it’s not exciting, because it’s not tangible. But when you say, “The Mount Hamilton Wilderness,” their interest perks up.

Made to Stick

TNC was able to acquire more grants to protect the area after giving it a name. They made the idea really easy to grasp. It wasn’t some area of land ‘out there’. It was the Mount Hamilton Wilderness.

The same idea can be applied elsewhere. Another example of where a company has removed abstraction in its naming process is Apple. Let’s take a look at their lineup of computers.

On Naming Computers

Below is Apple’s entire computer portfolio. Two laptops, two desktops, and the stuff-anywhere-you-want Mac mini.

Apple’s lineup

Simple and clear. No model numbers to decipher. Each product fulfills its role and has a specific name, and other than the iMac, a name that happens to be relatively descriptive.

On the flip side of things, here is Acer’s lineup OF JUST THEIR LAPTOPS. Six laptops split into two categories; an Aspire series and a TravelMate series. I’m going to assume the TravelMate series is for traveling? Right? But, aren’t all laptops for traveling?

Acer’s lineup

This product line is impossible to figure out. Just look, half of them have “TimeLineX” in their name. Also, what’s with the ‘X’? I thought having an ‘X’ in your product’s name was reserved for sponsors of snowboarding competitions.

And below is HP’s laptop lineup – well, more their pre-lineup lineup. Making a decision here takes you to list of model numbers. What if I want a fast computer that I take to work and use everyday? Guess I have to choose between fast, portable, or everyday usage. Convoluted to say the least.

HP’s lineup

Remove The Abstraction

Make it easy for everyone to understand what exactly it is you are talking about. Give it a name or description that makes it a tangible idea or concept – something that gives a reference point to the things around it. Make it clear and simple. Oh, and don’t put an ‘X’ in the name.

I climbed a mountain

Well, more a hike, but it was great fun. My first glaciated peak. I went with the Mazamas this past Saturday.

South Sister Summit – 10,358 feet. Behind me are the Middle Sisters and the North Sisters.

The red pins are where I took pics with my iPhone. It gives a good idea of our route – 12 miles round trip. The total ascent was approximately 4,900 feet.

The route

Define Design

Ask ten people to define what design means to them and you’ll get ten different answers. This one from Alan Cooper I find particularly spot on.

  • Understanding users’ desires, needs, motivations, and contexts
  • Understanding business, technical, and domain opportunities, requirements, and constraints
  • Using this knowledge as a foundation for plans to create products whose form, content, and behavior is useful, usable, and desirable, as well as economically viable and technically feasible

About Face 3 – The Essentials of Interaction Design

Steve Jobs on design:

Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really how it works. The design of the Mac wasn’t what it looked like, although that was part of it. Primarily, it was how it worked. To design something really well, you have to get it. You have to really grok what it’s all about. It takes a passionate commitment to really thoroughly understand something, chew it up, not just quickly swallow it. Most people don’t take the time to do that.

Steve Jobs