Reach Customers Online

20 Steps to Better Wireframes

”

Possibly the biggest mistake in any development project is failure to plan. Recently, the owner of a prospective start-up told me that planning was unnecessary and a good developer could just start coding. This, I promise you, will end in tears.

Wireframing is one of the first steps in your planning process and arguably it’s one of the most important ones. This is when the idea starts to take shape as an application, becoming boxes and buttons that users will interact with. This article will take you through a wireframing process; who should be involved, the tools to use and tips to enable you to make better wireframes.”

From Think Vitamin. I chuckled when I read the first paragraph above. If only it were that easy to develop online applications. Been there, done that. This is a quick but highly useful checklist for developing wireframes, whether you are a business person or an interface designer. I especially recommend #9 (UI is not UX) and #14 (Look for Repetition).

As a writer, I notice that a lot of business processes like wireframes are similar to writing. Repetition, in particular, is both a boon and a curse. With interface design, repetition can help people learn an interface more quickly but it also can make a user’s eyes glaze so they become blind to parts of the interface.

Related Stories

Shades of Grey: Wireframes as Thinking Device

State Based HTML Wireframes with Polypage

Practical Applications: Visio or HTML for Wireframes

10 Useful Web Application Interface Techniques

The Devil’s in the Wireframes

Using Adobe Fireworks to Create Interface Design Prototypes

How to Lead Multidisciplinary Teams, Generate Buy-In, and Create Unified Design Views in Compressed Timeframes

Leveraging XHTML Code as a Design and Specification Platform