Wireframing is an important process for turning ideas and concepts into visual representations for better clarity and understanding. This blog covers quick tips about wireframes and how to use them as a part of your next design and development project.

Creating wireframes for an applications user interface enables design engineers to make key decisions about:

• Functionality - What functionality the application will offer.

• Layout - How the user interface will be logically laid out.

• Workflows - How users move through the application to accomplish specific tasks.

Elements of a Wireframe

A wireframe consists of a number of very simple design elements that can be used to articulate the functionality, layout and workflows of an application.

• Grid System - Use a grid system to focus on precise layouts.

• Color - Start with a neutral color palette.

• Fonts - Select a simple basic font.

• Icons - Use a simple icon set.

• Boxes - Create simple boxes to indicate different parts of the layout.

• Dividers - Emphasize separation between different components with dividers.

Wireframes in Action

Wireframes are best if they create a robust discussion about layout and features. Remember, when you are presenting to a team, you are trying to find out if there is anything left out of your concept before you invest in more expensive design and development. At that point, changes will be harder to make.

In our experience, combining wireframes into larger storyboards and annotations really help to bring clarity and structure to these collaborative conversations.

Wireframe Mistakes

Its easy to lose focus of the main goals of a wireframe and instead begin to focus on stylistic concerns.  Here is a quick list of things to avoid in wireframes:

• Images and Graphics (placeholders are good, but the actual images are not)

• Logos (again placeholders are ok)

• Complex colors and accent colors

• Multiple fonts

• Textures, and Gradients (stick with solid colors)

• Box Shadow, Text Shadow and other effects

Hope this helps the next time you are trying to flesh out a new project with wireframes!