In the technology world, the only constant we can wholly rely on is change. We must always take care to remain on or ahead of the bleeding edge. In the past, the normal process from design to development was having a “designer” design a website in it’s entirety, and then passing those static designs to a “developer” to make the vision a reality.
The problem with this of course is that, now more than ever, the web is not a static world, and the advent of responsive design and it’s ensuing ubiquity have helped to solidify that that will remain true for some time to come. The same process that once was commonplace is becoming less viable and efficient. In order to best solve for this new breed of technology, the roles of designers and developers are beginning to blur. It is starting to make more and more sense that designers pitch in with with front-end development. After all, who would be familiar with every aesthetic detail more than the designer?
As luck would have it for designers, there are a few new tools out there described as “rapid prototyping tools” that can assist with this task. They allow those without any knowledge of coding* to put together front-end prototypes that might prove as more useful handoff files for their developers. As a resource, I offer up a few options in the rapid prototyping world:
A recently launched in-browser responsive design tool. Webflow offers three different subscription levels ranging from free to $49 a month, each with additional features.
Similar to Webflow in that it is an in-browser responsive design tool. Froont is a little more straightforward with it’s drag-and-drop UI geared towards rapid design.
Mixture describes itself as “a rapid prototyping and static site generation tool for designs and developers” and definitely requires some prerequisite knowledge of html/css as well as installation of the mixture software. They recently announced their price points from as little as a one-time fee of $39, to a monthly fee of $12.99. A free 14 day trial is also offered. It comes standard with several responsive boilerplates such as Foundation, Bootstrap and Sassaparilla.
Perhaps the most interesting of all provided options, Macaw provides tools akin to an image editor like Photoshop, that writes very clean code. Macaw is still pre-beta, and is not currently available for download, but a fascinating sneak peek video that demos some of the functionality of Macaw can be viewed here.
This new process of design and development melding/handoff is something we are still trying to find out how to implement within our own structure and culture, and the vision for that implementation is surely different for every team depending on resources and bandwidth. Whether or not these tools with prove useful for us as we forge ahead into this new technological landscape is yet to be seen, but hopefully they can be of use to others searching for how to stay ahead of the curve.
* Disclaimer: This historical reality of programs that assemble code for you is that this code can be buggy and/or messy. So while you may not need any coding knowledge in order to use some of these tools, it is always recommended that you or someone else with good developmental chops look over any code before it is released into the wild.