I just went to a great presentation by Raleigh AIGA and Viget Labs about web design tools and processes. It was a great presentation and discussion, and it really got me thinking about how we build relationships with clients and get them the best product possible.
At first, the kickoff exercises sounded a bit silly to me. They were questions like "If your organization or website was a magazine, what kind would it be, and why?" But right away, after hearing the answers that some organizations gave, it started to make a lot of sense. Some organizations would want their website to be a New Yorker magazine, filled with information and well-respected by many. Others might envision more of an AdBusters type of magazine, changing the world and pushing boundaries. Still others might prefer magazine like Rolling Stone, edgy, yet established and classic. Those are three very different types of organizations and very different websites. Furthermore, it gives a client the opportunity to give their input at the very beginning, without having to know any jargon or technical specs. It provides a strong foundation on which to build, not only a website or application, but also a strong relationship between the client and the tech team. It can also help to get feedback from different levels or departments of an organization that might have different needs or expectations for the website.
This might sound more like Oprah than solid business advice, but this is another thing I really loved learning about. Rather than taking sketchy ideas from the kickoff exercises and throwing them together into a fully-fledged composite or mockup, it might be better to throw the basics, such as color palette, texture ideas, typography, etc., into an organized presentation to share with the client and get further feedback. The presentation described doing three mood boards: one safe, basic, and classic; one middle of the road, not plain but not cutting-edge; and one more daring and bold. Clients can obviously choose elements from each, but typically one will stand out above the others. This means that things like colors, fonts, and the general feel of the site can be roughed out before pixel-perfect renderings are done.
I'll admit, I often skip wireframes in favor of going straight to the fleshed-out design comps. Normally, especially for small sites, this is okay, since you don't have to work with as many elements or consider as many factors for usability and interaction design. For larger projects, however, it can really save time to get the general layout established in wireframes before spending any time on comps. This is also a good time to do a content analysis of a clients existing site, if necessary.
An interesting note: many web and UX designers prefer to start on a non-front page, to take into account the needs of those pages before designing the front.
Organization, preparation, and organization again. These were the points that really stuck with me through this part of the discussion. If you organize your comp files well before you start working and while you work, you will spend less time organizing them later. Starting from a template with a grid, guides, and spacers will help when it comes time to develop, especially if you are not the one doing all of the developing. I think this point goes beyond comps, but it fits well here: think about all of the other people who will be using the materials you produce; if your system isn't crystal clear, the product you are delivering isn't as good.
Having all of the steps before this one means that the client won't be surprised by your design. They will understand how you got to it because they were involved in the steps before, and you will have more information and trust to back up your design should any questions arise.
On a less existential level, using smart objects in Photoshop is a good way to make changes to an element and have it change in every comp. So a sidebar that appears on 10 pages can be changed once. Good trick!
Buildout & Style Guides
One of the rewards for having your comps so well organized is that they won't need much work to send them to the client. Break your comps into individual pages, if they are not already structured that way, and include graphic elements and any odds and ends in your folders. Save your color palette and include that as well, so future work can be consistent with your design.
Style guides can also be helpful for development. For elements that might not appear in the current pages, like tables, forms, etc., you still want to have rules for them in the design. A style guide is a snapshot of typography, gradients, color palette, and more, that will be helpful for developing and consistency down the road. Rather than making a developer or client look through comps to find out what a header will look like, they can simply look at your style guide. This can also be helpful to make sure that elements of your design work well together.
Sound like fun? Want to make some mood boards with me? Just send me an email!