A physical, interactive web design kit created to facilitate client conversation and brainstorming during the discovery and design phase.
Tactile artifacts can be powerful tools when working with clients on website design and discovery projects. They help create structured limitations, within which productive conversations can take place and decisions can be made faster. Use this kit to help control scope and manage your client conversations, or simply use it as a tool for developing designs and websites faster.
The kit is intended to be printed. Some items can be laminated for re-use, and others should be left as one-time paper artifacts. The information below outlines each part of the kit, what it's used for, and how to assemble it.
The physical nature of these artifacts acts on several levels to help streamline conversation. When we encounter physical objects, we take them at face value. The limitations present in the physical object can guide us to the solutions that we are seeking faster.
I have found in my work that using physical methods for wireframing and workshopping ideas with clients helps mitigate any confusion about what a wireframe is, or why we would want to limit primary navigation to seven items for example.
I hope you find this kit as useful as I have to jumpstart your next web project!
The Wireframe Toolkit provides two base "browsers" (one blank, and one with search and navigation elements) and two sets of blocks. The components are structured on a 12-column grid.
Instructions:
The Visual Vocabulary Reference sheet provides a set of descriptive terms to use when reviewing competitor or peer websites, and helps clients come up with words to express their aesthetic preferences.
Instructions:
Design Review Worksheets are useful when looking at example websites with the client. This can help you learn more about their design preferences, tease out descriptive terms they use to describe things they like and dislike.
Instructions:
Use the Site Descriptors Worksheet to help clients prioritize aesthetic preferences.
Instructions:
Personas are a great way to identify audiences and better understand their needs. This template can be adapted to create re-usable personas, or print blank copies of the template to work with clients on creating personas from scratch.
Instructions:
Idea Cards are a way to control scope. Whenever someone comes up with an idea during discussion, write it down on an idea card to be evaluated for later. This is a physical manifestation of the "ice box" in agile methodology.
Instructions: