How to Make a Wireframe to Help You Plan Your Website

Making a wireframe

Building a website without a wireframe is a bit like building a house with no architectural plans. You’re likely to end up with something that’s eccentric at best and unusable at worst.

Whether you’re the designer, your mate’s the designer or you’re paying top dollar, a website has to start somewhere.

Before you get to work finding images and writing copy, set some guidelines to keep you on track with word count and dimensions. Even if you’re going DIY, you need the project to be efficient or it’s actually going to end up costing you – in hours of frustration.

Wireframing or mocking up is a great way to start visualising what you want to end up with. Lots of website providers have layouts for you to choose from and then customise, but I’d advise wireframing anyway because once you start fiddling…it can get messy.

So I have a delightful tool for you: Moqups.


Moqups is well named: it’s a website that lets you make mock ups. You can use it for things beyond website wireframing (I used it to plan rearranging my living room when I was a little over-excited about a new sofa) but it’s set up for online.



In your toolbox you get things like an internet browser frame, image placeholders, buttons, icons, and tablet and phone frames. Everything you need to get a basic wireframe together to either help a designer understand what you want, or start building a website yourself.

Get more tips for starting your business website.

Need to start planning your business website? Use @moqups to work out where you want everything. Click To Tweet