Design Wireframe Tips

This article touches on a design problem that I've run into a bunch of times. You whip up a mockup to get feedback, and your subject only notices the items that you purposely left undone.

Perhaps we've played with a new layout, and the person reviewing the mockup only sees incorrect text or images.

This specific article delves into this type of miscommunication caused by basic wireframe mockups. These are fast to make, but often difficult to interpret (as the article explains so well).

Here are a list of suggestions that are offered to make wireframe mockups be a bit more realistic without adding to the time required to create them.

• Make a header bar with the company branding. It should look like the site they are used to, showing the company logo.
• Use color. Hyperlink color is a basic requirement.
• Put a web browser frame around the image (or at least the first page).
• Use real form elements, not drawn replicas of them.
• Create a template or library of real form elements (feel free to share yours in the comments below).
• Avoid lorem ipsum. Instead, use: Descriptive text that will explain this product. to avoid confusion about greeked text.
• Use accurately sized fonts (this also keeps you honest about what can fit on the page).
• Use real detail such as products names and data. Especially on transactional tools with expert users, users care about what they are reading and recognize and use data like account numbers. It may not be important to us, but they have expectations that need to be met.

This isn't the first time Boxes and Arrows has come through with a useful article on the design process, they did it previously on an article relating to mockups and stories.