2 Of the Best Web Design Prototyping Tools

So you are at your home, thinking of a cool design idea, and a great one comes in your mind. But you still have that piece of doubt in your little heart. Will it turn out to be as good as i think it is gonna be? Is the color scheme at the lowest div right? Did i make a mistake when deciding the font for the menu and menu items? And bla bla bla bla bla….

Do not worry your pretty little head about it, because i got the perfect tools for you to solve exactly that problem.

I am sure that prototyping is not a new concept for you ( it is pretty old for users of Adobe Indesign and similar prototyping software) but doing it with twitter bootstrap and foundation, using only your mouse? HTML5 Prototyping is a damn awesome concept that should not be passed off simply because you can create the most realistic mock-up (and with realistic, i mean most close to reality when you are going to be testing your website’s design).

I will give you as an example my favorite one out of the tools similar to this:

1 – Easel.IO

Easel.IO is simply a gift from God in times where you need to pull a fast and beautiful mock-up. It has many fonts that you can choose, you can build a bootstrap or foundation template, you have the option to put widgets from those two UI frameworks, and change their themes.

I especially liked that it had the Proxima Nova font out of the box in it, and i was able to pull a very fast and beautiful HTML5 responsive mock-up (kept myself on using the HTML5 convertor that gives me my mock-up in it’s HTML and CSS state though, because of ugly syntax and class names). It’s an awesome tool.

2 – Moqups

I guess their creators will be able to explain much better than i could explain my own words, here they are:

Moqups is a nifty HTML5 App used to create wireframes, mockups or UI concepts, prototypes
depending on how you like to call them.

Moqups is a google docs looking like HTML5 application, that has a toolbar like in Visual Studio with a list of widgets you can use, widgets for iPhone like the on and off slider if you are building iPhone apps, and thousands of other features like icons that you can add to your mock-up.


So these are the top 2 HTML5 and Graphic prototyping tools that i use. I would suggest the Easel.IO one for trying the web designs that you are doing, and the Moqup one for doing other kinds of design such as UML, database design, and mock-ups for your marketing tactics and stuff unrelated to web design.

But whatever tool you are using, always remember to not have your mockups lack in important details and features!

Prototyping is not enough as you need to be a good designer too, so do not forget to learn good principles too.

Thanks for the read and keep it up!














Leave a Reply