A typeface built to simulate placeholder text in wireframes.
An interesting new prototyping application. HT @toddsieling
While I've made my opinions of sketchy wireframes very clear, I have to say that Sqetch provides a gorgeous bridge between hand-drawn wireframes and their computer-created counterparts.
The components have a high visual fidelity, while conveying the incompleteness that many designers seek when they use "sketchy" wireframing tools and templates.
The toolkit provides all of the expected GUI elements that most designers would need, including those for the iPad and smart phones.
"The interactive sketching notation is an emerging visual language which affords the representation of interface states and event-based user actions. Through a few simple and standardized rules, what the user sees (drawn in greys and blacks) and does (drawn in red) are unified into a coherent sketching system. This unification of both interface and use, intends to enable designers to tell more powerful stories of interaction."
I've been waiting for this functionality for a very long time and I truly hope the folks at Omni include this as a feature in an upcoming release. Until then, we can thank the fine people at UNITiD for this AppleScript.
A handy little script that will walk through a site's sitemap.xml and map it out in OmniGraffle.
A large set of resources for those who use Illustrator for wireframes. It includes 290 free vectors icons and 200 graphic styles, all free to use. This looks very useful indeed.
Sketchy-style wireframes, have wiggled their way into user experience documents the world over. With awesome tools like Balsamiq Mockups and a range of stencil sets to choose from, like as not, when an artifact describing the layout, features and workflows of a site is sent around the office or to a client, it’ll have squiggly lines.
Caveat: This post is about the sketchy style used in wireframes, not sketching in general. Sketching is an important part of the wireframing, workflow and design processes. Many a brilliant idea started life on the back of a napkin.
The reason most so often cited for the use of a sketchy style is that the squiggles convey that the document is still a work in progress. A secondary reason often follows with a claim that the sketch look obviously isn’t the site’s final design.
But sketchy style wireframes inevitably convey the opposite of what is intended, and worse, they come with additional negative implications overlooked by the proponents of the squiggle. In truth, sketchy wireframes imply that you don’t think your client is smart enough to separate crisp lines from a final design.
Simply put, the sketchy style is unprofessional. Yeah, I said it.
Would You Accept a Contract in Comic Sans?
I wouldn’t and I’m willing to bet that you would question any professional who provided you a legal document reminiscent of Garfield and Family Circle.
Wireframes aren’t supposed to be zany – they are supposed to be informative.
While our industry is young, and the tool set, younger still, we have many examples from which to learn. Architects and engineers are expected to deliver crisp lines and readable notes when they produce plans for a new home or skyscraper. The same holds true for engineers of all stripes.
Documents of any importance need to reinforce your experience, your expertise and the decisions you made as you produced them. The sketchy style does quite the opposite.
Sketchy Wireframes Imply a Lack of Importance and Conviction
Just as the final design for the site will convey a certain mood, the visual presentation of the wireframes should reinforce their importance to the success of the project. When you use a sketchy style your documents encourage the client to “fix” them.
Sketchy Wireframes Imply that Your Client Can’t Mentally Separate the Structure of a Site from its Design
While you may think this the case, you are either underestimating your clients, which is condescending or you should search for new ones, as clients who can’t understand the concept of a blueprint will likely struggle in their own endeavors. People are smart, and while you may have to explain the concept of a wireframe to a new client, the concept is easily understood.
Sketchy Wireframes Impede Comprehension
The goal of the document is to demonstrate the hierarchy of information and features and the relationships between those pieces. Wireframes are the blueprints for key business and design decisions. Adding visual clutter in the form of wavy lines, odd angles and handwriting fonts distracts from this singular purpose.
So, for the love of UX, save the sketchy look for the design phase where it belongs. Give your clients what they deserve – professional documents that aid their decisions and reinforce their selection of you for their important projects.
What Do You Think?
Am I wrong? Am I missing a key point? Do you agree with all your heart?
Leave a comment and let me know.