Prototyping is the future: What lies ahead

With our workflow in hand, let's shift our perspective to the big picture.

What does this mean for the other deliverables

What prototyping may mean for your other deliverables in the design phase is that they may need updating after being "finalized." When sign off needs to be obtained on a deliverable make it clear that what the client is saying is "Yes, I agree we are going in the right direction and I understand the vision proposed thus far." It may seem rudimentary, but take the time review this with them.

Drupal

We've gotten this far with little mention of Drupal. So, what does this have to do with Drupal? Drupal is very well-suited to build extremely robust and complex websites with a lot of different functionality and behaviors. In fact, this is Drupal’s superpower, but also its curse. It is much easier to add functionality than interactivity. Ensuring that your client is crystal clear on exactly what and how the application will be is mission-critical. So, while the process can save time on your end, it will also increase understanding between you and your project team.

Certain Drupal themes, like Zen, and Omega, while not based on Zurb's Foundation, they attempt to responsify sites out-of-the-box. Instead of laboring over every last minutia for each breakpoint, polishing up what these base themes offer from the get-go is often the most viable path forward for organizations who are on a shoestring budget.

Alternatively, another bridging tool here is to have or develop a base theme whose markup matches that of the prototyping tool. The the process is further leaned up in re-use of prototype code in production code.

Tools

Like I mentioned before, the tool we use at OpenSourcery, we developed internally. It's called Hadron, and is based on the Ruby application Serve, and Zurb's Foundation framework. The long-term goal, and the reason for the name, was to ram the Foundation framework and AdaptiveTheme's WCAG-compliant markup together at high velocity and see what comes out. It is available to be forked and cloned from Jonathan Hedstrom's repository on github.

Micah Godbolt at Lullabot has developed his own prototyping tool, Tractor, based on AngularJS and Grunt.

Wirefy is another tool, that I haven't tried personally, but is free to grab and fork on github. It uses HTML, SASS, Javascript and fonticons. It is style agnostic and comes with many basic web elements (menus, forms, slideshow, etc).

What's next?

As touched on earlier ever so briefly, it would be awesome to remove the need to learn how to code in order to create prototypes. This would allow not only UI designers and architects to focus on the design itself, and less on the code they're developing creating hurdles for their vision, but it also would lend itself to clients being able to collaborate in a visual format. What we have with the existing prototyping solutions is the ability to communicate to the client in a visual capacity, doing rather than saying, but they are still chained to providing their feedback in a static format. I hope that someday there will be a low barrier to entry tool that could permit real-time or close-to-real-time collaboration between client, stakeholders, development team, and architects to create the best solution for the project.

Tangentially related is the development of style tiles in lieu of comps. We should not be mocking up layouts for every breakpoint range, but rather taking an indication of style (fonts, colors, treatments, block styles, etc) and letting them flow naturally into the layout for the device. No more pixel pushing on every possible layout means huge time savings and a more natural feel.

Again, as mentioned earlier, having graphic designers implement their vision in code. This is easier said than done. Actually, it's less about them implementing it in code, but rather having their vision be translated into CSS and SASS, so that nothing gets lost in translation when being handed off for theming. There is some merit to having to have the graphic designers think through their vision in terms of code before going buck-wild. As we all well know, anything is possible, but possible does not mean cheap.

Lastly, prototyping directly in Drupal. I would love to be able to throw a minimal theme on a Drupal instance and start prototyping. It would allow designers to show the inherent capabilities of Drupal out-of-the-box. It also starts to blur the line between site building and design. Time will only tell if this will become a reality, and then we'll have other issues on our hands!