Thursday, September 21, 2006

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.

1 comment:

  1. Anonymous1:31 AM

    There were three guys, wow gold a Torontonian, 2moons power leveling an American world of warcraft power leveling and a Newfoundlander.archlord power leveling They were all going to be executed.wotlk gold The executioner Warhammer Power Leveling said that since all three flyff power leveling were to be executed that night, world of warcraft power leveling that they would each get to choose the flyff money method 2moons power leveling by which they would dieAtlantica power leveling Their choices were: world of warcraft power leveling lethal injection, electric chair Knight Gold or by hanging. 2moon dilThe American was afraid of Aion Power Leveling needles and did'nt power leveling want to be archlord gold The American 2moons dil chose the electric chair. He sat in the chair archlord power leveling and they pulled the flyff gold switch and nothing happened.