wireframing templates
May 09, 2018

Start wireframing with SmartDraw to help visualise your design ideas

Charlie Harrisson 4 minute read

Designing a piece of software or creating a website can be complex. Communicating your design vision can be challenging if people can't visualise it. This is where wireframes come in to play. Wireframes bring clarity to your concept and design process.

Think of them as the building blocks on which you can create all your great content, design features and functionality. 

What is a wireframe?

A wireframe is a basic black and white layout that provides a visual reference of what the UI of a website or app will look like. Wireframes act as a common language between designers, developers and stakeholders.

It visually represents how the elements of your site are meant to work together on a page as well as how users navigate around your website or app.

Screen Shot 2018 04 27 at 10.19.00

A wireframe serves three main purposes:

  1. A rough page layout of the information hierarchy and structure of an app or website
  2. A visual representation of a user interface including interactive elements for teams to review and test
  3. An outline of the functionality and user journey to help determine programming and development needs

Why are wireframes useful?

  • Wireframes visually map out the site architecture and encourage input at the beginning of the building process where changes are more straightforward to implement
  • They improve communication amongst teams by making it easier to provide feedback against a visual concept they all understand
  •  They help to increase the speed of decision-making, by ensuring developers, designers and stakeholders are all on the same page at the same time

Three best practice tips for creating wireframes:

1 - Sketch it out 

Sketch out your wireframe on paper first, it’s a useful way to map out your software app or website and visualise what you want it to look like. This will save you time, from searching through lots of different shapes and symbols within your diagramming app.

2 - Less is more

Avoid over complicating your wireframe with lots of detail when you first start. The early stages in wireframing work best when the focus is on usability and functionality. The initial wireframe is meant to be down-and-dirty or low fidelity to use the technical term.

3 - Iterate and improve

The beauty of low fidelity wireframes is that they can be modified in minutes based on feedback from a cross-functional team. If a header is too big, or a drop-down menu is in the wrong place it can easily be revised at this stage. Wireframes don’t cost much to tweak whereas high fidelity wireframes can run into the thousands of pounds/dollars to change.

Introducing - Adaptavist's new wireframing and user interface (UI) toolset

This is why we've completely rebuilt our wire framing tools with powerful new smart symbols and controls making it simple to iterate and share wireframes in SmartDraw. We've added over 150 symbols and over 50 new wireframing and UI prototype templates to help you build any website or app. Wireframing in SmartDraw makes it’s easy to drag-and-drop symbols and shapes to mock up a user interface.

Smart Controls

The new smart symbols allow you to add wireframes to your Jira issues faster than sketching and translating from a whiteboard.

Screen Shot 2018 04 27 at 10.19.49

There are also handy keyboard shortcuts and right-click menus to make visualising your next software project a breeze. It's now quick-and-easy to visualise requirements for:

  • Forms
  • Navigation and menus
  • Screen Layouts
  • Button bars and link bars
  • Tabbed windows
  • Calendar and map widgets
  • Media player and volume controls
  • iOS and Android apps

Built-in Precision

You can build a quick-and-dirty website wireframe, or you can invest time carefully laying out a pixel-perfect mock-up or UI prototype. SmartDraw lets you do both right inside a Jira issue.

Any element you add to your design will display its dimensions in pixels when selected. You can easily drag to resize the element and view dimension changes in real-time or simply type the desired width or height in pixels right into the dimension display instantly to resize any symbol.

Screen Shot 2018 04 27 at 10.25.26

Screen Shot 2018 04 27 at 10.24.03

Simple Page Flows

Easy-to-use layers and page options take your wireframes into low fidelity prototypes without the need for a second app. Add links from UI elements to new pages and back, while using layers to present design variations. This way developers and designers can get a feel for the design flow without having to write any code.

Getting Started

If you are new to SmartDraw for Jira our guide will help you get started - The basics

If you don't, have a SmartDraw license start your 30 day free trial  today.