A wireframe is so much more than a tabular black and white document. As one of the first outputs of a website rebuild, wireframes play an instrumental role in guiding the visual and technical direction of a new site. And yet, they tend to leave an unsettling impression on a client. “Why would my site look anything like this?” many wonder aloud upon setting sights on one for the first time.

Fortunately, as a marketer, you can help to ease their mind and put any doubts to rest immediately. Simply compose a thoughtful piece of work that speaks for itself. Though a wireframe may seem straightforward to you, consider the perspective of others. The VP of marketing or even the digital marketing manager isn’t immersed in a website rebuild every day.

So start out by explaining the purpose and goal of a wireframe. At its very core, a wireframe serves to communicate the structure of a new website, setting aside the design aspects. Think of it as the blueprint of a website, and you as the architect. Clients should expect to be amazed not by the look or feel but by the framework it sets in place to inform the design and user experience of a website.

Here are 3 key tips to keep in mind as you get started with a wireframe:

1.  Define the layout.

Begin your wireframe by defining a layout that will serve as the skeleton of the new site. The homepage will usually contain a header with the company logo and main navigation, and perhaps a search box. Below this lies the meat of the page – prime real estate for brand awareness and brand lift, such as a video background overlaid by your client’s core messaging. And at the very bottom, a footer box, usually involving a sitemap and perhaps social media or privacy policy links. The key throughout is to use placeholder text with clear examples directly on the wireframe. It could be as obvious as “[Video background overlaid by messaging]”.

2.  Outline the constants.

Clarify the constants on each page to help orient your client amid what can often seem like a sea of boxes. Two such constants are the aforementioned header and the footer. Most likely, these two elements will stay the same on each page, helping to unify disparate sections of the site. It will be that much easier for your client to understand the wireframe once you are able to reinforce the consistent elements across each page.

3.  Build out key details.
Don’t get too far ahead of yourself with signaling what’s to come with the next phase of website development, but don’t skimp on the key details either. If you’re using a prototyping tool such as FlairBuilder or Mockingbird to craft your wireframe, it is important to build in the user interactions on each page, such as the main navigation or drop-down menus. These elements will guide the navigation and organization of content on the wireframe. Paint the picture further by highlighting where every link or button would go to on the new website. If you have time, populate the homepage and key landing pages with images as a finishing touch.

Happy wireframing!