Though we all like to write code, it is very nice and useful if we have good tools for visually designing websites that automatically create code from a visual design. With the appearance of HTML5 and concepts like responsive design came the need for a visual design tool that will fit the bill. Here are a few tools that allow you to create HTML5 responsive web design websites.
Google Web Designer
Google launched in September 2013 the Beta version of Google Web Designer tool. It’s a design tool with which you can viasually design HTML5 interfaces. You can download the tool for free so I’ve added the link below this section. It’s still in beta, so, it might be a bit quirky (it is only available for Windows and Mac, and I could not get it to work on Windows XP 32bit, probably it only works on 64bits).
Google Web Designer has some cool features including HTML5 canvas animation design, UI design for touch enabled devices and includes some nice out of the box components like image sliders and google maps.
Download Google Web Designer here
Macaw
Macaw is not released yet, but it will be soon. It’s an application that started on Kickstarter and it promises to be THE TOOL to use for HTML5 responsive web design.
It’s based on an engine built from scratch by the authors that apparently does more than translation of 1-to-1 design elements to HTML + CSS + JavaScript code. It also tries to optimize the code and enforce clean CSS grouping styles to the minimal necessary CSS classes. In the video below and the Kickstarter link you can see exactly what this tool does.
The main features include fluid canvas and grids, responsive break points, various effects and transition presets, etc.
Don’t know about you, but I’m sure looking forwards to getting my hands on this tool.
Adobe Muse
Adobe Muse is an HTML5 responsive web design visual tool developed by Adobe and it allows users to quickly create HTML5 responsive websites visually starting from the sitemap, configuring the flow of the pages and then designing the actual pages.
It’s only a basic web design tool and it’s probably the best if you want to create just a plain simple light weight website.
Adobe Muse’s feature include out of the box components like horizontal and vertical menus, image gallery sliders, etc. You can find more information about Adobe Muse in the link below.
