Free Wireframe Tools to Help Plan Your Web Site
When designing your Web site, one of the best tools with which to plan the pages and functions you need is a wireframe. Though typically used by designers, these stripped-down, preliminary mockups show the items to be included on each page of your site, as well as notes on how things will work. With a bevy of free online tools that’ll give you the prefab elements you need -- navigation bars, text boxes, buttons, image placeholders, and more -- you don’t need any special skills to quickly put together a simple site mockup. With it, you can better visualize where you’re going and communicate clearly with your Web designer.
This completely free online tool lets you create Web site wireframes for multiple projects and will really give you a feel for your finished site, from highlighting tabs and menu items to letting you link between pages so you can create an interactive experience. The drag-and-drop interface is simple and it includes a large range of common page elements. When you’re done, you can share your mockups via link or embed code, and you can save them as a multipage PDF, too.
Collaborate in real time on your projects with this wireframing app that has support for your own image uploads and adding colors, shadows, and other design elements that will give your wireframe a more branded feel. You can export as a PNG, share a URL, or embed your document for those not logged in to Cacoo, and you can chat onscreen with other users you’re collaborating with. Right now the app is completely free, though there should be a premium, paid-for version coming soon.
This free Firefox add-on is still in its early stages, but it already has an intuitive interface and a small library of shapes and user interface elements for you to start creating mockups with. Your designs render quickly and you work on your projects in tabs. You can also export to a special Pencil file type, .ep or .epz, and you can add in your own custom art.
Though you’ll need to pay for the full version, you can use iPlotz for free on one project with up to five pages, which should be enough to get your site started. The app has a long list of page items that you can include, as well as many commonly used “snippets,” like page headers and login forms, which can make planning go even faster. You can also easily add notes to your project and save via a link, embed, or printable file.
Though Balsamiq’s free online demo isn’t very well-publicized on its site, just click “Try It Now” on the home page to open a new project. You’ll be able to use its extensive library of buttons, containers, and other page elements, and you’ll even get access to iPhone-specific elements so you can plan out an app or mobile site. You’ll only be able to save one page at a time, but in addition to PNGs and PDFs, you can save your pages as XML files, which you can import back into Balsamiq to work on again later. You can pay for and download a desktop version, and a fully featured online app is currently in private beta.
Yahoo Design Stencil Kit
If you’re most comfortable using a program you already know on your PC, like Acrobat Pro, Visio, or Photoshop, you can download a Design Stencil Kit to help you just copy and paste common interface elements into your layout. Though you’ll have to format and share your files yourself, you’ll still save time and won’t need any advanced program knowledge or design skill to cobble something together.
