Gaining Style Momentum

Looking back, I realize how fundamentally wrong it felt to take all this freshly unearthed information from Discovery and essentially go into isolation for weeks of overly exhaustive creative exploration. Emerging from this stint was a handful of distinct comps that would ultimately compete with each other in the “big reveal”. Knowing that most of that time and precious creative energy would be lost once a single direction was chosen was deflating—The pressure! The waste!

There is a much better way. While there are still situations where full-page comps are necessary, the element collage has served us well as an efficient alternative for gaining early consensus on a visual direction without being mired by pixel perfection.

Setting the Tone

In a nutshell, an element collage is a collection of elements that communicate the art direction of the site. It is essentially the look and—even more importantly—feel of the site.

We like to begin element collages with the elements that hold the greatest visual potential. Usually this means exploring type, color, and image styles applied to components like promoted features or heroic page headers. It’s been helpful for us to think of it like the swatches of fabric, textiles and paint that an interior designer uses to help plan the general aesthetic of an interior space.

Getting Everyone on Board

Element collages can be useful at any stage of a project, but in our studio this design exercise typically follows the visual inventory and kicks off the Style Exploration phase of the project. We’ve found that presenting elements at their intended scale cuts down on confusion, so we use an HTML page with an embedded image. We typically present two or three distinct approaches that align with the initial vision and goals for the site. Our first discussion allows us to make refinements based on feedback. After a second round of ECs, we can feel confident in the chosen visual direction.

We’ve found it works well to arrange loose elements in an EC horizontally rather than vertically, as to reduce the similarity to a web page full of content. We also make a point to include elements at various device widths (e.g., narrow, medium, wide) and present multiple states of certain elements (e.g., hover, collapsed, expanded). In our experience, showing multiple style variations of the same element between different element collages works well for comparison.

At this stage we want to prompt feedback about art direction. Element collages help us to avoid being mired by details.

A Communication Firestarter

As you can imagine, Element Collages are potentially abstract and quite different from what most clients are used to seeing. Communication becomes crucial in order to solicit useful feedback.

In our experience, this design exercise is perfect for facilitating thoughtful dialogue and soliciting valuable feedback at any phase of a project. However, ECs serve as a catalyst for client conversation early on in the process. Empowering client teams to feel ownership in helping to establish the visual direction early on is a fantastic byproduct. This helps us foster trust and promote a healthy working relationship moving forward.

If you haven’t incorporated element collages into your workflow yet, give it a try—you won’t be disappointed. You’ll be amazed at how liberating this one exercise is, and how it allows for creative buy-in without the inefficiency of preparing full-page comps at a stage when you still have as many questions as you do answers. We’ve made ECs a key part of our ever-evolving process. We only wish we’d incorporated them sooner!