The new Handcraft is here!

Our philosophy: design in the browser

As we mentioned in our previous post about Google’s SXSW talk, we believe in Quplo because we think there’s a market out there waiting to create prototypes in the browser. And they don’t mind rolling up their sleeves and using – drum roll - HTML to do it.

We call it designing in the browser.  And we’re not the first to talk about it: numerous leading web designers and speakers, including the Google guys at SXSW, have noted that designing in the browser is an improved way of thinking compared to the traditional waterfall process of creating static screens in Photoshop and then translating all that work into HTML and CSS.

A slide from Andy Clarke's Walls Come Tumbling Down presentation

Prominent designer Andy Clarke of Stuff and Nonsense explains in his 2009 Walls Come Tumbling Down presentation that “when I design in a browser I spend less time explaining to my clients how a page or an interface will work because they can readily interact with them in their browser, no matter how old or capable that browser might be.” He views the old waterfall model as an “outdated workflow” and talks about how to develop a new workflow based around creativity. His solution is designing in a browser.

Other designers and developers agree with him:

  • 37signals’ Why we skip Photoshop explains their process: Photoshop mockups aren’t interactive; they don’t give you a feeling for the flow of the app; they encourage you to focus on details too early on.
  • Meagan Fisher’s 24ways.org article Make Your Mockup in Markup talks more about Clarke’s principles and explains how starting with the HTML structure allows designers to quickly iterate over multiple page layouts.
  • These 12 tips for designing in the browser over at Design Shack offer some good insights as well.

The second tip in the Design Shack article is especially appropriate for what we have in mind: “Get a Good Editor”. Designing in the browser and writing code belong together. They’re inseparable! But all these existing editors weren’t created specifically for building quick mockups and getting a feel for how your app is going to work. They’re Swiss army knives when all you want is a screwdriver.

There are other reasons to design in a browser, too. CSS grid techniques like Tyler Tate’s 1kb grid allow you to keep focusing on your visual design priorities, even inside the browser. Clarke argues that by changing some class names in CSS, clients can quickly see dozens of different colour comps. The Brosho jquery plugin gives you in-browser tools akin to Firebug’s DOM inspector with which to immediately affect the styling of elements in the page.

In short, people around the web are gearing up to design in the browser. And they want tools and patterns to do so.

In our next post, we’ll talk more about how Quplo fits into this philosophy, and introduce a few features we expect will help designers design in the browser more effectively. See you then!

No Comments

Ping RSS

Be the first to respond!

Leave a reply

You must be logged in to post a comment.