Now that you’ve got a basic framework for your wireframes, you’re ready to dive in! You should have a fat stack of paper wireframes to work from, so the hard thinking should be done already.
This is the part of the process where you can relax a bit and switch your brain to “zen-like robot mode”. You don’t need to worry about making them beautiful; this is a rare moment when you can just use Helvetica and call it a day. Savor it.
Disclaimer: This is my current wireframing process for desktop-only sites. We, and everybody else, are still figuring the best scalable approach for responsive wireframing, although I believe that OmniGraffle can easily serve that purpose as well.
Where to start?
I like to start with one of the pages that includes a lot of “site DNA”. These are pages that include elements that will be repeated on other pages (and will therefore be easy to copy/paste!). A key landing page is often a good starting point, since it’ll include at least your header, footer, some graphics and basic text styles.
Keep it simple
It’s easy to want to jump right into designing these pages, but take a deep breath and count to ten! Your wireframes should be ugly. They shouldn’t look like the final site. They exist to help you figure out site/page hierarchy and to identify usability challenges in your structure.
For your typography, stick to Helvetica (or a similarly neutral typeface) and only use a few sizes. Instead of images, use a gray box with an X inside (the "bread and butter" of any wireframe).
It’s okay to approximate a multi-column layout without using an explicit grid. OmniGraffle has great built-in alignment and spacing functionality so your page objects will snap right into place when they’re evenly spaced apart.
Minimize your color palette
Some clients have trouble digesting wireframes, but a minimal (or absent) color palette helps to bring focus to the things that matter. Stick to black and white for your text, and choose just a few shades of gray for supporting page elements. I like to toggle to the grayscale color palette and plug in percentages to keep it easy.
The only exceptions are blue and maybe red, where I use color to communicate functionality. Use that lovely default blue color for your links so when somebody looks at the wireframe they know immediately which page elements are links. Red is appropriate for things like error messages or delete/cancel buttons so that they stand out.
Making symbols
If you have an element that repeats on a lot of pages, like your header, footer, or a sidebar, you should turn it into a symbol so you only need to edit one instance to make changes! OmniGraffle is a bit wonky with this, but the folks at Viget have written up a great article on how to make it happen. You’ll still need to copy/paste the element onto each page but this will save you big headaches when you need to reorder or change the names of your navigation items!
Get stencilized
This could easily be its own post, but stencils are one of the most important features in OmniGraffle and will save you a TON of time. Stencils are graphics (usually vector-based, so they scale nicely) that you can drag-and-drop into your document. These are incredibly useful for common UI elements like form fields, dropdown selectors, or buttons. There are stencils for tabs or calendar widgets or social media icons (or pretty much anything you might need).
Graffletopia is the best resource for stencils that I’ve found. These are my most commonly-used stencil sets:
- Konigi Wireframe Stencils
- Zurb Foundation Stencils
- Twitter Bootstrap
- Drupal 7 Components
- Drupal 7 E-commerce
- Drupal 7 Search
There are oodles of stencil packs for mobile and tablet mockups, making it easier to work on responsive projects, too. Here’s a selection of some of the higher-quality ones, although some of these are too high-fidelity for basic wireframes:
You can install stencils by searching within OmniGraffle's Stencil palette or by manually downloading and placing the files in the appropriate directory. Here’s more information about installing stencils.
Get real!
Depending on the project, you might not have approved copy until after your wireframes are complete. However, use whatever you do have, even if it’s rough. There’s nothing wrong with a little Lipsum, but try to include copy that is a representative length for your content. For something like a blog title, try including a one-line and two-line variation to start thinking about where your site structure needs to be flexible.
These tips should allow you to quickly put together a wireframe that you can refine as you get feedback. Don’t forget to print out your wireframes periodically and share them with others to be sure that they make sense.
We currently have a huge wall of wireframes in our office as we’re working through a redesign of our own website. Having them visible has made it possible for everyone in the office to provide feedback easily and quickly.
How do you leverage stencils and other tools in OmniGraffle? Share your thoughts in the comments!
If you haven’t already done so, be sure to read Part 1 of my OmniGraffle blog series and download our Chapter Three Wireframing Template to help you get started!
In Part 3, I’ll discuss the current solutions for responsive wireframing in OmniGraffle and talk about how we transition from OmniGraffle wireframes to Fireworks comps easily. Stay tuned!
