You are here:About>Computing & Technology>Web Usability> Concept & Structure> How to Create Web Site Wireframes
About.comWeb Usability
Newsletters & RSSEmail to a friendSubmit to Digg
Usability for Types of Sites

IntranetsShopping Carts

How to Create Wireframes for Your Web Site

From Apply Now,
Your Guide to Web Usability.
FREE Newsletter. Sign Up Now!

Software for Creating Wireframes

The main thing you need to get started with your wireframes is the right software. You can always sketch things out on paper or whiteboard, but if you’re going to go into any level of detail, it’s best to create wireframes on a computer. Among other things, it makes it easier to revise your designs and repeat standard elements on your pages.

For software, you have two standard options, though most drawing or diagramming applications such as Adobe Illustrator will work:

Microsoft Visio

Visio is the most commonly used software for creating wireframes. It is part of the Microsoft Office family of products so it is readily available in most offices (though it usually needs to be purchased separately.) It’s available only for Windows, so if you have a Mac, you’ll need to look at other options such as Omnigraffle.

OmniGraffle

Omnigraffle is the most commonly used software for creating wireframes on a Mac. For the purpose, it is just as capable as Visio, and can import/export Visio files to make sharing between platforms simpler.

Adobe Illustrator

If you’re familiar with Adobe Illustrator, it makes a decent option for creating wireframes. Its biggest drawback is that it is made to create single pages rather than multiple page documents.

http://www.adobe.com/products/illustrator/index.html
  1. Software for Creating Wireframes
  2. Gather Your Requirements, Site Structure, and Other Information
  3. Create Your Site Shell
  4. Establish Your Page Structure
  5. Tip: Add in Page Guides
  6. Add Detail to Your Wireframes
  7. Define Interaction Sequences
  8. Annotate Your Wireframes
  9. Tip: Make Your Wireframes Pixel-Accurate
  10. Tip: Create Stencils

Previous | Next >>

 All Topics | Email Article | | |
Advertising Info | News & Events | Work at About | SiteMap | Reprints | HelpOur Story | Be a Guide
User Agreement | Ethics Policy | Patent Info. | Privacy Policy©2008 About, Inc., A part of The New York Times Company. All rights reserved.