Fortune favours those who prepare! Even more so with wireframing.

Wireframes are a very important part of the production process – not only for web design but for mobile applications, software, print, and any number of situations where the end result requires a lot of labour and time. Take some time at the beginning of a project to formulate a plan, a strategy, a path that leads to finish line without dealing with unexpected elements that could derail the more time-consuming tasks. This wireframing walkthrough will get you up to speed in no time!

wireframe walkthroughWireframing allows for a quick and easy method to get all your ideas down on ‘paper’ and also spot potential weak areas and technical issues before getting bogged down in the details. The objective with wireframing is to quickly put together elements with a very low detail level to properly communicate and capture your ideas and layouts.

These videos provide an overview of the process, visual examples, and some of the tools that can be used. This video series uses moqups.com to put together wireframes. There are many other similar services and applications that can do this type of thing, make sure to check out an expanded list at the bottom of the page to see if there’s one that you like a bit more.

Wireframing - Basic Principles and Tools

Wireframing Walkthrough - Create a Layout in Moqups

There are quite a few tools available to make the task of wireframing quick and easy. Of course, it can be as simple as paper and pencil! Sometimes, though, a bit of extra is needed whether it’s to collaborate with others, have access to stencils, pre-built templates, and 3rd party icons and fonts. Take a look at some of these tools and see which one works best for you. There’s a handy list over at creativebloq.com that should be a helpful starting off point. Make sure to read the comments section on the page to see even more suggestions.