Wireframing & Prototyping Techniques

In Usability by Mark Cox

When designing a new website or application you need to show off your concept to different people to gain their insight. These stakeholders are often end users, investors, media, designers and developers who build the technology.

When trying to describe a design to someone, words are useful however they can be miscommunicated and limit people’s ability to imagine how your product will look. The best way to share your idea is to create a wireframe, which people can see however the optimal solution is to build prototypes and wireframes.

The concept you build may be very different to the final build however wireframing and prototyping are excellent ways to capture the initial idea and get ideas for future builds.

The difference between wireframing and prototyping is that wireframes are simply a page layout, created to show how the site will be laid out, whereas prototypes are an interactive product people can use to click through a website or application.

When your customers see the interactive prototypes you have built, you will be able to tell what you’ll naturally want to build into the product.


Wireframes are divided into lo-fi and hi-fi. Lo-fi wireframes are basic and only feature the most important elements. The project is examined from a global perspective and focuses on crucial factors. This simplified wireframe is best used in the preliminary stages of design and can be drawn using pen and paper.

Hi-fi wireframes look like the final product and are most used later on in the phase of design. Focus is on the details of all user elements, rather than a general layout of the page, these wireframes can no longer be created by pen and paper and software is required.

What are some common mistakes of the mock-ups

1. Don’t start too detailed – Beautifully drawn wireframes are not important at the start. It may be tempting to create a gorgeous design however this will end up slowing you down and takes away from the basic interaction of the site.

2. Stick to the plan – An effective way to stick to a plan is to make preliminary sketches so that you can see a design coming through correctly.

3. Focusing in on the design – If you start to design focussing on size, colour and background then it is too late to design the navigation. Elements in the wireframe are not discussed.

4. Using advance tools for lo-fi wireframes – Programs like Photoshop focus too much on the aesthetics of a prototype and will look better than we needed in lo-fi wireframes.

5. A good prototype is not a finished product – Do not combine a prototype with the final product, they require two different processes to reach their final stage and using the prototype could damage the product.

6. Neglecting clients’ knowledge – Clients should always know the purpose of prototypes, which are shown to them. Explain to them how you got there and what elements are missing. Ask for feedback and what they think is missing.

What to use

In the past decade there has been an explosion of inexpensive web tools, widespread conversion from waterfall to agile/lean software development. Tools, which were once previously exclusive to designers and product managers, are now accessible to creators without tech backgrounds.

Wireframes can be created with Photoshop, Illustrator or any other design program. At Channel Dynamics we use Sketch as it integrates with our prototyping software, InVision. InVision is the most professional prototyping software allowing you to select areas to swap between screens, appearing as if it is a finished app.

Channel Dynamics Training

We are running a wireframing course to provide more in-depth knowledge about the wireframing process. Delegates will learn how and when to use Wireframing, how to test your designs and the techniques required to use wireframing and prototyping tools.

Get in touch