Wireframing: Building an elaborate product

Wireframing is a very important stage in app or website development. It helps to provide a high level of usability and considers user experience. What is wireframing and why is it so important? The answers are in this article.

Wireframing is a Skeleton

Wireframing is the process of creating a “skeleton” of the app or website. This “skeleton” is focused on functionality, content of the product, its location on the page, and intended behaviors.

So you won’t find colors, graphics and styling there because they aren’t required at this stage. Wireframing focuses on what a screen does, not what it looks like.

Wireframing is like a Map with a Route

Wireframes serve multiple purposes in which they:

• connect the app’s or site’s information architecture to its visual design by showing paths between pages,
• clarify consistent ways for displaying different types of information on the user interface,
• reflect the required functionality in the interface,
• decide how much space to allocate to a given item and where that item is located.

Wireframing helps you to build a structure and to portray your product. Sharing wireframes minimizes the time it takes to understand the architecture of a project. Wireframing in a team usually develops quickly since iterations can readily integrate new ideas, input, and usability needs.

However, never hesitate to spend more time on wireframing. The time that you will spend on thinking out wireframes can save time and money on later stages.

Wireframes are not interactive. Rather, a wireframe starts becoming interactive as it becomes a prototype.

Check this wireframes created for Spotr app:

Find sketches and final design of this app in an article about iterative design.

Creating Wireframes

One thing you must always remember when creating wireframes: the goal of illustrations is not to depict visual design. Keep everything simple. Design elements are added later, so don’t use colors or images. To indicate where you intend to place an image and its size, you can instead use a rectangular box sized to the dimension with an “x” through it. Use only one generic font.

Within the wireframes, however, you may still resize the font to indicate various headers and changes in the hierarchy of the text information on the page.

Wireframes are Two-Dimensional

Low-fidelity wireframes help to facilitate project team communication and are relatively quick to develop. Usually, they are more abstract because there are often simple images that block off space and implement mock content or Latin (lorem ipsum) text as filler for content and labels.

High-fidelity wireframes have an increased level of detail. They include information about each particular item on the page including dimensions, behavior, and/or actions related to any interactive element.

Some Tools

Wireframes can be pencil drawings or sketches on a whiteboard. Or they can be produced by means of a broad array of free or commercial software applications. Find 5 tools to create wireframes at the full version of the article at 111 minutes Blog!