Good wireframing tools can save time and make sure everyone’s ideas are incorporated in the final product. There are a plethora of tools available, however a core set of tools seems to be used by most designers. They help save time on software development and web development projects, and result in thought-out and well-designed systems.
Photoshop
Whether working on an upgrade to existing software or creating a new system, a good mockup is always necessary if design changes are part of the project. Photoshop lets you mangle pixels and design a comp of exactly how the final product will look, while leaving it easy to make changes before the website or software is coded. Designers can get creative and add compelling style elements, while clients can give their feedback and make sure the design satisfies their requirements.
One of the most compelling features of Photoshop for wireframing is the variety of template and icon packages available. The templates help give mobile app prototypes a polished look, and enable the client able to see exactly how the app will look within a tablet or phone. The bounty of online icon packages and stock illustrations add a polished look to any project, and can give a project a unique style and feel without requiring weeks of custom work.
Microsoft Visio
Visio is the go-to tool for producing high-quality, professional charts and flow/logic diagrams. Visio is also excellent for software user-interface mockups, offering a range of pre-built icons and flexibility in vector illustrations. Visio is also an excellent design bridge between Balsamiq and Photoshop, and for software projects without the need for stylized design, can serve as the final mockup for client approval.
Balsamiq Mockups
Balsamiq is currently one of the most popular wireframing tools. It was built to supplant the whiteboard, allowing users to create “sketched” diagrams of software functionality. Balsamiq’s biggest benefit is its roughness and sketchy mockup quality, allowing the team to focus on functionality instead of design. Balsamiq is great for mobile apps, software projects, or web applications with a high level of user interactivity.
Axure
Axure is an excellent tool for website layout wireframes. The mockups aren’t sketched like Balsamiq, and instead offer a more precise grid layout. Since the design elements in Axure are more limited than Balsamiq, it’s mainly used as an early-stage brainstorming tool for general website layout. It’s useful to combine Axure mockups with a website style guide to discuss conceptual style elements before designing the final mockup.
Pencil + Paper
Of course, any list would be remiss without pencil and paper. Good ideas start here before they transfer to the digital space. Depending on the designer, there is often a mental barrier to experimenting on the PC, and pencil sketches can offer a place to get creative and try outlandish ideas. Sketching on paper can be a fun way to rapidly try different layouts before committing to a design using a digital prototyping tool.
Whether creating a pixel-perfect comp or just throwing around ideas during concept development, wireframing tools are an essential part of the design process. Whatever your workflow, a good concept development process will yield a higher-quality final product.
Written by Andrew Palczewski
About the Author
Andrew Palczewski is CEO of apHarmony, a Chicago software development company. He holds a Master's degree in Computer Engineering from the University of Illinois at Urbana-Champaign and has over ten years' experience in managing development of software projects.
Google+
This article touches a topic which has a nature of an iceberg. In our software development practice in Chicago, we often have to decide on Agile versus Waterfall. Each one of those development methods require a specific set of tools. An Agile Development is based on prototyping and assumes that requirements and specs can change during development. A napkin could be used as a wireframing tool. In waterfall approach however, since making changes involves additional charges from developers, a very specific wireframes have to be agreed upon by all sides. New article suggestion: Agile vs Waterfall – pros, cons, methods, tools, …