By:Mark Ludemann Posted On: Topic:Design

Ramp up your UX with these starter wireframe templates

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 simple pencil or whiteboard sketches are all that are needed. However, larger, more complex projects often require a high-fidelity deck with annotations. To save time and have consistency across our organization, we have created a number of templates.

UX Wireframe Template from Devbridge Group
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. Prior to using these templates, following are a few things to keep in mind.

When to use These Templates

It is important to understand what will be needed for your project. Here at Devbridge Group, when we are doing a rapid prototype, we almost always keep wireframes extremely low fidelity. Since the sole purpose of these wireframes/sketches are to explore the general concept and user flows, it is 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 educate the client as to the purpose of wireframes, and what type of feedback they should be giving at this stage of the process. The architectural blueprint analogy usually works very 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 are ready, select “Export Artboards to PDF” (shown below), and you have a document that is presentation ready.

UX Wireframe Sketch Example

Pro Tip: Before you export, organize your art boards! 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!

Mark Ludemann
comments powered by Disqus
Let's Talk