When you engage in a new client project how do you get started? A solid process plays a critical role in the project’s overall success, yet this process is one of the deepest darkest secrets of our industry. Evolving from print, identity, and advertising the web retains many methodologies and deliverable relics from disciplines that produce very different products.
Article Continues Below
When we supply detailed mockups that represent set widths, we can imply that we’re executing the final design. Clients can feel disconnected from the process, which gives them a false sense of completion, detaching them from the final product. So why don’t we more closely design our own process to work within clients’ expectations and emotions? We must evolve our deliverables to make clients a more active participant in the process.
Websites are so much more than just usable interfaces: they tell a story. The style tile is a design deliverable that references website interface elements through font, color, and style collections delivered alongside a site map, wireframes, and other user experience artifacts. Style tiles are based on visual preference discussions with the client. They’re sample options that spur discussion with stakeholders on a common visual language. Containing sample UI style swatches, a style tile illustrates how a designer translates a stakeholder’s brand to the web. When a client uses the word “friendly” or “clean” to describe the site they want, the style tile visually represents those adjectives. Style tiles offer a catalyst for discussions to clarify and refine the client’s preferences and goals.
Emotional connection#section2
Style tiles are a flexible starting point that define a style to communicate the web in a way that clients understand. A style tile is more refined than a traditional identity mood board and less detailed than a website mockup or comp. When an interior designer redesigns a room they don’t build multiple options of the designs they’re proposing, they bring color swatches, paint chips, and architectural drawings. Style tiles act as paint chips and color swatches for the interface that we can execute on any device or at any dimension. It’s a truly responsive solution to visual design.
A mood board can provide a great jumping-off point for client discussion, but is often too vague to help clients make a clear leap from discussion to website. Mood boards are a good way to dig deep into a brand identity, but when it comes to bringing the identity to a complex web system, such a weak connection can make it hard for a client to understand and imagine the outcome. By contrast, style tiles make a great visual design artifact. They help a designer communicate how they will apply the styles across a larger web system, which includes desktop and mobile experiences.
Ask questions to extract adjectives#section3
The style tile process teases out the passion behind a brand, revealing nuggets of descriptive goodness all while connecting the client to the project. The first step in the style tile process is to question the stakeholders. You can use a survey or ask the questions in a design kickoff meeting. First, be sure to have the stakeholders list and rate their goals for the site’s visuals. Having them define their goals up front reinforces the priority of each style decision throughout the process. Next, ask questions that will encourage adjective-rich answers in your survey. Metaphor questions like the ones described in this Adaptive Path article are strategic and help break the ice. For example: “If your website was a vehicle, what vehicle would it be and why?”. This is a great question: there are social and cultural perceptions that surround different automobile brands and types of transportation. The adjectives associated with these brands may be very different. Your client will describe a Toyota Prius differently than an SUV.
Semantic differential survey questions are a really good way to understand the client’s aesthetic preferences. You can set up word pairs that are opposite of one another and ask clients to select a point on the scale between the two to help describe the way they envision the site. Do they envision the site as modern or old-fashioned, or somewhere in between? These questions help rate how closely the stakeholder relates to a word that describes the site’s potential style. Illustrative, photographic, and typographic are all words that a stakeholder can rate to help you get a sense for their preferences. Often I’ll pair an example site with each word so that the stakeholder can see the relationship. MailChimp is an example of “illustrative” while NPR is an example of “typographic.”
The answers you get are key to forming the emotional bond between a two-dimensional visual design concept and the passion that the client feels for their brand. Listen carefully, sort and dissect the stakeholder’s responses, and draw clear connections between the visuals in your style tiles and the client’s actual words. The more literal you can be, the more your client begins to feel connected to the process, which builds trust, and paves the way to a smoother approval process.
Once your stakeholders have filled out your survey or answered your questions during a kick-off meeting, analyze what they’ve given you. Study their answers and highlight adjectives to compile a list. Have some adjectives been used more frequently? Those words go to the top of your list. Themes will begin to emerge, and from this you can start to formulate an online brand vision. This can be a short statement that sums up your findings, or it might state that all of the stakeholders are in disagreement. Whether the online brand vision is clear or disjointed, it provides you with a jumping off point to discuss how to move forward with your client as you present the tiles.
In a recent project, the Phase2 Technology design team worked with The Washington Examiner to create a 2012 election campaign microsite to serve up-to-the-minute political information. The site goal was to extend the Examiner’s historic brand with more of a patriotic tone to energize readers for the upcoming election. Using adjectives the Washington Examiner team provided, Phase2 interpreted the newspaper’s brand by exploring three different stylistic options for the client to choose from. The styles reflected interpretations of three variations on their current online brand.
The three tiles presented to the client are below.
Iteration nation#section4
There was some overlap in the adjectives that the Washington Examiner stakeholders used to describe their brand, which helped us to create a clear brand vision. The word “patriotic” dictated a red, white, and blue color scheme and their rich history in publishing led us to choose several slab serif typefaces which were developed for readability and the publishing industry. Words like “current” and “modern” coupled with the fact that the site was specifically for the 2012 campaign spurred us to explore texture and depth in the presidential candidates’ brands. Beyond the adjectives that were most popular, “clean,” “strong,” and “friendly” dictated three directions that the overarching vision could evolve into. The “clean” tile was bright with a lot of white space, the “strong” tile featured brushed aluminum and the stars from their logo, while the “friendly” tile included large hits of vibrant color.
During the iteration period, the stakeholders decided they wanted the first tile but the red stars from the second tile and the typeface from the third tile. During this round, they decided that they preferred a friendly slab serif typeface, so we chose Adelle and they loved it. This final tile translated directly to the final design of the site.
The style tile that the Washington Examiner approved.
It’s common to present multiple comps to a client during the design process. Clients like to see options, and multiple comps make stakeholders feel like they’re getting what they paid for. Design is sales and we love to make our clients happy, but presenting multiple, fully visualized comps hurts the process more than it helps it. Because it’s human nature for people to mix and match, this allows clients to sabotage the best solutions to their design problems based on transitory stylistic preferences. In the end, you have a Frankencomp, a mishmash of interface elements conceived outside the website’s goals.
Process and approach affect the end result#section6
Design is a tricky practice because everyone has an opinion on aesthetics. Clients are a major part of the design process: without them you’d be making websites for free and that’s not a design job, it’s a hobby. Style is preference-oriented while design is goal-oriented. It can be daunting to help your client understand how the two are separate, but style tiles can be a key component in the web design process that allows you to involve your client on an interactive, iterative level. When you expose the design process deliverables in iterative chunks, the client is able to provide more feedback, feel more involved, and become a valuable collaborator in the final design.
Design is about trust#section7
The style tile redefines the roles in the client/ designer relationship. People go to counselors when they need to solve life challenges. Clients go to designers when they need to solve communication problems. If you consider the designer as a counselor who guides the client to a solution, then trust builds with each iteration. Would you trust a counselor if you walked into a room and they pulled out your fully developed recovery plan based only on your previous history? You would walk out! An organization’s brand and the way they communicate can be delicate matters, as delicate as a family relationship issue or marriage. The approach, tone, and process that you take as a designer has a tremendous influence on the relationship you build with a client. Having direct access to the client, educating them on your plan for the process, and incrementally diving into the design are all parts of the style tile process that help to establish invaluable trust.
Designing for the web is no longer designing for just a 960-pixel width. Designing sites to act responsively across multiple screen widths and devices changes the relevancy of design comps for client interfaces but also for team communications. Creating a mockup for every possible device or screen size is inefficient and confusing to a client. Style tiles are the cornerstone of a solid design system that sets client expectations and communicates the visual theme to all the project team members. Designing a system rather than site pages gives your team the tools to create a living, breathing website. From a client-approved style tile you can begin to build other visual assets, such as component style guides that address frequently used elements. For more thoughts on design systems check out sweet systems.
Designing our design process#section9
As web designers we craft experiences for users, but we often overlook the need to design the experience that clients have during the web design process. Design thinking can improve how we tackle challenges, involve our clients, and present deliverables. Style tiles expedite project timelines, involve stakeholders in the brainstorming process, and are an essential artifact in the responsive design process. Involving stakeholders early on and mixing and matching styles with a deliverable that is void of layout can have a dramatic emotional effect on the entire team and the project’s outcome. For a quick cheat sheet on how to get started integrating Style Tiles into your process take a look at StyleTil.es.
