Get flash to fully experience Pearltrees
15 Best Wireframing Tools for Designers Building a website can be a time-consuming and expensive business. To ensure that you minimize the number of hours spent and the amount of money wasted on each project, it’s absolutely essential that you plan properly, flushing out content and functionality early, reducing rework. Most people simply use a pen and paper to plan the early stages of their website designs, but is this enough?
Planning and communication are two key elements in the development of any successful website or application. And that is exactly what the wireframing process offers: a quick and simple method to plan the layout and a cost-effective, time-saving tool to easily communicate your ideas to others. A wireframe typically has the basic elements of a Web page: header, footer, sidebar, maybe even some generated content, which gives you, your clients and colleagues a simple visually oriented layout that illustrates what the structure of the website will be by the end of the project and that serves as the foundation for any future alterations. This article focuses on actual wireframing tools and standalone applications, as well as resources that you’ll need to build your own wireframe: wireframing kits, browser windows, form elements, grids, Mac OS X elements, mobile elements , which you’ll use in any typical graphics editor such as Photoshop or Illustrator. …Or you could use pen and paper.
This article was written in 2009 and remains one of our most popular posts.
Have you ever wished your early design mockups could come to life, so you could try out the navigation, test an interaction, or see if a button label just feels right when you click on it? Sure, you could invest in a dedicated prototyping tool, but you can create surprisingly quick and effective prototypes with a software program that’s probably sitting on your hard drive right now. It’s PowerPoint—and no, I am not kidding.
Back in the 1990s, when wireframing was a niche activity, you were pretty much limited to Visio or Illustrator. Nowadays there are a huge number of alternatives. If you want an online app, you can choose from Balsamiq , Just in Mind , Jumpchart , iPlots , iZotz , HotGloo , Connect-A-Sketch , ForeUI , Pidoco , Simulify , Mockup screens , Mocklinr , Wireframe sketcher , Gliffy , Lovely Charts , Project Draw , Creately , Napkee among zillions of others.
An Informal Tool For Early Stage Web Site and UI Design DENIM is a system that helps web site designers in the early stages of design. DENIM supports sketching input, allows design at different refinement levels, and unifies the levels through zooming. [More] Try an exported DENIM HTML site
Serena Prototype Composer helps you quickly and accurately simulate how an application will look and function without writing any code.
by Robin Kavanagh and John Soety Reprinted from Usability Interface , Vol 7, No. 1, July 2000 Traditional paper prototyping is a useful method for testing designs, but it is rather limited. Rapid navigation between screens and pop-ups, for example, is not practical with paper prototyping. In addition, some elements, such as hotspots, are better viewed through an on-line prototype. As we were developing user interfaces for our company's browser-based healthcare information applications, we decided that paper prototyping was both awkward and inadequate for the frequent navigation necessary in the UI.