My career/passion is mobile wireframing. What’s wireframing? Wireframing is the process of creating a wireframe. Alright, what’s a wireframe, a-hole? A wireframe is a mockup of the structure and behavior of a product that does not imply final colors or visuals. Imagine all of your favorite websites reduced down to shades of gray and without any images. Sounds pretty boring, eh? Seeing these sites reduced to their core state actually explains a LOT about usability and functionality. Pretty much any site that has more than 1K users probably start with a wireframe.
I found a new site that shows informative examples of wireframes accurately named “I ♥ wireframes”. Looking through the latest 25 or so posts, I’m seeing a few trends. First, some people spend _WAY_ too much time on a drawn wireframe. If you need to make changes, there is no point in using high fidelity on an uneditable medium. Lastly, there are always better ideas out there. I’ve discovered a few annotation ideas I’ll definitely be using for my next major project.
On to the point of this post, displaying what I consider to be good and bad/nutso wireframes. If it’s listed on “I ♥ wireframes”, there aren’t going to be any poorly-created ones so I’ll just point out the OCD ones.
- http://www.flickr.com/photos/pberroeta/3812359997/ I just like the glass surface they are using!
- http://www.flickr.com/photos/madebyguerrilla/4301936387/ Just the right amount of fidelity to get a feel for what the page would look like. This is just about the most detail I would add to a drawn wireframe before I’d move over to something digital (usually Visio or Photoshop).
- http://www.flickr.com/photos/10ch/4323450776/ Fun drawings can bring some life to your wireframes.
- http://www.flickr.com/photos/justincline/4175648018/ Paper wireframing is extremely calming. I love the template they are using with generous area for comments and annotations.
- http://www.flickr.com/photos/soxiam/4188435253/ The visual design is again peeking through a little bit, but the cleanness of the frame with the bright callouts is how it’s done.
- http://www.flickr.com/photos/e-maujean/4188236252/ Yeah, I’m stealing that frame with a callout number style.
- http://www.flickr.com/photos/32776947@N02/3218884044/ This one is tough to put in the “Good” list. The paper wireframing is strong, I just don’t like the content.
- http://www.flickr.com/photos/dzovan/4252559050/ the use of marker almost makes it look like watercolor. Beautiful.
- http://www.flickr.com/photos/20917653@N02/4330529068/ This look clean, but it’s almost too well-designed. The visual language is starting to poke out; you could add a few images and this would be ready to launch. OCD.
- http://www.flickr.com/photos/jumpmedia/4276833224/ This would be considered a fairly low-res wireframe in my book. Everything is laid out, sure, but this should have another page full of annotations. Also, the images should explain the desired dimensions and allowable dimensions.
- http://wireframes.linowski.ca/wp-content/themes/darwin/images/full49.jpg Colored pages imply too much.