Why Wireframe?

Many a time, project managers in the process of creating an awesome website for a client often jump straight from a client brief, into building the required web pages. I have recently come to learn that regardless of how exciting this process might be, it is probably much like an architect building a house without the blueprint. That’s right, even web designers need their very own blueprint, but in our world, it’s often referred to as a Wireframe.

Wireframing:

Wireframing is a fun and important step in the web development process which requires a small investment of time prior to starting a project, but saves you from losing a lot of time later down the line. I guess many designers and project managers in the web industry have previously had experience of sending a first mock up to a client, complete with dummy logos, and lorem ipsum, only to have the client return with comments that focus purely on the aesthetic of the dummy logo, and not on the functionality of the page itself. The danger with this is, the client isn’t getting the opportunity to witness the full birth of their new website – and are instead seeing things from a half grown perspective. I wholeheartedly understand why that can get confusing for clients, because they won’t be sure if what they are seeing is the final thing, or a design proposal.

That is where the wonderful wireframe comes to play, to eliminate the gap between great ideas and great confusion. A wireframe is a simple way of understanding the layout of a website from a structural level. It allows you to reflect on the client’s brief and use what you know to arrange their content in the most efficient way, and also to define the information hierarchy of your page designs. For both designers and clients, it’s the best way to imagine the layout and interaction of their page without being distracted by cute typography and pretty colours.

screen-shot-2016-10-26-at-23-21-17

As illustrated above, it will always involve a header, a body, and a footer – everything else can be structured within that, including columns, grids, and spaces to put images at a later stage of the designing journey.

Benefits:

The great thing about including wireframing as part of your project’s process is that it allows you to take a step back from the computer, pick up a pencil and some paper, and draw to your hearts content (along with your clients content). I find that drawing my wireframe by hand first, allows me to understand the fundamental calls to action and other interactions needed on a page. This process becomes a lot more intuitive when it is mindful of the client’s content. Here, you are creating the Information Architecture of the site – yayy, you’re an Architect!

Once I am happy with my drawing, I proceed to recreate it within a wire framing software so that it is in suitable condition/presentable enough to share with a client. Some great digital tools you could use include Go Mockingbird, MyBalsamiq, and Ux Pin. Once I have created my wireframe digitally, I invite the client to view it and comment on the layout, allowing us to work together to implement any fundamental structural changes needed at an early stage. One of the greatest benefits I find is knowing that the project becomes more efficient with wire framing and also UX time too, if the client is able to expand their budget to accommodate that as part of the services they choose. It saves designers and project managers alike from having to later undo big designs or custom coded work, so, happy wireframing!