Posted 11 weeks ago (December 1, 2011 at 10:00 AM) in Design
Many new designers, young marketing directors and do-it-yourself clients get excited (and rightly so!) about creating something fresh to grace the face of the internet and sprint directly to the visual payoff. However, implementing a solid design strategy ensures consistency with your or your client’s vision, saving time and increasing satisfaction.
For example, when designers get hired into a young, up and coming agency and get an assignment to design something for a client, the impulse is usually to go right into Photoshop and design something based off of sketch notes or a wireframe (if you’re lucky enough to have one), immediately thinking, with excitement, “Website!”
As satisfying as that can be, those designers are skipping an incredible opportunity to implement a solid design strategy that will include their client in the process and dramatically increase the probability that those clients will be thrilled with the result (and that they won’t have to duplicate any work.)
To that end, we’d like to lend our own insight and assistance to those designers, do-it-yourselfers, and new marketing directors types by offering a peek at how Rise tackles design strategy!
Where to Start
It’s wise to break down the task of design by compartmentalizing critical aspects such as color, shape, and tone - much of which can be inferred from an annotated wireframe. If you don’t have wireframes before designing, please read up on how important that piece of the web design puzzle is before moving on!
When our designer extraordinaire Frank came to us, he implemented a design strategy that began by building style guides for each client to get the ball rolling after divining their initial intentions from design surveys we would collect from clients.
Inspiration
Design surveys serve the purpose of collecting the clients’ ideas on what their site should incorporate by asking simple questions like which colors to use, which not to use, shapes they like or are inspired by, symbols that express their business or perspective on the work they do.
By gathering this information from the start, you get a direct idea of what the company should be represented as online. Today, we ask these questions and take the initial impressions during our first meetings with our clients.
Color
From there, building a style guide starts with acknowledging a client’s brand/logo/etc. and using those established elements as the inspiration for mood, which is expressed through color. If they want their existing logo to stay, adapting brand new colors may not work out. If there is a logo, you might consider grouping complementary and tertiary colors that fit the mood.
Style
Often confusing for clients is the distinction between color and style. Color sets mood whereas style is represented through shapes and patterns. One key thing we do for clients at this stage is make sure that the shapes and patterns we present are offered to them in no larger than a 40x40 pixel block.
We do this to offer samples, not certainties. When you go to look at flooring or curtains, they give you a sample of the color and texture and you’re meant to envision what that could look like on the large scale - ditto for this step in the visual design process. This step is meant to offer swatches and is meant to demonstrate what can influence how we design on a broader scale.
Typeface
Still in the style guide, we look next to typefaces used in the brand mark or logo. If it has a particular font, we try to find more that are complementary and break them down into Headline 1, Headline 2, and paragraph text. We’ll choose two different sets of fonts that look good without departing too far from the existing typeface.
More importantly, we only choose fonts that pass the readability test. As designers, we have different Serifs that are a pleasure to read and offer options beyond Times New Roman and Arial. While those staples did their job in the past, generators like @font-face and Typekit allow you to implement new and interesting typefaces.
And because all things go out of style at some point, there are certain fonts that we highly recommend avoiding unless you mean to torture our designer, Frank. Comic Sans and Papyrus, for example, have developed a stigma and are generally recognized among professional designers for being hard to read and undermining the authority of any brand that attempts their use.
Mood Boards
Mood boards are where we combine the colors, styles, and typefaces to give an overall impression of a design option. You can think about mood boards like posters for your brand. They aren’t a direct representation of your website, but they should provide the right emotional connotations for your business.
For each client we aim to develop one style guide and at least two mood boards. Both mood boards are within brand standards, but each should give the viewer a different mood. Based on the feedback we get from our client on each board, we’ll know early on which direction to take the design.
Presentation
Once we have the style guide built and have created mood boards, we’re ready to meet again with our client to present our design deliverables. By introducing them to the design principles in context and in person with the designer who can explain them, we open a conversation with the client allowing them the opportunity to understand, ask questions, and offer further input.
Our goal is to have an iterative and collaborative process with our clients. We make the style guide available to them so that our intentions and inspirations are transparent.
Specifically, we ask them to focus more on the mood boards because we’re listening for the emotional response that is our cue that, ‘Yes, this is what it should feel like,’ so that we can move forward with more detailed design work. By opening this forum for discussion, we get the feedback we need to ensure client satisfaction.
One example to share would be the work we did for Classic Motor Sports. We worked through the design process with them to see if they wanted to go with a “classic car” style using physical car elements or something more like a sleek and polished, black and chrome “James Bond” motif – both of which would have satisfied their initial intentions.
They chose physical elements from classic cars. It might have been disappointing for the client if we’d simply acted on the posh, modern styling without their additional input! Jumping ahead, here’s how the final design turned out for them!
The Benefits
Why is it important for a designer to do all this? What’s the benefit for the client? Whether or not it’s a redesign or a brand new project, at many agencies they’ll do loads of overall strategy for how to execute the project and then send the designer into his figurative cave to work. We do not believe that dream designs are born in that kind of isolation; we do believe that every client deserves the opportunity to mold the foundations of their design.
By making the client part of the process, we are unlike conventional agencies which will make scads of designs and just ask the client to pick one. Though our approach is liberal, we keep it at a nonthreatening pace so that our clients will be comfortable with the design they are hiring us to create.
That’s the power of a solid design strategy: through collaboration and imagination, we finesse our way to each client’s unique custom design together, transforming their visions into reality!