If you’ve been through the process before then you know that redesigning a B2B tech website is a big job and involves a variety of people across different roles at a company. Sometimes (ok, a lot of the time) getting everyone on the same page about your site strategy and design a little bit like herding cats! So how are smart marketers managing team expectations and driving the design process forward?
Wireframes!
What is a wireframe?
A wireframe is basically the blueprint of your website. The wireframing stage is the period of a website design process where the team is focused on information architecture, basic layout and functionality planning on your site. Wireframes can be hand-drawn or put together with the help of a software like MockFlow or Balsamiq and are typically created using very simple line sketches, shapes and shading to define where copy and images will be on a site and the basic flow of a website’s content.
During this process the main focus is on thinking through the overall design and content strategy and eliminating guesswork.
In many ways wireframing really is the most important phase of a website design process.
They will save you time.
It’s a lot faster to mockup or prototype a website as a wireframe than it is a high fidelity full color design! A quick sketch on a whiteboard can get your team on the same page in a short meeting and laying-out wireframes for your full site can be done in a matter of hours, rather than days if you jump into Photoshop without thinking things all the way through.
Your design direction will be much more clear and precise.
Great user experience and design doesn’t just happen - it’s driven by smart planning. Just jumping into a design with no plan or intent is a sure-fire way to cause frustration with your team due to confusing interfaces, missing features and an overall shaky foundation.
Wireframing your site design will make you think through the high level strategy and make design decisions that are aligned with your strategy and make more sense.
Wireframes allow you to clarify your website’s features earlier in the process
A lot of terms used in website design are kind of vague and open to interpretation -- think about it: mega menu, hero image, slide-out, hover state, etc. are not the most descriptive terms. If you rely on trying to articulate features verbally or in writing it’s likely that something can be confused or envisioned differently. By wireframing out your site design and features you can find clarity on the features without having to design every element in a full mockup.
