A website’s wireframe can be seen as its blueprint. Wireframes are used to visualise how the elements of a page can be arranged to better achieve the piece’s main purpose. Being it selling a product, telling a story, educating an audience or simply creating something visually pleasing, a piece of content can definitely make or break whatever action you require. A wireframe strips the page of any aesthetics and focus only on elements, content positioning / hierarchy and navigation. Wireframes can be sketched in several ways, but what really matters is the actual thought put into it.

Why?

• Visualising a piece without its aesthetics helps you understand how you navigate. It helps you to understand the visual hierarchy of the content, along with its navigation, thus solving roadblocks. By focusing around the content, you can discard anything that diverts from the purpose of a given piece of content.
• Today, we are exposed to a lot of information from several different means, therefore, it is imperative that a piece’s purpose is presented as effectively as possible without confusing it’s target audience.

Ok, I get it, but when should I wireframe something?

Well, wireframing is generally relevant when building websites, web applications, interactive websites and so on. Therefore, the more complex a piece is, the more effort and thought should be placed into wireframing it beforehand.

What should I use to sketch my wireframes?

Any visual means are fine, provided you follow what defines a wireframe. You can sketch it on paper, use Adobe Illustrator, Photoshop, Omnigraffle, Powerpoint… Whatever you feel comfortable with.

Typical development flow of a website:

How granular should my wireframes be?

It depends; generally wireframes tend to be very basic. After you’ve drafted the main ideas of a piece you can start with a basic wireframe by placing each element on to the right place. Put yourself in the target audience’s shoes. If the target audience is fairly technical, you can probably get away with being a bit more abstract with the piece. On the other hand, when an audience intends to be fairly broad, the content should be objective and easy to navigate as possible. The key thing to have in mind is: “Don’t make me think”.

A piece of content shouldn’t be a riddle, at the end of the day you are trying to trigger something in your target audience, whether that is a specific action or a connection around something meaningful for them.

After you’ve drafted the basic wireframe, you can generate a more extended wireframe that adds a bit more detail to the structure if you are still unsure of the design or need more granularity.

Let’s break it down:

For agility sake, you shouldn’t spend too much time on this phase as design and execution can force a wireframe to be altered. Wireframes are not strict laws, they are, in fact, a thought process and should be revisited during execution to help find an alternative solution if a roadblock is hit.

Following on the previous example, we can have a look at the live version of the piece Sky Bet’s Transfer Trends:

Responsive design & Wireframes:

When a piece is being executed, generally it will be accessed from multiple different devices. Wireframes, can also be used to plan how the content is readjusted in smaller devices. For example, if a piece is intended to be used on smartphones as well as on desktop computers, obviously, the available real estate will change. Wireframes can then help you to rethink your piece and adjust the experience to different devices.

Wrapping up:

To finalise, wireframes are relevant, meaningful and can help a piece achieve higher grounds but are not bullet proof nor the holy grail of content success. There’s only so much that wireframes can do to help a piece of content. What matters is that some sincere thought is put into them. Successful pieces of content rarely happen by accident, they are well thought and planned; therefore, preparation and research are important but, overall, what matters are strong and meaningful ideas…well executed. Effectively, cool sh*t.