Visual Design Evolution

We keep moving forward, opening new doors, and doing new things, because we’re curious and curiosity keeps leading us down new paths.
– Walt Disney

My design process is continually evolving. I'm always looking for ways to streamline the process, ask better questions, and provide the best design deliverables for my clients.

A Brief History of My Visual Design Process

Ten years ago, my design process for each project began with creating fully-realized, static layouts of the home page with minimal input from the client about their design goals. This was an ill-informed, time-consuming process that resulted in overwhelming the client with choices and forcing them to make decisions about visual design, user experience and content simultaneously. Why did I do it this way? Partly because I still thought about the web as static HTML pages rather than a dynamic content delivery system. And partly because I perceived it was the design process everyone else was using.

Six years ago, I introduced mood boards into my process. This was a big step forward because mood boards allowed me to focus on the elements of visual design divorced from the structure of the website. They provided a way of showing the client a sampling of design elements rather than a specific page of their site. I was dealing with the ingredients of design rather than looking at a finished cake. Mood boards also took less time to develop than fully-developed page layouts so I could explore more design options at the beginning of the process.

Two years ago I began including comprehensive style guides as a design deliverable (in addition to mood boards and page layouts). The style guide is related to a prototyping tool Newfangled uses called the modular page template. This template is comprised of content modules that the client can create and arrange in different combinations in order to produce a custom page layout. The visual style guide uses the modular template as its framework and is populated with a collection of content elements (page text, headlines, image carousels, forms, etc.), which are the basic content ingredients for creating custom pages.

An example of a style guide, displaying all of the content elements that make up the modular template.

Eighteen months ago I listened to a webinar entitled, “Design Deliverables for a Post-comp Era” with Philadelphia-based designer Dan Mall. During the webinar Dan introduced a couple of design deliverables he had developed: the Visual Inventory and the Element Collage. I listened as he shared the history of his own frustrating experiences of multiple page layout iterations in the midst of a client approval process that was already laden with anxiety and subjectivity. When he talked about how visual inventories and element collages could help shepherd clients towards thinking objectively about their website as well as promoting better decision-making, I was more than a little intrigued.

Since then, I’ve used both of these deliverables in a few new projects. My own results have been positive, not just in the nuts and bolts of designing but in client interactions as well.

Visual Inventory

A visual inventory is a survey of websites and website elements collected into a single document and presented to the client to generate conversation about design: colors, typography, conceptual direction, etc. Newfangled’s existing client intake form asks our clients for a list of their competitors’ websites as well as inspirational websites, so collecting samples and putting them into a Keynote presentation was an easy step towards a visual inventory.

The biggest advantage of the visual inventory is that it gets clients thinking about about design sooner in the web development process and helps define goals up front, before any page layouts are produced.

My first visual inventory was for ExploringCircle, an adventure travel site with a focus on social and environmental issues. I built the visual inventory around four areas: Positioning, Color, Concept, and Tone. These categories are not meant to address every detail of the site but instead pose good questions about what the site should look like.

Positioning: this is what would make ExploringCircle (EC) unique among its competition, so I highlighted key phases from their mission statement such as experiential travel, education, and environmental and social issues. These phrases became the guidelines that would shape everything we put into the site — not just the visual elements but the site content as well.

Color: I sampled several different sites, some with broad color palettes and other sites that were almost monochrome. Having the client respond to examples proved far more effective in shaping the direction than asking, “what colors do you want on your site?”

Concept: I needed to know how we were going to tell the EC story so I proposed several methods and let the client tell us which ones suited them best. Based on our conversations, the client decided a combination of large, compelling destination photos combined with traveler testimonials would be the key elements to telling their story.

Tone: Is this going to be a serious, button-down site or will it include some playfulness and whimsy? You may assume certain things about the demeanor of your client but it’s always better to ask than guess. EC decided that a friendly tone with a bit of whimsy would appeal to their target audience.

tone.jpg

Element Collage

The element collage is a close cousin to style tiles and mood boards, which is what I have been using in my design process for about five years now.

The issue we’ve had at times with mood boards is that the client would mistake them for page layouts. We wanted the clients to think about the site design at 30,000 ft. and they were zooming in to ground level to focus on small details. One of the advantages of element collages is their horizontal orientation, which eliminates any chance they will be mistaken for page layouts.

Click the thumbnail for a full-size version.


Click the thumbnail for a full-size version.

Also, since mood boards were the first design deliverable the client saw, I usually had to produce two or three boards — each in a unique style — which sometimes led the client to combine elements from different boards. The visual inventory eliminates many of the design “guesses” that were inherent in the mood boards and the feedback from the VI is used to inform the direction of the element collage.

I gleaned from ExploringCircle’s feedback that a broad, bright color palette combined with destination imagery and friendly, easy to read text were some of the key design elements. The finished collage included a color palette, sample typography, examples of “destination cards,” two versions of a proposed social network feature and feature slide carousels, and a snippet of a form. The element collage was well received and I was able to immediately proceed to page layouts.

The Best Thing

One of the benefits I’ve seen, even in the relatively short time I’ve used these new tools, is better conversations with my clients and a more iterative process. Rather than pinning a Photoshop layout up on the wall and saying, “what do you think?” I'm walking alongside the client through the decision-making process from the very beginning and helping them make the best choices for their new website.