Wireframes are a crucial tool in the early stages of any project – the clarity they provide to your conceptualisation, refinement and features is unparalleled. They can come in all shapes and sizes (depending on your type of app) as well as a varying level of detail included in them.
One of the main benefits of wireframing is that they allow for clarification of terms that are thrown around in the early stage. When someone says “Google Map” or “pop-up”, etc you can actually visualise how that feature should be developed and used – it’s no longer left to be ambiguous.
As a visual tool, they approach the design of your app from a graphic and user-centred approach rather than a technical perspective that developers may focus on. The user experience should be first and foremost when designing wireframes – after all, who wants to continue using a difficult and clumsy app?
They are a useful tool in the design process as they allow decisions to be quickly evaluated for the usability and flow of processes as well as for the look and feel prior to development. They are also a quick way to iterate through features and thought processes.
Wireframes can be thought of as providing the “blueprint” for software developers on what the app should do and helps them identify what needs to be prototyped and what to experiment with at the early stages to help reduce risk and unknowns when moving into development.
There are many ways your designers can create wireframes. Each level requires more effort but also provides more detail and clarity to the design. Some things that go hand-in-hand with the extra detail at each level are the decisions and items that clients will fixate on. Its best to move through each level sequentially otherwise they may be focusing on the font-type or colours rather than the structure or elements at the early stages.
The wireframing process should follow a bottom-up approach and start with the least amount of detail to allow structural elements to be decided and then provide more detail as decisions are made and the direction of the app becomes more clear.
The 5 different wireframeA wireframe is a rough sketch or mock-up of what a screen for an application would look like. It does... approaches that we follow are:
- Hand-Drawn
- Lo-Fi
- Hi-Fi
- Clickable Prototypes
- Interactive Prototypes & Simulations
Hand-Drawn
This is the simplest method of creating wireframes and getting your idea down. All you need is some paper and a Pen or Pencil and start sketching out your ideas for screens. It’s rough, it’s crude, but it puts your ideas down on paper and starts to solidify your ideas and concepts. Just through this simple process you might even revise and refine certain aspects as once you can actually see it you might start getting new ideas or figure out how to improve it.
An easy way to step up the quality from a rough sketch on pen and paper is download and print out some phone or screen templates and use those with a ruler to draw your designs in a frame that looks like where it will end up.
Tools
Obviously, hand-drawing a wireframeA wireframe is a rough sketch or mock-up of what a screen for an application would look like. It does... requires only a pencil and paper (or whiteboard and markers) and your imagination, however, there are some tools that can help frame your wireframes better
For example, here are some printable templates that you can download for free:
- https://sketchize.com/
- https://sneakpeekit.com/
- https://sketchsheets.com
- http://www.raincreativelab.com/paperbrowser/
There are also products specifically designed for helping you with hand-drawn wireframes that you can purchase online. For example, the website UI Stencils provides a range of stencils with common UI elements from iOSiOS is the operating system Apple has developed for its mobile and tablet devices (iPhones and iPads). iOS is the..., Android and Web applications. They also provide a range of sketch pads and sticky notes with phone and web browser borders to get you in the right frame of mind for sketching UIs.
There are also tools like Marvel’s POP app which help you bridge the gap between paper prototypes and further stages of wireframing by digitizing your paper sketches and allowing you to string them together in the form of a clickable prototype, as talked about later in this article.
Lo-Fi
Lo-Fi wireframes are a large step up from hand-drawn, even though you can use a visual style that looks like it’s sketched. This is where you begin using a software tool to start visualising your designs. Moving to this process allows for editing and grouping and be able to arrange your screens. Some platforms provide component packs that allow you to easily add a button or a popup to a screen to get your point across easier. There’s no point in creating everything yourself when you can leverage the components available.
These are a great starting point for developers – who aren’t designers – to get a point and idea across and provide a general feel and direction for the application’s functionality.
Tools
There are many tools for creating lo-fi wireframes, ranging all the way from drawing something from scratch in Microsoft Paint, all the way through to tools designed to create clickable wireframes with large libraries of (lo-fi) pre-made UI components.
One great tool we’ve used is Draw.io. It can easily integrate into Google Drive or Microsoft OneDrive, and is great for making flowcharts, process diagrams and a whole bunch more. It also has a library of components and shapes to quickly and easily get started making lo-fi wireframes for iOSiOS is the operating system Apple has developed for its mobile and tablet devices (iPhones and iPads). iOS is the... & Android, or mockup components for any kind of wireframeA wireframe is a rough sketch or mock-up of what a screen for an application would look like. It does... you want to create.
We’ve also used some other great wireframing-specific tools like Proto.io and Balsamiq that make wireframing easy and can easily progress from lo-fi wireframing onto more well-defined hi-fi wireframes through to clickable prototypes.
Hi-Fi
Hi-Fi wireframes are a term we use to describe UI wireframes that are completely designed, include your branding, and are pretty close to the final versions of your screens. They are handed over to the developer prior to implementation and are the plan for how the UI should look and feel.
This is the point where the customers start to feel like they own the designs. Once their branding and logo are used, it begins to feel like their app. It can take quite a while to get to this point as a lot more things have to be considered to add enough detail e.g.
- transitions
- animations
- hover colours
- hover interactions
- font-sizes
- font-types etc.
Tools
Sometimes when you get to the hi-fi wireframing stage, you will have engaged a graphic design agency, and they may provide wireframes and designs in whichever tool they use for designing. These tools are usually used for their flexibility and power when it comes to graphical design.
Adobe’s ubiquitous Photoshop is a common tool for making high-quality designs and often used to make hi-fi wireframes. It’s complex to try and make storyboards, and exact positioning can be tricky, but it’s a tool a lot of designers know and love. Photoshop is a powerful tool for any high fidelity design work.
A great tool for hi-fi wireframing is Sketch which allows the creation of reusable components and allows you to divide up your wireframes into pages and artboards. It also has the ability to make clickable prototypes (see below) and has advanced options for layouts, effects, vector editing and more. It’s a preferred tool for many designers. Also, take a look at Figma for a web-based tool that provides similar functionality
Clickable Prototypes
The next step from Hi-Fi wireframes would be to produce clickable prototypes. This can be done for Lo-Fi as well but it seems to have more impact when you begin clicking through wireframes that look like the final polished app. The clickable prototypes allow users, designers and developers to understand how the app will flow between screens, which buttons do what, etc. It’s a great way to get further insights and opinions from users as they can step-through the app without you having to invest a large amount of time and resources in creating a functioning prototype to do the same thing.
Tools
Adobe XD is a powerful, collaborative platform for creating designs and clickable prototypes. It’s designed to help create everything from basic wireframes up to beautiful designs including re-usable components and design systems. Beyond simple clicking, XD also supports triggers such as time-based events and keyboard input, through to voice commands and game controllers. Designs and prototypes can be shared online for review and collaboration, as well as Design Specs for developers to work from.
We’re also big fans of Figma, which has a lot of the same features as XD, with a greater emphasis on collaboration. It works online through a website or desktop app and allows real-time collaboration – showing the cursors of other users as they work. It’s quick and easy to create clickable prototypes to link together different screens, dynamic overlays and more. Previews you share for review update in real-time as you make edits, so everything’s always up-to-date (and you can utilize versioning so as not to lose previous work).
Interactive Prototypes & Simulations
The last possible step prior to the development of your complete app would be to develop a prototype app. This means you can follow the same process for your clickable prototype but extend it into an actual application that is the basis for your app.
This involves the development of all your UI’s as an actual mobile appA Mobile App/ Application is a program that you download from Google Play or The App Store. You then install..., website or front-endWhen talking about software, generally, the term frontend refers to any interface that allows a user to interact with a.... This is actual development and the process shifts from designer to the developer. However, everything that is made at this stage can be used moving forward. Anything that is developed for the prototype can and should be leveraged when you proceed with final development.
Some developers might do a “quick and nasty” build to get this step done but they should really proceed as if they were starting the proper development so that the time and effort is not wasted and needed to be done again.
As these prototypes are coded into actual apps, you also have the ability to extend the prototype into a simulation – based on data – which can show users how things will look over time.
As an example, imagine you have a real-time dashboard in your app. The basic prototype will show static data on that page. A simulation will load in a data set and feed it into the dashboard to show the dashboard changing over time, based on the data it is provided with. When following this method you also have the option of changing the speed of the data retrieval and, for example, showing a whole day’s worth of data in one minute.
There’s No One-Size-Fits-All solution
We’ve presented a rough guide on the different wireframing and prototyping approaches we use, but this doesn’t mean you have to follow the process through all of these stages for every project you develop. Sometimes if you’re building a small feature onto an existing system with a polished design, Lo-Fi wireframes are all you need to get to development. Other times, you may end up building an interactive prototype or simulation before the graphic design is finalized to prove that the concept will work before pouring resources into the design.
Nor is this an exhaustive guide to every approach to visually designing an application or system. Flow charts, process diagrams and site maps can also be useful. In their Shape Up book, Basecamp presents the idea of “breadboarding” – an approach for defining the elements required for a process or a feature to work, without getting into design decisions like layout that factor even into basic hand-drawn wireframes. This can also be a useful tool to provide clarity to a project that could be expanded into Lo-Fi or Hi-Fi wireframes when the time comes.
The key here is to introduce clarity about what it is you are trying to develop. It pays to start with rough sketches and concepts in order to clarify the needs and functionality of the idea. From here you can progress into clarifying UX decisions – about how the end-users will be using this functionality. Finer details about font size and colours also need to be clarified, but these can be established much later in the process.
The clearer you are at each step of the process, the fewer decisions need to be made as you get into development – and the better the result becomes.
