SEARCH
  Basics Design Principles Best Tools For Mocking Up A Web Design

Best Tools For Mocking Up A Web Design

img

Wireframing is an important part of the designing process. It allows designers as well as clients review the functionality and basic look of the website while leaving the details out to enhance clarity. Combined with wise site map planning we can easily craft a good foundation of user-friendly and good looking interface. Let's see which are the tools we can use in this process.

Online Tools

There are quite a few tools and apps on the web that allow providers and clients plan out a website. Most of them also offer some kind of communication between them in form of stickies, notes or real-time chat and even integrated Skype calls. That way both parties can be sure they are on the same page with their idea of concept. We're featuring only a few of them, but a quick Google search will discover many more.

Balsamiq Mockups

Balsamiq is an online and installed software for mocking up designs. The online version is free if you don't mind exporting into .png. It's a very intuitive tool with lots of great features, working on any platform since it's built with Adobe Air. They offer a paid version that allows users to collaborate, attach word files etc.

Balsamiq Mockups

Cacoo

An extended tool for almost any type of planning - from mind maps to wireframes. They also offer a free online version, and this too is a team-oriented application, featuring a store with little add-ons such as user-contributed icons, stencils and other wireframing pieces. In short, a very user-friendly tool that will certainly make you look professional in front of clients and co-workers.

Cacoo

Pencil Project

This opensource crossplatform Firefox plug-in works very well for designers who don't need real-time updates on client corrections. It works like any other wireframing software, with ability to add your own custom stencils or even functionality (If you know how to, of course.) and to create working, clickable mock ups.

Pencil Project

Lumzy

Lumzy is like an entirely free version of Cacoo or Balsamiq except it's sadly using Comic Sans as its 'handwritten' font. It features collaboration, live chat and image editing only as a web app, but that seems to be quite enough for any prototyper.

Lumzy

InVision

Paid, but very advanced system for getting feedback and playing out test scenarios while using designing tools your already know. Create a clickable demo out of any .psd in seconds to get them ready for clients' revisions.

InVision

Pidoco

Another paid alternative, plans are starting at about $3.50. If you also need to run usability tests, you can do that with Pidoco alone, or share your wireframes of sites and applications concepts with co-workers.

Pidoco

Mockingbird

While they offer a free try-out web application, they offer paid packages for collaborations and saving the mock ups. Built with Cappuccino, it features a clean, easy to use drag-and-drop interface.

Mockingbird

Axure

This installable software for Mac and Windows allows saving to Word for less tech-savy clients, and developing fully working prototypes in a matter of minutes. They offer a free 30 days trial.

Axure

Other tools

Online tools are sometimes inconvenient or offer just too many features to be useful. Why even learn how to use another application? It's time we take a look at web designers' existing tool box.

Vector designing software

If you work in design industry, you probably own a copy of Adobe Illustrator or similar program that lets you manipulate vectors and offers tools for creating basic shapes like rectangles, text blocks, etc. These are very useful in wireframing, and designers already know how to use them. The key here is only to not overdo it - that means no drop shadows or too many colors - let your wireframes stay flat and tidy. If you're looking for a free/opensource software in this field, take a look at Inkscape.

Vector designing software

Hand Sketching

Another option many of us digital nerds are forgetting about is sketching. Even though it is technically drawing, doesn't require much portraying skills, and it enables us to work directly with the raw concept of the site. It's not hard to just scan up all the drawings we have produced and send it over to the client for revisions - they may print it out and ascribe additional info, corrections and comments and send it back right away. This way seems a little messier, but very convenient for face-to-face meetings, when you can't afford to seem unprofessional playing around with software commands.

Hand Sketching

ABOUT THE AUTHOR

Heidi Pungartnik

This tutorial was written by Heidi Pungartnik, web and graphic designer. You can follow her on Twitter (@ashocka18) or visit her website at aShocka.com.

- aShocka

subscribe to newsletter