There’s nothing more exciting than getting together with a client to kickoff the creation of a beautiful new website.
Everyone is feeling ambitious and creative – and then we come in with our jargon, mapping tools, and technical needs to slow everything down. But we promise, the information architecture phase is as exciting (and as necessary!) as the remainder of the process. In this month’s Rabbit Rhetoric, we break down the “big three” of the discovery process: the creative brief, the sitemap, and the wireframes.
The Strategic Creative Brief
Before we can start any part of a creative process, we need to be on the same page as our client. Enter the strategic creative brief, a document that outlines the business goals and objectives, the creative expectations, dreams, and aspirations so that both parties are clear on the anticipated outcome.
The creative brief itemizes specifics, such as necessary navigation items, and generalities, such as other websites that the client likes or wants to emulate. We discuss things like brand guidelines, personas, and what the user should be able to accomplish on the site. Basically, it’s a set of guidelines for everything the website project should accomplish.
You’ve probably seen the word “sitemap” before, usually hovering somewhere in the footer of many websites. The sitemap’s definition sticks pretty close to the word itself – it’s an outline of the primary and secondary navigation items on the site.
We use the sitemap as a guideline for both template design and content population. It is, effectively, a roadmap that lays out where pages should go, what structure they should use, and the ways in which they relate to one another. It is a content inventory that lists out every page that will need to exist on the website, and where it will ultimately live in the site hierarchy.
The wireframes are exciting because they are the bones upon which the site will be built. This is the first time a client will have a semblance of what the end product will be like. Though wireframes are void of imagery and almost all copy, they give a visualization for the structure and layout of each unique template. Wireframes address all of the components a page template should include. For example, a homepage may depict a hero banner, a grid of products, and a latest news module. A bio template may get across that, for each person, we need a headshot, personality shots, contact information, 2-3 paragraphs of bio text, and 5 highlights of that person’s career. Obviously, the items that make up each wireframe are completely customized based on the site objectives and what the end content will be. It is the blueprint for the website, and it is crucial that we incorporate all of the elements in this “black and white” way before we start thinking about color.
Our designers take the “bones” laid out in the wireframe and use them to construct a nearly-fully-realized rendering of each template in the next phase. By determining the basic layout for the page, we’re able to more effectively determine the hierarchy of visuals and important copy so our mock-ups are pixel perfect to the end result.
The above three items are the basis for the entire design phase, which in turn is the basis for development and content population. It is crucial that we get approval for each portion of the information architecture so that both we and the client are on the same page from the ground up. IA may seem boring in contrast to design and development, but rest assured it is no less important – we’re thorough at each and every phase for a very good reason!