Digital prototyping saves costs of any marketing communication resulting from a poorly functioning web site and a frustrating user experience. A wireframe, is a visual guide that represents the framework of a website or app, they are used to present the layout of the website’s content, including interface elements and navigation and how they work together.

Wireframes focus on:

• Simplicity and usability (try to simplify the wireframe, cut it on a half)
• Core functionality first, details after
• User behaviour (based on the most important user stories)
• The relative priorities of the information and functionalities
• Different scenarios based on the most important buyer personas that will use the app / web

Wireframes, should lack typographic style, color or graphics that can be a distraction at this stage, they can also invoke subjective responses like I don’t like this button red, or I like that image; that main purpose of the wireframes is determining the best information design for the page and its functionality.

You can start with paper: Wireframes can be pencil drawings or sketches on a whiteboard, or produced by means of a broad array of free or commercial software applications. But for your initial brainstorming sessions, you should stick to paper. Paper doesn’t seem as permanent, and many people will assume you drew the wireframe in 5 minutes and so not hesitate to give you good feedback.

Working with wireframes: this is a collaborative and iterative process since it bridges the user objectives, information architecture, visual design and technicalities involved. Wireframes can be broken up into two categories:

1. Low-level: it’s a rough sketch or a quick mock-up, they have less detail and are quick to produce. These wireframes help a project team collaborate more effectively since they are more abstract, using rectangles and labeling to represent content.
2. High-level: they incorporate a level of detail that more closely matches the design of the actual webpage.

The image above is a representation of the wireframing process and is made for presentation purposes. The final sketch is an old version of North face website.

Wireframes should include:

• Information design: placement and prioritisation of information, the user must understand what the page is communicating.
• Navigation design:provides a set of screen elements that allow the user to move page to page through a website. This is based on user scenarios.
• User interface design: includes selecting and arranging interface elements to enable users to interact with the web /app. The objective is to facilitate usability and efficiency as much as possible. Common elements found in interface design are action buttons, text fields, check boxes, radio buttons and drop down menus.

There is a very good video that I have embedded to explain how to create sketches. The video has been produced and presented by Adaptive Path a great UX company in San Francisco (USA), so let’s see the video.