Let’s Chat

Our Creative Process: From White Page to Homepage

Eric Groves

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.

Photo showing people choosing different elements and styles for a web design creative direction.

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.

Photograph of one of our designers sketching design concepts.

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.

Screen shots of different pages from our site that we reviewed side by side to achieve a cohesive art and creative direction.

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

Branding

LET’S CHAT ABOUT YOUR *BRAND*. NO ACTUAL KICKS TO THE GROIN, WE PROMISE.

Share Article

Close Video Player