Wireframing: Make it Real

| No Comments | No TrackBacks

Interesting article by Stephen Turbek over at Boxes and Arrows with 8 tips on making it real. The gist of it being wireframes are not meant for external audiences. Which makes sense in that the client will have difficulty relating to the spare (sparse?) wireframe document when it comes time for review. Rather, present the client with a wireframe that makes sense to them, a pseudo prototype with their branding, colours and elements so they can focus on how things work rather than the presentation.
Here is Stephen's 8 tips on making it real:


  1. Make a header bar with the company branding. It should look like the site they are used to, showing the company logo.

  2. Use color. Hyperlink color is a basic requirement.

  3. Put a web browser frame around the image (or at least the first page).

  4. Use real form elements, not drawn replicas of them.

  5. Create a template or library of real form elements (feel free to share yours in the comments below).

  6. Avoid lorem ipsum. Instead, use: “Descriptive text that will explain this product.” to avoid confusion about greeked text.

  7. Use accurately sized fonts (this also keeps you honest about what can fit on the page).

  8. 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.

No TrackBacks

TrackBack URL: http://www.elektrikink.org/mt/mt-tb.cgi/178

Leave a comment

Archives

www.flickr.com


Visit my flickr photostream.