Wireframes and sketches are the intermediary between a conceptual plan, and the actual, detailed prototypes and specifications needed to build a project.
Use quick, coarsely-drawn sketches to plan and discuss your next project. Create several views (e.g., a home view, and interior/secondary views) to flesh out the overall design of your site or app. The sketch embodies how it will work, and what the overall user experience will be.
Be fast and sloppy — Create the wireframes or sketches on paper, the back of a napkin, or on the computer. Use any tool you are good at: A pencil, PowerPoint, Photoshop, etc. Specialized “wireframing” software may be useful, but are not necessary. There are many styles (see below).
(c) reducing the chance of having to re-work the project later.
A concrete deliverable from a meeting — If you are having a meeting, consider having a designer (or visually-oriented person) work throughout the meeting to churn out a new wireframe every 5-10 minutes. Thus, the output of your meeting will be a concrete combination of a short written plan, plus some simple sketches — the two key ingredients you need to launch your project.
Sketchy sketches — Working quickly tends to lends a sketch-like appearance. Here’s some examples, of varying degrees of artistry. These were created by designers, but you can make a rougher version yourself.
Paper mockups — Print out web sites, and bits of text from a word processor, cut them with scissors, and stick them on a board with tape. Use sticky notes and markets. Since mobile apps need to be operated by fingertips, it’s useful to make them real-size to test your ideas.
You can mix and match styles. Also, it’s useful to cut up screenshots from existing sites. For example, if you are planning a new blog network, look at ten existing blog networks and news sites, and copy pieces you like from each place, and stitch them together with some simple boxes and lines.
It’s just a sketch — Just like a charcoal sketch can be the precursor to many styles of art (realistic, impressionistic, etc.), the purpose of your wireframes is to guide the overall functionality and appearance. At a later step in the process, a designer will methodically refine the layout and flesh out the right feel and design. Often the final prototypes will evolve, but the wireframe will have embodied the core functionality you need. Below is van Gogh’s sketch and painting of his bedroom in Arles.
Only in the beginning — Wireframes and sketches are great for brainstorming and are vital in the early stages of planning. They help realize what needs to go into a project, and how it will work. But once the overall plan is in shape, it’s time to graduate. The sketches that helped launch and plan your project will now be a hinderance. Simple sketches obscure the user experience, and most people have trouble giving meaningful feedback to overly-abstract sketches.
So once your overall plan and sketches are done, have a designer flesh out visually-pleasing prototypes — with real sample text, real images, and a real design.