My Design Process

The following is a peek into my creative process and what you can expect when working with me.

Client Interview & Project Discovery

For me, everything begins with clearly understanding the client's uniqueness and objectives. This is largely established through discovery interviews with key stakeholders on a given project. 

Some of the questions I look to answer are: 

 

The Problem We’re Solving

  • What are the issues you’re trying to improve, or business problems you’re trying to solve with this project?

Word Association

  • What words do you want people to associate with your company? 5-10 thoughtfully selected words is ideal.

Brands You Like

  • What brands do you consider to be “best-of-breed”? These examples may be completely outside of your industry. Names and a brief explanation of why they’re included in this section would be ideal.

Brands You Dislike

  • What brands do you dislike? These examples may also be completely outside of your industry.
 

Concept Sketching

When the discovery phase has been successfully completed, the next steps begin with some sort of writing utensil and graph paper. I use computers to finalize my ideas, but almost never for idea generation. This approach lends personality to the end-result, and maintains the human feel of my work. It also allows for rapid prototyping, experimenting, and vetting ideas quickly.

Sketches to Digital Illustration

Here's a fun little time-lapse video that shows one example of how this process works when creating a digital illustration. 

Website Wireframing

Long before any visual design pixels hit the screen, it's important to identify what's required for a website or web app to accomplish its goals, and how it's all going to be structured. Here are a few examples of the process behind deciding the layout, structure, and flow of the Masterplans website.  

Product Overview Page

Click image to add/remove layout grid

Blog Post

Click image to add/remove layout grid

Visual Design Mood Boards

Mood boards are a great tool for communicating abstract ideas. Every design begins its life in someone's head, and it's virtually impossible to communicate an unborn idea without pointing to other similar things that already exist. So, mood boards help paint a picture of what your thought looks like.

Design Mock-Ups

The following is a small example of how much ground a design can cover from inception to completion.

The Ne'er-Do-Well: Website v. 1

The screenshot on the left is of an early concept I provided to the client for feedback. I walked her through what I was thinking, explained how I saw it changing going forward, and asked for feedback on the various things that were coming together.

The screenshot on the right is of the final design. We created an updated version of the website a couple years later, which you can learn about here

 

Early Concept Mock-Up

Final Design (Website v.1)

 

A few changes represented in the above images: 

  1. The "Fiction / Essay / Craft" buttons seen in the early concept mock-up were a holdover from an earlier version of the client's website. We agreed that removing them would create greater clarity for users.

  2. The black navigation-bar was added for increased legibility of the navigation, and to better visually separate the header from the content.

  3. Custom hand-rendered type was created for the website header to better tie the name of the site into the overall theme and aesthetic of the design.

  4. The FPO (For Position Only) images in the early mock-up were replaced with final suggestions for live content. 

  5. The colors of the website were refined for better internal consistency and harmony. 

Final Deliverables

I am a meticulous man, and take pride in providing files that will be easy to understand for anyone else that has to interact with them. My Photoshop and Illustrator files have clearly and consistently named layers, and all my files are logically and consistently organized.

For web projects, I always include carefully annotated designs with both structural and style notes. 

Annotated Final Design:

Site Structure & Layout

Annotated Final Design:

Type Styles

 

Fine Tuning Design Implementation

Final Deliverables: Folder Structure

Even my deliverable files are neatly organized and consistently labeled. :)