Top Tools for Mockups and Wireframes

Wireframes are the foundation of a successful software development project. Clear and detailed wireframes can make the software development requirement gathering process much simpler.

Top Tools for Mockups and Wireframes

“Do you have any mockups or wireframes or layouts”? The first question I ask my clients. Mockups or wireframes are a visual display of an idea or concept. Phrase, A picture is worth a thousand words is absolutely correct in software development world. A wireframe or mockup tells me more in a few minutes than a person can describe in hours.

Wireframes are the foundation of a successful software development project. Clear and detailed wireframes can make the software development requirement gathering process much simpler. Wireframes can later be used in the user interface designs and that again can save a ton of time.

Every individual has his/her own way of creating mockups. I have seen mockups from a simple paper pencil drawing to a complete design. When I create mockups, I usually draw on a paper with a pencil and once I am fully satisfied, I create a graphics document using the Expression Blend or Fireworks. When I create System Requirement Specification (SRS) document, I take my designed wireframe diagrams and stick them into the SRS document.

We recently got a new project and Doug told me that he is working on the mockups and he is using the Mocking Bird online tool. I got curious about what other online tools are out there that can do the same.

Here is a list of some interesting mockup, wireframe, and design tools. Most of them are free or have a free trail.

1 Gliffy (http://www.gliffy.com)

 

2. Lovely Chart (http://lovelycharts.com)

 

3. Cacoo (https://cacoo.com)

 

4. Lumzy (http://www.lumzy.com)

5. MockFlow (http://www.mockflow.com)

 

6. Pencil Project (http://pencil.evolus.vn)

 

7. Simple Diagrams (http://www.simplediagrams.com)

 

8. Mocking Bird (https://gomockingbird.com)

 

9. JustinMind (http://www.justinmind.com)

 

10. Pidoco (https://pidoco.com)

 

11. Mockup Tiger (http://www.mockuptiger.com)

 

Check them out and let us know what do you think.

Do you create wireframes or mockups? I would be curious to know what tool do you use.

Cheers!