Whether working alone, or as part of a team, wireframes are an important part of the development process. I’ve been working on some wireframes for new features on an existing project, so I used this opportunity to learn a bit more about them!

What are they? Wireframes are usually fairly low-fidelity representations of how a page will look. This means boxes instead of polished images, and maybe use of dummy text. It should allow viewers to get an idea of the layout and flow of the page, without distracting them with flashy images or eye-catching colours. Wireframes are for sharing, and getting feedback, and that should be the main purpose.

This is the perfect time to make changes to the layout, and you may end up making multiple wireframes of the same page to get an idea of what works best. This is also a big reason to avoid creating a super detailed wireframe- you might be making a few of them, and it’s important not to get too emotionally attached, or spend too much time on them as you could be going in a totally different direction to what the client wants!

You can think of wireframes and prototypes as being at the two ends of a spectrum. Wireframes can be as simple as boxes sketched on a piece of paper, and prototypes are usually exact representations of what the finished product should look like, including the ability to navigate by clicking areas or buttons, and are typically created with specialist software.

The project that I’ve been working with exists already! The wireframes that I’ve been working on have been for features that we’d potentially like to implement. For example, adding another field to a form to allow for a certain feature. The process that I’ve been using has been to take a screenshot of the area which would potentially be affected, and editing it, making use of layers so I can move individual elements around fairly easily. A lot of the elements I was adding actually existed already, so I could duplicate those, but for elements that didn’t exist anywhere on the site, I represented them quite plainly. For me, this struck a balance of being a good representation of the desired features [though by no means pixel-perfect], and being a fairly rapid process.

There are free online tools for wireframing, wireframe.cc is one that I like, but what I’ve started doing is using image software that I have already installed [I use GIMP] because I was already somewhat familiar with it, and it does give me more freedom than using a free version of an online resource. It also means that I choose exactly how much detail I want to include.

I’ve been having a lot of fun working on my wireframes! I definitely look forward to working on more in the future!