It is always interesting and educational to get a peek inside a designer’s process. In this month’s Homegrown Lunch & Learn, Mindy Wagner of Viget , gave us a look inside her web design toolbox. Here’s what’s inside:
- Kickoff exercises: these include having clients complete a survey in order to learn more about the company culture, and help to determine what they are looking for in their website. This is often a fun project for the clients and results in a lot of interesting and informative answers. I like the sample questions Mindy shared, “if your company were a car or a magazine, what type would it be?” I think the answers could be very insightful. Keywords and ideas are taken from the survey results and used to find inspiration and create mood boards.
- Mood boards: the team of designers create three mood boards that will become the basis for the website design. Each designer creates a different board — one conservative, one middle-of-the-road, and one that tests the boundaries. The boards illustrate possible color palettes, typography, and element style treatments. The boards will be presented to the client and the one chosen, will go one to be developed into the website design. Sometimes elements of the other boards are incorporated into the design. (see samples & download a template)
- Wireframes: the user experience team will do a content inventory of the client’s site and create a wireframe for the website. The wireframe serves as a guide for the layout, but may have to be modified at times, if it just doesn’t work with the design. The designer and UX team work out a solution that will work with the design.
- Design comps: Next the designer takes the wireframe and begins work on the design of the website pages. During this process it is important to be organized. Name your layers and use groups, use spacers as measurement guides, and create commonly used elements. It is helpful to create a template that contains all the basic elements you use when designing any website. When you hand over the files to the client and development team, they should be well organized, documented and detailed. (see samples & download a template)
- Buildout considerations: You need to consider elements that may come up on other pages of the site, that you will not be designing a template for, such as forms and tables, and create styles for those. The development team will be given the Photoshop files, sample images of each page, and shared elements for the site, such as the header, footer, buttons, swatches, hover styles, etc.
- Style guides: This important document lists all details about the site design — color palette, typography, style treatments, etc. A style guide will keep everyone who works on the site on the same page, ensuring the design remains consistent.
Mindy suggests creating and committing to following a process for each project. Make it an efficient process — be organized, create templates, use shortcuts and smart objects when possible in Photoshop, whatever you can do to save time.
After her presentation, Mindy was kind enough to answer a few questions. One that I found helpful was what to do when a client is set on using an element on the site that just work or is a poor design or functional feature. Her answer was to identify what it is about that element that they client like and why they want it, then find a way to use those reasons to in a way that will work. For example, if the client wants to use a flash element because they feel it will make the site dynamic, find another way to make the site dynamic that will work better.
Thank you to Mindy for sharing her process and to Maura McDonald for her work in organizing the Homegrown series. This one was another great success. I’m looking forward to next month’s “Wear your Selling Hat with Confidence.”
Connect with Mindy:
@graphicsgirl
mindywagner.net
