Process: Creative

  •   Joshua Buckwalter

By Joshua Buckwalter

This is the third of a five-part series that will take you through a detailed look into how our process works.

Design isn’t a magic trick. There’s no big secret to how it's done. Try things out until you find something that works. Where most designers go wrong is shutting the client out from the experimentation and unfinished product. That’s where we try to be different by focusing on methods that enable us to do what we do best while involving our clients at crucial decision points throughout the process.

 

Visual Language

Visual language is a somewhat fancy name that we’ve given to what are essentially mood boards. This is the first place that we bring clients into the process where other designers usually keep them at bay. It’s common practice for designers to seek out sources of inspiration to pull from in their work. We believe that including clients in this process helps us get on the same page right from the start. We pull together a wide variety of inspiration sources that include typography, image, illustration, layouts, user interface examples and whatever else we think might be relevant. We let our intuition guide our search for these sources and we go as broad as makes sense for the project.

 

Content Image

 

From there we team up with the project stakeholders to cull down what can sometimes be hundreds of images into a concise mood board that represents their style preferences and our critical judgement on what aligns with their brand ideals and objectives.

 

Content Image

 

Content Strategy

Every page of a site has a purpose that should be expressed both visually and contextually. We take the time during our creative process to not only decide how your brand should look but also how it should sound. 

The content strategy will include an analysis of your audiences, primary messaging, and content purposes for each page of the site. Later stages of the creative process take these into account when designing the structure of a page and its included elements. The creative is incomplete without the content and the content is incomplete without the creative.

 

Wireframes

Wireframes are style agnostic representations of a page layout. The biggest lie a designer will tell you is that wireframes are not prescriptive of page layout. If that was the case they’d serve very little purpose. This is where we take the content priorities defined in the content strategy and work out various ways of demonstrating how that looks on a page. Getting that right is critical to designing a page that functions the way it’s intended. How a headline, image, copy and call to action are situated on a page determine its efficacy and we try out various ways of doing this. When we’re between two or three possibilities we surface the work and talk it through with our clients and let them help us determine which direction to take.

 

Style Tiles

Wireframes are great for figuring out a layout, but what about style? It’s important to divorce discussions of style and layout as they often interfere with each other. Where the button sits on the page and how it looks are two individually important decisions. To solve this, we create abstract representations of the types of elements that will be on the site and show various ways that they can be styled.

 

Content Image

 

The typefaces that are used, how color works, image or illustration treatments are all part of this. We develop anywhere from 10–20 different sets internally and then eliminate the ones that aren’t working. What we’re left with is 4–8 sets that we share with our clients and use them to see which ones resonate with them. The question we ask them to answer is this: “Would you be happy if your website looked like this?”

 

Comps

With both the directions for layout and style established we go about constructing how the finished pages look. For the most part this is simply a matter of marrying the style tiles and the wireframes, but this is also where we work out some of the finishing details like transitions and effects.

 

Content Image

 

While most projects follow this basic structure it’s not entirely rigid. We occasionally break it to facilitate a better or faster outcome, but for the most part we keep to these steps because it ensures two things; A website that works and a website that our clients are proud of.

 

Want to read more about our process?



No comments

Thank you for submitting your comment!

Thanks for commenting. Please view other comments below or submit another comment.