How To Create Wireframes

A Guide On How To Create Wireframes

A wireframe for a website is a visual guide (it can either be computer generated or sketched), that helps to give you a rough idea of the layout and structure of your website. Wireframes can be:

  • A simple hand-drawing on paper
  • A black-and-white PDF
  • A basic clickable website (you can use Balsamiq, Lumzy or Wix to name but a few online tools)

Wireframes do not include colours, fonts and images – there is no point in spending any time worrying about those, leave it to your designer to design!

Hand Drawn Mobile Wireframe

When creating a wireframe, you should consider:

  • Where text should go – and what relative size it should be
  • Placement and size of images
  • Placement and size of videos
  • Locations of “calls to action”
  • The menu (navigation)

Before commencing any actual drawing, gather all the data you’ve been collecting including opinions from customers, surveys, customer personas and user goals, a map of your sales funnel, your differentiation from competitors etc. Take all of this information into account. Remember, you aren’t just building a pretty website, you’re building a website to create leads, acquire new customers, and ultimately to make your business more money.

For example, say you are a plumber. You have talked to customers about their purchase journey and they said that they never pick up the phone and book an appointment straight away, they like to receive a quote first – you can use this information to ensure your homepage wireframe contains a big bold ‘Quote’ button, linking to a form.

Keep this in mind throughout the process! It’s easy to get sucked into small, trivial tasks that have little to no bearing on overall business goals.

It’s also important to understand what a wireframe is not. For example, it’s not:

  • The time to include pictures, colors and fonts
  • The time to include final copy.
  • A final design. Wireframes are used to convey how the site works, not how it will look.
  • A task that should be rushed. Annotate your wireframe to help others understand why certain elements are placed in particular positions.

Before your start sketching your wireframes

Wireframe plans are created to lay out all aspects of the site in the most optimised way possible to support the purposes of your business and the goals of your customers. For example, if you run an eCommerce store, you should arrange content on product pages in the best way possible to convert visitors into buyers, or to at least collect their information (email address and name).

Obviously, before sketching your wireframes, you should be 100% clear on the below:

  • Who your ideal buyers are (audience segments)
  • What goals/tasks your customers would want to complete on your website
  • Your unique value proposition and how these solve your buyers problems
  • Why site visitors buy from you, what added value you offer over competitors

The risk of not being clear on the above, is the potential for your new website to be completely ineffective.

What happens if I decide to skip the wireframes stage and just design?

Imagine you want to build a new house. Design without wireframing can be compared to giving your builders a brief document and expecting them to produce a house without any architect’s drawings. You wouldn’t simply inform them of how many rooms, windows and doors you want, and then trust them to know where to build these in a way that suits your family needs.

By skipping the wireframes stage you are leaving business decisions to your designer. Doesn’t it sound scary?

“By failing to prepare, you are preparing to fail.” – Benjamin Franklin

Conclusion

The goal for your wireframes and for your new website should be whatever your business and customer’s goals are. Yes, the website should look incredible and up to date with the latest web trends, but this should be the secondary objective.

Keep an eye out for our part 2 article as we delve deeper into the topic of wireframing.

 

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Time limit is exhausted. Please reload CAPTCHA.