Monthly Archive for March, 2011

Design & The Five Ws

When I was young, I stumbled upon a small post-it note hanging up in my dad’s home office with “The Five Ws” scribbled on it. The note read: Who, What, Where, Why, When, and How. As a kid, I loved this. It was such an easy way to investigate the world with a few simple questions.

Recently, I remembered The Five Ws around the same time I started recognizing a pattern in my design work. I’ll start a new project with the strategy and framework in place, then dive into producing the details. Somewhere early on, I have to come up for air and check my decisions against the over-arching goals of the project. A cycle starts to occur as I move back and forth between “big picture thinking” and “fine detail production” throughout the project.

So, here’s how The Five Ws helped me understand this cycle:

The process of design is a loop between the Why (Intention) & What (Content), and the Where (Layout) & How (Execution).

“Why” should govern everything else in the process. It can be defined as the purpose and intention of the visual communication – how it evokes a desired response in the viewer. And, although the “Why” must be kept top of mind during the production of details, it’s most important role is setting the primary objectives at the big-picture level first.

“What” describes the content – the words and images that help achieve the “Why.” Combined, they represent  ‘content with intention,’ which is at the core of what I think defines much of design in a broad sense. When content exists without purpose, it makes consumption difficult.

“Where” represents the organization of content, also known as the layout. With the primary (and secondary) objectives established during the “Why,” the “Where” is all about constructing relationships between type and images. It’s a semi-detailed task during the wire-framing or sketching stage of a project, and a super-detailed task when pushing vectors and pixels around to achieve a beautiful, cohesive result.

“How” speaks to the production of the design. Choosing which methods, tools, technologies, and styles to use is the first step. The second step is the designer’s ability to produce good work with the established palette of techniques and style.

So, with four of the Ws accounted for in the design cycle, here’s some thoughts on the remaining two: “When” and “Who.” I know, there’s six altogether, and one of the “Ws” is an “H”. Anyways…

“When” defines the time-line of the project. It also corresponds to the amount of time spent establishing (and subsequently evolving) the high-level strategy versus producing the actual work.

“Who” represents the designer working on the project. I believe, to a certain extent, that the designer has to get out of the way (lessen their stylistic preferences) and make good, effective design decisions for the brand their working on. At the same time, clients hire designers for their specialty skills, P.O.V. (point of view), and experience (e.g. filter). So, it’s the responsibility of the designer to strike a balance between personal preferences, decisions based on research and expertise, and brand adaption.

I think designers have different working methods, but the process and design principles we practice are universal. I hope you found this loose perspective on the process of design informative and helpful. Please share your thoughts!

Your Caption Here

03/15 – Your Caption Here: How-to Manipulate Images Without Photoshop

(Austin Kleon @austinkleon, Drew Dernavich @drewdernavich, Jessica Hagy @jessicahagy, Maris Kreizman @slaughter90210, Ross Nover @rosscott)

2011 #sxsw interactive #sketchnotes #sxswcaptions

Anatomy of a Design Decision

03/14 – Anatomy of a Design Decision (Jared Spool @jmspool)

2011 #sxsw interactive #sketchnotes

Cure for the Common Font

03/13 – Cure for the Common Font

(Frank Chimero @fchimero, Jason Santa Maria @jasonsantamaria, Stephen Coles @stewf, Tiffany Wardle @typegirl)

2011 #sxsw interactive #fontcure

No Excuse

03/13 – No Excuse: Web Designers Who Can’t Code
(Ethan Marcotte @beep, Jenn Lukas @JennLukas, Ryan Sims @simmy, Wilson Miner @wilsonminer)
2011 #sxsw interactive #noexcuse

The Creative Process Illustrated

03/13 – The Creative Process Illustrated: How Advertising’s Big Ideas are Born (Glenn Griffin @wgriffin and Deborah Morrison @debkmorrison)

Collaboration Nation

03/12 Collaboration Nation (Phil Coffman @philcoffman and Noah Stokes @motherfuton)
2011 #sxsw interactive #sketchnotes

How Print

03/12 How Print Design is the Future of Interactive (Mike Kruzeniski @mkruzeniski)
2011 #sxsw interactive #sketchnotes

2011 SXSW Interactive Sketchnotes

Going into my first sxsw interactive conference this year, I took the advice of famed visual note-taker and buddy Austin Kleon, and doodled my heart out for the first few days of panels I attended. He had especially good advice about drawing faces and how to listen strategically while sketching.

So, without further ado, I’ll share my 2011 sxsw interactive sketchnotes for the next couple of days right here.

Spotlight: Phil Coffman

I’ve had the pleasure of working with Phil Coffman for the last year and a half, and today something extra special happened. Phil launched Method & Craft. It’s a beautiful site devoted to serving up curated articles, interviews, videos and more with a focus on interactive design.

The design of Method & Craft echos the same excellence in craftsmanship that all of Phil’s work exudes. The site presents diverse content in a fresh layout system, and is chalked full of thoughtful design details and good user experience. In addition, M&C launched with articles from some of the best minds in the business.

Phil’s work in general draws upon his extensive skillset of photography, illustration, 3D rendering, icon design, photoshop mastery, and more. Here’s how I would sum up his design mantra: each project must pass through the fiery filter of his critical eye and come out the other side with a refined visual superbness. Two examples of this are the icon project and Tradewinds redesign shown below.

Make sure to check out his portfolio and blog, and follow him on twitterflickr, and dribbble.