At the start of a project, we usually need to make wireframes, in some form or another. What this entails depends on the project. Sometimes all that's needed is a simple pencil or whiteboard sketch. However, larger, more complex projects often require a high-fidelity deck with annotations. To save time and have consistency across our organization, we've created a number of templates.
If your looking to simplify your own processes, we’re here to make it easy for you! In this post, you will find an assortment of starter wireframe templates. But before you jump in, here are a few things to keep in mind.
When to use these templates
First, it's important to understand what you need for your project. Here at Devbridge, when we're doing a rapid prototype, we almost always keep our wireframes simple. Since the sole purpose of these wireframes and sketches is to explore the general concept and user flows, it's most effective to work quickly and not get caught up in aesthetics. In this scenario, rough sketches are sufficient. A lot of times we see designers spend hours on end making “pretty” wireframes that are never going to be put in front of anybody else besides the person who created them.
However, when there is a deliverable that needs to be approved by a client or handed off to another designer and/or development team, a higher-fidelity wireframe is necessary. For these projects, we use these templates, which accommodate detailed documentation and any necessary interaction notes/annotations.
Yet, even high-fidelity wireframes should not be overdesigned. We find it best to stick to a gray-tone color scale, and refrain from incorporating branding. Time is better spent on ideating, establishing hierarchy, and keeping production lean. Leave the intricate pixel pushing for the UI project stage.
It is important to note, however, that if the fidelity is too high it can actually cause confusion. We have made this mistake in the past and the question we received was, “Why are the designs all gray and black!?” Be sure to inform the client on the purpose of wireframes, and what type of feedback is ideal at this stage of the process. The architectural blueprint analogy usually works well.
About the download
This download includes templates for iPad, Desktop, iPhone 5 and iPhone 6. You’ll find these different templates in the 'Pages' section of the sketch document. Each template is also set up with a common grid structure. Control+L will toggle your grids on and off. There are also document title and section title screens. When you're ready, select 'Export Artboards to PDF' (shown below), and you have a document that's presentation-ready.
Pro Tip: Before you export, organize your artboards! The top one should be your first page and the bottom one should be your last page. This way, when you export, everything will be in the correct order.
Happy designing!
