Simpler Web Design with HTML5 Prototyping Services

Web is becoming a second desktop now. And the requirements for web apps goes the same as for desktop apps. Especially for the UI part. It's a bad idea to start developing UI in Photoshop. You can't test application behavior, responsiveness, grids, on static image. Same goes for oldschool paper+pen method. You just don't aware of poroportions and sizes of your components, so drawed wireframes will look completely different when they come to HTML+CSS.

Modern way or prototyping stands for opening text editor and writing some HTML code with Twitter Bootstrap included. But actually why would you do this if there are services that does just the same in WYSIWYG way? It is much easier to try different elements, positions, just by moving them through pages, without editing HTML or CSS. So why not to use this tools. You may stick to well known Bootstrap, use Foundation or custom framework.

Let's list them all. Choose the tool that fit your needs better.

1
4.00

Easel.io

Easel was borne out of our frustration with the current state of design tools. Development tools have improved as the web has matured but design tools haven't. We started Easel because we want to create better design tools for the Web.

2

Divshot

Divshot is an interface builder for web apps that exports clean, semantic code. The same code a professional would use in the real world. We believe there's a better way to design web apps beyond photo editors, mockup tools and repetitive code.

3

Jetstrap

Jetstrap is a 100% web-based interface building tool for Twitter Bootstrap. No software to download, just log in and build. Your work is accessible from anywhere.

4

LayoutIt

Drag-and-drop the same Bootstrap components to your own design. Easy to integrate with any programming language, you just download the HTML and start coding the design into it. Professional and validated HTML where you can replace with your own variables, loops or anything you need!

Personally I prefer the Divshot app because it allows prototyping with Bootstrap and Foundation. It has nice interface and simple HTML editor for cases you need to manually hook some classes. If you used other service, please share your experience in comments.

And a small bonus: If you are not yet familiar with Zurb Foundation, you can easily learn on this site.

It has nice online editor where you can try Foundation live, that reminds me of CodeSchool classes I passed recently.

Published by DavertMik on 2013-05-07 15:44:12

More to read

Comments