How to stop being a n00b at wireframing

Are your wireframes wack? Are you embarrassed to be seen with them in public? Do they end up useless because you can’t face looking at them? If you want to get better and aren’t sure how to go about it, this article is for you!

First, are you actually attempting to create wireframes at all? Nine times out of ten when starting a project, it feels like it’ll be easier to dive head first into writing code. By the time you realise that you need a wireframe to guide you, it feels too late. But the good news is, it’s never too late for a wireframe. Many a project has been rescued with an overdue wireframe. Think about the benefits of having a plan before attempting anything - in life or in coding. You wouldn’t set out toward a destination you’ve never driven to without first looking at a map or setting up your sat nav. Give yourself the best opportunity to succeed and by creating a wireframe to follow before you start.

Whether you’re a new dev or someone with more experience, you might find the idea of learning to wireframe a bit intimidating. The truth is, there’s no bad time to learn something new in development, so either practice in private or on collaborative projects. Often, others will offer positive assistance when asked for constructive criticism.

So how do you actually get better? Here is a handy to do list:

1. Keep it low fi
All you need is a pen and paper. This is the fastest, easiest way to transfer ideas from your head into a wireframe, and you don’t have to get used to using wireframing software. Plus, if you don’t like the result, you can chuck it and have another go.

2. Strip out unnecessary detail
Be sure to make your wireframe fit for purpose. If you’re just using the wireframe to guide your structure or layout, it doesn’t have to be an all singing, all dancing design document with every element beautifully detailed. It’s perfectly acceptable for a wireframe to be a collection of boxes on a page indicating where content will go.

3. Label as you go
More specifically, label the things that are going to help you do your job and save you time when you come to building. This means identifying HTML tags such as divs. Extra marks for using HTML5 semantic elements such as header, footer, section and main to better structure your document. This will get you thinking about how your HTML structure will look before you have even switched on your laptop.

4. Build the things you wireframe
The process of turning a sketch on the back of a napkin into a glorious website will help you learn more and you’ll develop a deeper understanding of what you need from your wireframes in the future.

5. Document changes as you go
Just as an entrepreneur understands that the best business plans are the ones that are kept up to date and used as a guide all year round, you too will have to keep your wireframe up to date as you go to get the most out of it throughout your build. Changed that <div> into an <aside>? Moved that element to be on a new line? Make sure you record the changes. The good news is you did it in pencil. Now where is that eraser...?

7. Keep hunting for inspiration
Get out there and cruise Codepen, check out design blogs and seek out developer portfolios - these are a great places to find incredibly innovative work that may get you creative juices flowing and give you ideas for your next exciting wireframe layout.

These are just a few quick wins for stepping your wireframe game up and increasing your ability in what is a hugely useful skill to have. Just keep practicing and you’ll have the confidence to wireframe like a champ in no time!