Posted 01.12.2015

Designing before the Design Phase

When I was in college, I was told that one of the most healthy disciplines I could pick up was to sketch everything, first. Pen and paper are your friend. My professors would make us turn in our preliminary sketches to try to enforce this mentality. Even though, no one is forcing me to do that now, it’s still a good habit that I continue to practice.


Visual Research

When I start each project, I start with visual research. I know this sounds like a fluff term, but it’s probably one of the most defining steps in the process. If I’m working on a piece for middle aged women, I’ll might pick up Real Simple, O, Vogue, and Martha Stewart magazines. These are things that these women are paying attention to. Each of these magazines have spent millions of dollars in research to determine trends. Why not take cues from them in determining what’s popular?

Visual research doesn’t have to be all about the audience, though, it can also be about content. For example, if I’m working on a site that’s copy heavy, I might look at other sites ( and USAToday) that face the same “problem” and take notes on how they solve it. How many columns did they use? Do they show the full article? excerpts? or headlines?

I’ll take all the images that I find and post them on my wall in my office. This helps me think in a particular stylistic direction, as well as, make connections based on what I’ve seen.

Mood board of Inspiration

A secret about creativity:

“Creativity is just connecting things. When you ask creative people how they did something, they feel a little guilty because they didn’t really do it, they just saw something. It seemed obvious to them after a while. That’s because they were able to connect experiences they’ve had and synthesize new things. And the reason they were able to do that was that they’ve had more experiences or they have thought more about their experiences than other people.

“Unfortunately, that’s too rare a commodity. A lot of people in our industry haven’t had very diverse experiences. So they don’t have enough dots to connect, and they end up with very linear solutions without a broad perspective on the problem. The broader one’s understanding of the human experience, the better design we will have."

Steve Jobs

It’s true. I take screenshots all the time. I’ll take pictures on my phone when I’m out and about. I keep everything in my Evernote account. (I wrote a post about it, too.)

Evernote Screenshot

Create a Moodboard

With a few of my clients, I’ve started making mood boards. It’s essentially what I’ve done for myself in the visual research phase, so it’s just a matter of sharing what I’ve found with the client. I’ve found that a lot of times the design vocabulary I use is different than theirs. So, if we have actually images we can point to, it guarantees that we’re both talking about the same thing. By getting their feedback early on, it let’s me know if I'm moving in the right direction. Do they like large, bold typography? large header images? muted color palette?


I submitted a mood board to a client a couple of months ago and they came back and said, “This looks great, but it’s not at all what we want.” I said, “Perfect! The mood board did exactly what it was supposed to. It prevented me from spending a bunch of time designing something that you didn’t want.” From there, the mood board was able to launc us into a healthy conversation about what they really did want.

Sketching Everything

I design everything in my moleskine first. I’ll write down all the elements that we already agreed need to be on a particular page. I’ll write down on all the main navigation items. I’ll sketch different layout ideas, getting everything out of my head and onto paper. I’ll draw design elements: chevrons, rules, squares. I’ll make notes about how things will work responsively or if I want a section to animate in. I’ll write out the good and the bad. –Even if I know an idea is bad ahead of time, I’ll still write it down just to get it out of my head. Then, mentally, I can move on to other, better ideas. I can process a concept so much faster on paper than I can on the computer.

Moleskine Sketches

Moleskine Sketches

All this happens before a pixel is created in Photoshop or a single line of code is written.

What are some things that you do to prepare or inform your designs?