Our Creative Process: From White Page to Homepage
By Eric Groves
There it is, staring at you. Laughing. Mocking. Just waiting for you to make a move.
The dreaded blank sheet of paper.
Whether you’re a writer, designer, developer, or gardener, creative inspiration comes and goes without regard for deadlines or launch dates.
I’ll say for one, it is very uncomfortable to sit in front of that blank computer screen devoid of inspiration or direction. There’s always a flurry of fear and excitement when you start a new project from nothing. The possibilities are literally endless.
It’s one thing to start digging around through the annals of the internet for the hottest new design trend. It’s another to meet some pretty high strategic expectations on a substantial project.
Our job is to do both.
Just like any quality product, we need a process. Of course, it’s nothing like a rigid factory just churning out website templates. We’re likely to mix a little chaos into the formula and strike a balance between efficiency and effectiveness and creativity. So, let’s peel open the doors to the laboratory and see how Flying Hippo makes it work.
Step 1: Making a roadmap
As anyone that has built anything worthwhile will tell you, you must start with a plan. Often, this involves an in-depth analysis of the goals we’d like to achieve. And yes, the client is a huge part of this. Our goal is to guide the process, but ultimately the goals must be what the client wants to accomplish and not something that we decide.
Establishing a clear set of guidelines, deliverables, and course of action are critical to a project’s success. At the end of this step, we will have a creative brief, sitemap, wireframe and set of requirements that everyone can agree on. Some might call this the underlying strategy. A creative brief is a list of the goals, messages, audiences, competition, and budget. The requirements are what we are expected to deliver. Mix the two together and you have a framework for expectations that will guide you toward a final product.
Step 2: There are no bad ideas
Okay, we’ve nailed down some logistics. Now, let’s throw the rulebook out the window — this is the crazy part.
Everyone removes their neatly pressed analytical hats and starts getting wild. Using the strategy, we start asking questions that shake the foundation of what is possible. How far can we push the design? Does it have to be a website? Can we use pink? What if we don’t show the logo? These are ideas that our client may never hear, and that’s okay.
This is the creative playground where the design team decides to change all the rules, and nothing is off limits.
(Speaking of the client, we also love to hear their ideas. As an expert in their industry, the client can offer huge strides in forming ideas that will serve to make something beautiful. And, we want to hear that one off-the-wall thing someone mentioned in a meeting and — more importantly — what led to that idea and why it may or may not work.)
Our goal during this phase is not to pick what works (yet), it’s to see what’s possible — to explore within our defined limits. This is the time for creative freedom; the time for specificity comes later.
Step 3: Choosing a direction
After we create some verbal concepts, we look to design inspiration. No brand exists in a vacuum, so it’s important that we fully analyze the competitive landscape as well as the current website and brand. We also seek inspiration from all types of creative work: the pattern in the carpet, the shape of a leaf, the archway of the Palace of Versailles, and loads and loads of inspiration from the internet (thank you, Pinterest!) Anything can be the catalyst for a direction or idea. Our job is to stay observant and embrace inspiration from unexpected sources.
From here, the designer creates moodboards, which is just a fancy pasteboard of ideas. We try to answer questions like, what is the tone of the copywriting? What is the grid and structure of the layout? What types of photos should we lead with? How can the company’s brand best be communicated? Usually the moodboard is a collection of photos, sites, and fonts that fit the overall look and feel we are trying to communicate.
Again, nothing is off limits at this stage. Our design could be inspired by a colonial wedding dress and a Boeing 777.
The designer, art director, creative director, and project manager meet again as a team and start picking and choosing what will work for our concepts. Meeting to talk through the ideas and inspiration will prove to flesh out the creative. In this meeting, we revisit the strategy and goals to ensure that the client’s needs are truly at the center of the creative direction.
Step 4: Pen to paper
Next come sketches. The designer will use all pieces acquired to this point and begin sketching layouts — yes, using pencil and paper. Often these are loose, but they are the beginnings of the final layout.
This stage allows us to explore specific ideas without committing to any particular path. It becomes a self-editing process as we try ideas and get a better idea for what will work in practice and what is too unconventional.
Step 5: Time for Photoshop
You probably noticed that we’re already to step five and there has been nary a mention of Photoshop. That’s by design; all of these steps lead to a clear direction for the designer.
The experimentation, meetings, arguments, and discarded ideas all bring the focus to the point where we feel like we can design a website.
By now, the blank sheet of paper is far from empty and we have dozens of ideas swimming around in our heads. The journey’s not over, but the whole team is on board with the creative direction. Now, it’s just a matter of transforming those ideas and sketches into a design mock up.
Depending on the level of polish we’ve put on our sketches, this could be a simple process or there could be some additional work to push through to a first draft.
Step 6: Review, adjust, review again
From this point, it’s just a matter of getting the design fine-tuned to the point of presentation.
We’ll review and adjust the first-pass design until everyone on our team feels that we have the design and strategy to the best possible place it can be. Then, we show it to the client for feedback.
Of course, after all of this, we have just a design.
It still needs to be turned into a functioning site (and we need to extend the design into templates for interior pages and adapt it for mobile and other uses.) But, once we have gotten to the point where we have a clear creative direction, it’s much easier to understand how it will apply across the board.
Countless years of experience in both design and development mean that we all love to work as a team, and our end products are better for it.
Just like the designs themselves, we are always adapting and adjusting the process. Tomorrow it may look differently because we’ve figured out something that works better or helps us create better work. But, maybe starting with a blank sheet of paper ain’t so bad after all?
“You see things; and you say, ‘Why?’ But I dream things that never were; and I say, ‘Why not?'” -George Bernard Shaw
