The Importance of the Design Guide Process
If you often find yourself getting stuck starting a project or being stunted by all of the creative freedom you have going into a project, this one is for you. I used to find myself getting slowed down because I didn’t know how to just start a project. And this may seem like a lame reason to delay work, but as I talk with students, professionals, and professors within the design industry I've found that its not just me, its not just students, most people struggle with this. I've asked myself why do I feel like this? I should be excited about having total creative freedom right? Well to me I've found, this is pretty overwhelming. Because of this I have jumped straight into wireframing or designing the main portion of a project without any of the preliminary work, and the end result when done this way is a lot of inconsistencies.
I was assigned to do an in-depth design guide for a website I was assigned to create. In the past I had mainly done quick style guides that displayed basic information but didn’t always lay out the skeleton of the project at hand. With this project I had to start from the ground up, which was a tedious process, but worth it.
I began with Personas…
Personas are a great way to identify who your target audience is. If there is a certain demographic or characteristic of people you are trying to engage, you will find out here, and you can focus in on what you need to do to make this project work for that group. Personas often work best with surveying research to get an idea of you are making this project for. A persona page might look something like this, with some bullet points, graphs, and some quotes.
Make a Concept Model.
Concept Model’s are a great way to just lay everything out. Everything from contents of the project, lets say its a website for a client, all the way to the general navigation of the site should be included. This is crucial to knowing where you are in the project and where you have to go. It can be as detailed or as simplified as you'd like, but the more detail and the more connections you make through the model, the easier the work will be for you later.
Construct a Site Map (try post it notes!)
A site map will break down all of the content and pages of your site. This is also another life-saver for any designer. By doing the site map early on you can create a sense of what you want the project to be and then can work on giving yourself constraints on how you're going to get there. A site map can be created digitally, or on paper. One of the best ways to layout information especially for pages of a website is with post it notes. This way the structure feels tangible and it lets you visualize all of the organizational possibilities of the project.
Work on a Style Guide.
A style guide is crucial, and I personally like to do this pretty early on in the design process. Its a great way to figure out the feel you want of your project. I find too, that giving myself some constraints early on will allow much more creativity, because then I know the bounds I can work within while still making the project feel cohesive and structured.
Time to make some sketches.
Now all of the preliminary structural work is completed, it is the perfect time to move into sketching out some wireframes. For me getting some sketches down on paper is key. I can draw out 10 different ways of how information could be laid out and I can find the ways that work the best, all without committing to anything to seriously to its digital format. Once you have found one or two sketched wireframe layouts you like, then its safe to move onto the digital wireframe.
Bring things together and build surface comps.
At this point you have enough of your project’s foundational pieces done that it should be nice and easy weaving all those elements together to make a clean and cohesive surface comp. Remember, these surface comps should always be responsive.
Christian Mercado is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Interaction Design. This article relates to the “Validation & Design Guide” project in the DGM 2250 course and is representative of the skills learned.
