Knowing our business objectives and having developed a clean sitemap, we can breakout the dry erase markers yet again and head to the whiteboard to create what web designers call wireframes.
Wireframe: A basic “sketch” of a web page that focuses on interactive functionality and rough layout as way to quickly execute web design.
Wireframing may or may not fall under your responsibilities as a digital marketer. Many user interface (UI) specialists will take this on or a savvy web designer that has deep expertise in the field.
However, knowing the process is yet another tool to add to your marketing kit so it is worth being familiar with the concept. Being able to communicate visually, be it crudely, can make it much easier to collaborate with creative talent. And as a digital marketer, you are by default the keeper of the flame for the user. Without somebody representing their voice in the design conversation and tirelessly advocating for providing value in exchange for their time on the site, the user experience can quickly drift into the weeds in the pursuit of “amazing web design”.
Here’s an example for a wildlife conservation nonprofit’s homepage for version one. This was built using a software tool called Balsamiq Mockups but a whiteboard and a camera works just fine too. Notice how crude it is?
How to do wireframing:
- Have your well-researched and user tested sitemap handy. Start with the homepage and begin by setting up the main sections on the page. In our above example for a sample homepage, we have a large background image and three sub columns for News, Featured Project, and FAQ’s. Above that will appear a short mission statement. This will most likely be refined many times but being visual makes it much easier for collaboration.
- Off to the side, include any special notes regarding how the page will work (these are the yellow Post-It notes with arrows in the example). You might want to call out a rotating slideshow or how one of the sub columns will pull out the most recent blog post on the homepage. Any clues you can give on this type of interactivity avoids costly mistakes in the design and coding phase. Do not assume anything here and spell out every “gotcha” you can think of for the web team. A simple fading slideshow is actually quite a bit of work if it’s being custom built into a Content Management System (CMS).
- Not every single page on a website will be unique. Usually there are just a handful of templates that get reused over and over. The sub-pages or “innerpages” will most likely have a single page template with different content. These usually contain a main text area with a sidebar. The ratio of real estate is usually ⅔ main and ⅓ sidebar or ¾ main and ¼ sidebar. The same method as above applies for laying these out. Below is an example website innerpage for the adventure tourism industry:
The same process is repeated throughout all the unique page templates as based on the sitemap. In the end, you may have anywhere from 3 – 10 unique page templates – usually more if you are laying out a large ecommerce site.
Use your sitemap as a checklist to make sure each and every page has a look and feel for handing off to your web designer.
Most importantly gut-check this to make sure each feature and layout serves your target market.