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.