The new Handcraft is here!

Introducing prototype templates: redesign your website with quplo

Over the past week we’ve been working on a great new feature called prototype templates. We decided to build it to solve two problems. First, when you create a new prototype, you’re faced with an empty editor, which is fine for advanced users but not great for newbies since they don’t know what to do next. Secondly, sometimes you want to create a new prototype based on one of your existing prototypes, and that involves copying and pasting a whole bunch of stuff that could be automated.

So we automated it.

How we treat templates

Since we’re all about not being too much like regular IDEs, we took care not to get too complicated and stuck closely to solving the initial problems we identified above. So for us, templates are about making it easier to understand how quplo works by offering various ways to get started. And it’s about adding value to the application: being able to redesign a website with quplo is an invaluable addition.

One thing we’re specifically not doing is offering users the ability to “define” their own templates. We don’t want to go down that road because it introduces far too much complexity and user interface bloat that doesn’t actually really help you build prototypes. Instead, each prototype you make automatically becomes a template, so if you want to clone something and try out a quick alternative, it’s as easy as creating a new prototype and basing it off the existing prototype you want to duplicate.

Getting started with quplo

One of the great side effects of templates is that we can offer some pre-baked templates to users. Sure, we’ll offer you your existing prototypes to get started with, but there are more ways we can use this system to make quplo easier to use.

Choosing a template

Choosing a template

For instance, we’ve created a template prototype that guides new users through the features of quplo. It’s called “Getting started with quplo” and uses prototype sheets to demonstrate in the editor how the editor works. New users will add this prototype and see an HTML comment in the editor explaining what they’re looking at and asking them to view the sheet they’re on:

The "Getting started with quplo" prototype

The "Getting started with quplo" prototype

Once they do that, the resulting view state of the prototype explains what to do next:

Viewing the "getting started with quplo" prototype

Viewing the "getting started with quplo" prototype

And so on.

This proved to work pretty well and so we started thinking about what other use cases there were for adding a prototype template that could actually improve quplo’s usefulness.

Redesigning websites

One feature of the old quplo we’ve been excited about is the ability to redesign other websites. But in the old quplo, this feature was very technical and we were having trouble translating it to what we have today.

Once we started using prototype templates however, we realised we could use them to solve that problem as well. So we added the ability to create a new prototype based on an existing website:

The option to redesign a website

The option to redesign a website

All you do now is fill in a website address and we’ll take care of the rest. The next screen you see is your new prototype with the HTML from that site directly editable in the editor. And thanks to a little trick (a base href element in the header), all the stylesheets, images and scripts continue to work. So you can get started immediately with your own stylesheet and just override anything you want to change. It’s very powerful and we’re really excited about using it on our own projects.

CSS Zen Garden

Working with the “redesign a website” feature for a while led us to another idea. What’s the best example on the web for redesigning a website? CSS Zen Garden! Well, back in 2003, anyway. Today it’s a bit outdated because we’ve all been convinced of the usefulness of CSS and don’t need a showcase for that anymore. But as a throwback to a bygone era, the website still serves a nostalgic purpose.

We created a separate prototype template that uses CSS Zen Garden’s sample HTML and CSS to allow you to immediately get started styling the CSS Zen Garden page:

The CSS Zen Garden option

The CSS Zen Garden option

It’s an admittedly trivial, sort of cute way to apply the templating feature, but we liked it enough that we added it to the list of prototype templates in the “create a new prototype” screen. We hope it will help people understand the power you get with the ability to import and redesign existing websites.

That’s prototype templates

Here’s a look at the new screen with all the options:

The new "create a new prototype" screen

The new "create a new prototype" screen

We hope this feature will add as much value to your prototyping process as it has to ours. If you have any questions or feedback, we’d love to hear them in the comments below. Want to check out our redesign website and CSS Zen Garden features? Sign up for the preview if you haven’t already!

No Comments

Ping RSS

Be the first to respond!

Leave a reply

You must be logged in to post a comment.