How to Improve Your Web Design Process [Video]

While we’ve seen Web design advance dramatically over the past few years, the process by which Web designers work with their clients hasn’t. The first visual representation in any design process is usually a collection of three full comps or mockups. Those are then picked apart by the client, for whom the designer is now charged to create a “Franken”-comp. At least that’s how Samantha Warren, Design Director for Phase2 Technology, put it in her presentation “The Future of Web Design” at the Future Insights Live conference.

If you pick apart three approaches to create one new design, you no longer have a cohesive vision to meet the challenge. “Design is about problem solving,” said Warren. “It’s about users, clients, and business goals and going after it in a holistic manner.”

Warren suggests we break apart the aspects of Web design work into smaller bits so we can solve problems on a larger scale. Here are her recommendations.

Step 1: Improve communications

  • Listen: At the beginning, refrain from coming out of the gate with tons of suggestions. Instead, always be thinking, “What are the best types of questions to ask?”
  • Be Goal Oriented: Set the tone with the client that design is not about preference (e.g., I like blue over green) but about achieving goals. Avoid the use of the word “like” for yourself and your client and ask questions such as “What are the top three user goals in order of importance?” and “What are your top three business goals in order of importance?” When you know the answers, you have the criteria that everyone understands. You then use those criteria to debate whether a design element supports or doesn’t support user and business goals.
  • Ask more types of questions: Exploratory questions, metaphor questions (e.g., “Client’s product/service is like a _____. If it were a ______ it would be a _____and why?”), and degree questions (e.g., “On a scale of 1 to 5 how strong do you feel the site should be ______?”).
  • Interpret: Clients have ideas of what they want, but have a hard time articulating it. From your interview questions, begin a list of adjectives to describe the identity they’re trying to portray.
  • Define a Visual Language: Clients often use non-descriptive words, such as “clean” or “newsy” to describe what they want. But these terms are vague and can mean many different things. When they say a term like that, don’t take it as direction. Ask a follow up question such as, “Do you mean newsy like The Wall Street Journal or more like USA Today?”
  • Iterate: Developers iterate, so why can’t designers? Simply change design elements that aren’t working.

Step 2: New Visual Design Deliverables

Before you create the comps for the client, here are a couple of deliverables that will help everyone visually communicate what they want for the design of the site.

  • Mood board: A collection of images to set the “mood” for the brand and image you’re trying to create. A collage can quickly articulate the feeling you’re trying to convey, plus it creates a useful soundboard for feedback.
  • Style Tile: This design deliverable consists of fonts, colors, headers and other interface elements that communicate the essence of a visual brand for the Web. It’s the step just before the comp, and it’s perfect for:
  • Facilitating a common visual language between the designers, stakeholders and team members.
  • Providing a catalyst for iterative discussions about the client’s preference and goals.
  • Establishing a common theme that all team members can work towards when creating a responsive website.

Unlike a comp of a website, style tiles are “width” agnostic. It’s purely a style representation. It doesn’t show user experience.

  • Mockup or Comp: This shows the website layout as it will appear in the browser. It will hopefully be your last deliverable. And if you handled communications and previous design deliverables well, the iterations on the comp should be very straightforward since everyone will be in agreement on user and company goals, as well as the identity the client wants to represent.

Post a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>