The new Handcraft is here!

Improving the website production process – Part 1: Exporting to development platforms

If you’re involved in the website production process, chances are your job involves wireframing, visual design, prototyping, development or a combination thereof. More often than not, the process involves designers tossing designs “over the fence” to a development team. Regardless of what side of the fence you’re on, it’s clear that there’s room for improvement.

The website production process.

The website production process.

At Q42 we’ve been building websites together with design firms since the previous millennium, and we can safely say that when designers and developers embrace the constraints and possibilities of the other profession, it leads to better results and happier clients. However, it’s surprising to see that so many tools out there support these different phases of website production, yet do so little to stimulate cross-profession collaboration. To paraphrase:

Most tools in the website production process are PvP. We need co-op.

Quplo is co-op

During a project that involves multidisciplinary teams, the end result will be much better if it’s prototyped before being developed. And with Quplo’s invitation-based collaboration system, prototyping can be done together by both ends of the production spectrum.

Invite someone else to work on a prototype.

Invite someone else to work on a prototype.

It puts the focus on hand crafting HTML and CSS as opposed to drag-and-drop, allowing users to create prototypes ranging from low-fidelity wireframes to production-quality HTML.

Our markup language flow was designed to aid in that process. Its structure of layouts, pages and reusable parts was loosely based on a common design pattern known as the separation of concerns as found in existing development frameworks. We designed flow in such a way that it would be possible (in theory) to export and convert a prototype to the next stage of the website production process.

Today this theory becomes reality.

The Quplo to .NET 3.5 MVC2 converter

Our colleague Jaap Taal at Q42 has created a conversion tool that converts a Quplo prototype to a Visual Studio project running on .NET 3.5 with MVC 2. It has the controllers, master pages and views created for you, and all it takes is a press of F5 (“Run”) to see it running in the browser. We’ve documented all the steps on our support page with screenshots to help you along the way, and the package includes two example prototypes so you can try it out immediately.

Download the Quplo to .NET MVC2 converter

A Quplo prototype running in Visual Studio.

A Quplo prototype running in Visual Studio.

We’re thrilled to announce this. It proves the fact that Quplo really blends in perfectly between wireframing, design and development and that instead of locking you in, Quplo helps you progress from one phase to the next. Any exported Quplo prototype is a .zip file containing XHTML based XML files that any developer should be able to work with, but an automated conversion to existing development frameworks is a huge step forward.

We see the .NET converter as the first of several conversion tools. Jaap has already started work on another prototype conversion tool, and if you’re interested in writing up conversion routines for Java Spring, Ruby on Rails, PHP or any other language or framework, don’t hesitate and let us know your thoughts.

The big picture

Looking at the website production process, we’ve designed Quplo to live in the prototyping space with wireframing done prior in the process and development being the obvious next step. We set out to make moving forward in this process as smooth as a baby’s bottom. Today we smoothed out moving from prototyping to development. Up next is moving from wireframing to prototyping.

Time for Rahul and I to visit Italy

1 Comment

Ping RSS

  • google adwords coupon…

    Improving the website production process – Part 1: Exporting to development platforms « Handcrafted…


    by google adwords coupon • Oct 23rd 2014 • 10:10

  • Leave a reply

    You must be logged in to post a comment.