Advertisement

Once upon a time, and sometimes still referred to as a blueprint, or a skeleton outline, a wireframe is a low-fi version of a conceptual website design. Normally, it is a visual representation of a basic website layout structure and navigation system. This allows the designer to easily change major site components and collaborate with their team members and clients to build a solid layout before going into the actual design process. This allows the designer to rapidly revise the user interface design elements of a website and specify interactive features, evaluate overall effectiveness of the layout, and determine web development requirements.

Here are 5 of my favorite Wireframing tools to help you on your next project:

Balsamiq Mockups

Wireframing1.png

Balsamiq
Mockups has become one of the most popular wireframing tools on the web. A few of the features that make this app so strong include Low-Fi Sketch-like Wireframes, 75 built-in user interface components and 187 icons, Quick Add Keyboard and a Drag and Drop Interface. The web app myBalsamiq offers collaborative features and has many ways to interact within your team and with external clients. The Single User License starts at $79 and you can also get the Desktop app for it.

UXPin

Wireframing.png

UXPin is a series of multifaceted tools for UX designers. They are popular for their Paper prototyping notepads with user interface sticky notes and also now for their online wireframing tool that is even able to recognize paper. You can literally put your design ideas from paper into the App and continue your work. The app includes a Drag&Drop library of UI elements for Web, iOS, Android, and more.

Online access to wireframes and prototypes, no need to log-in if you want to do a review, no need to learn any complex system. Invite your team to a project and start working with them on the same design at the same time. There’s even a real-time chat feature.

Cacoo

Wireframing4.png

Cacoo is a user-friendly online drawing tool that allows you to create a variety of diagrams such as site maps, wireframes, UML and network charts. Cacoo can be used free of charge. Creating attractive diagrams, such as wireframes, mind maps, network charts, and site maps, are very easy for anyone as you can simply pick and “drag and drop” elements from a large library of stencils. With Real-Time Collaboration multiple users can share and edit one diagram simultaneously. Changes are shown on the sharers screen in real time. Collaboration will be more creative and productive as team members can plan and review cooperatively.

Mockingbird

Wireframing3.png

Mockingbird was founded by two Harvard graduates and aims to make wireframing frictionless, freeing you to try new ideas and iterate rapidly before settling on a design that works. Decide what to build before sinking resources into it. Mockingbird makes planning fast and effective and keeps your project on track. Communicate with and present to your clients using clear mockups.

Graph Paper

Wireframing2.png

Just like I mentioned in the Grid System Tools for Graphic Designers article, a piece of Graph Paper can be an invaluable tool for creating wireframes as well. Number one, it gets you off of the computer and into a different mode of minimalistic thought. Drawing a wireframe can be done in light speed and eliminates application clutter that may distract from the creative process. Don’t forget to download Konigi’s classic printable 8.5 x 11 inch graph paper which also includes bonus styles for wireframing. A great next step would be to use UX Pin’s paper recognization tool, which I mentioned earlier in the article.

I hope that some of these tools help you on your next project. Always remember that wireframing is a key part of planning, keep it simple. Save the complicated stuff for the design process.