Collaborating with Clients on Web Design

Posted Mar 14, 2011 // 2 comments

One of the most important, often overlooked, aspects of web design is working with clients. Looking back at my transition from design school to the real world I was a little shocked in how much input clients have on a final solution. Many designers can see this as a challenge, but at Phase2 we embrace the prospect of collaboration and see our clients as an essential part of the web design project.

Integrating client input into your process can be a big challenge. Many web design agencies do this by providing a client with multiple Photoshop compositions of their final site. The practice is meant to help involve the client and give them options, but in the end it really is to their detriment, creating a site that combines aspects of multiple concepts rather than a holistic vision.

Recently I had the opportunity to discuss this topic at DrupalCon Chicago. Below is a brief overview of the talk and a video.

When working with clients it is important to adhere to these Four practices:

• Listen to your Clients
• Interpret through visuals
• Establish a Common Language
• Iterate rather than Frankencomp

Listen:

Create a survey with a wide variety of key questions.

Resource Links:

• Andy Rutledge: http://bit.ly/dKW2Ef
• Sitepoint: http://bit.ly/eHoGc5
• Adaptive Path: http://bit.ly/eu2sKr
• How Blog: http://www.howdesign.com/article/Metaphor/
• Dan Saffer: http://slidesha.re/dTv9lm

Interpret:

Begin to dissect what your client's answers mean for visuals.

Elements of Design:

• Space
• Line
• Color
• Shape
• Texture
• Form
• Value

Principles of Design:

• Unity
• Contrast
• Variety
• Emphasis
• Balance

Resource: http://www.gdbasics.com/

Establish a Visual Language

Create a reference for common terminology

Not every method is appropriate for every client

Moodboards

For determining the feeling or personality of a brand. Best for when you are discovering and establishing a new identity for a client while designing a website. Concepts & Emotions. This method works great for web startups.

Style Tiles

This is the best method establishing a common visual language. As a designer you are visualizing what specific adjectives look like. This method is comparable to what interior designers do when redesigning a room. Imagine a shallow tray with swatches of carpet & paint chips.

Comps

Jumping right to mocking up what the site should look like in Adobe Photoshop, Illustrator or Fireworks. This works for really low budgets or sites that are being refined rather than redesigned. Works if expectations are set.

Mockups in Markup

(as @adactio suggested in the questions)

See this great article by Meagan Fisher.

Iteration rather than franken-comping

Developers do it and so should we. Iterate early and often to get on the same page as your client. Provide a worksheet for them to help score the visual elements against their user or business goals.

If you had a chance to make it out to my Drupalcon Presentation I really appreciate it and hope you enjoyed it!

This is a topic I plan to expand on a lot in future presentations and blog posts. Check back here for more info on how your clients can become an asset in the design process through a more refined process.