Designers & developers work together more closely with Handcraft



Tweet

50,000 people have used Handcraft to create HTML prototypes

  • Larry Stone “For rapid prototyping, Handcraft is the perfect tool for designers who code. It's as low- or high-fidelity as I need it to be and leverages familiar technologies. I love this paradigm.”

    — Larry Stone, User Interface Designer at oDesk

  • Bartosz Burclaf “Handcraft is just awesome! We started using it a few months ago and since that time we don't have to use any other templating languages, graphic based mockups etc.”

    — Bartosz Burclaf, CEO of eFabryka.com

Take your designs to the next level.

Design in the browser

Handcraft means 100% HTML prototypes. This constraint means you can only design what works in the real world.

Build an interactive prototype

Include state changes, error messages, and alternate designs directly in your prototype.

Don't repeat yourself

No more copy/pasting repeating content and navigation. Instead, use markup like <layout/> and <page/>.

Forget about lorem ipsum

Fill your prototypes with real content and spend more time on one of the most important interface elements: copy.

We did this stuff so you don't have to.

Secure and private

Prototypes live at [yourprototype].handcraft.com and can be protected by a password of your choosing.

Collaborate with your team

Easily share prototypes with colleagues and work on code together without fear of losing your changes.

No versioning hassle

Your work is automatically backed up. Change history of all your prototypes means you'll never lose your work.

Professional presentation

We take care of the loose ends so your clients always get a smooth experience.

What people are saying about us

  • Given up on Mozilla Pencil. It's decent, but it's not me. Trying out Handcraft. Wireframing with an HTML variant language. Much more me. :) — @onion2k
  • I gotta say, handcraft.com is awesome. #prototyping — @irwin
  • Just found out about http://handcraft.com, a web-based HTML prototyping tool. Very clean solution. Definitely worth a try. — @bcurdy
  • Trying out @Handcraft at the recommendation of @smashingmag. So far it's pretty rad. — @tara
  • Designing in the browser just got a whole lot easier with @Handcraft - imagine Firebug… but saving your edits back to server. DYSWIM? — @michaelrose
  • Handcraft.com is impressing me more by the minute - a true powerhouse for web prototyping. And the goodies are cutting edge! /cc @Handcraft — @tacoe
  • RT @smashingmag Backfire: save CSS changes made in Firebug - http://bit.ly/bNfYGL - This. Looks. Phenomenal. — @brandonbhel
  • Plugin genial. Guarda los cambios de #CSS realizados en Firebug http://tinyurl.com/28ecned — @ivoserrano
  • I've been looking for some mock-up tools and this is the coolest I've seen http://handcraft.com/ — @Skierkowski
  • proper interactive prototypes you can export to an aspnet mvc project... very interesting indeed: http://handcraft.com/ — @mattk
  • Backfire from Handcraft is the BOMB, I tell you: A savebutton for Firebug's CSS editor: http://bit.ly/bYkczk — @jsjo
  • handcraft: write interactive prototypes instead of static wireframes using HTML, CSS, JavaScript - http://handcraft.com/ — @smashingmag
  • Handcraft for prototyping looks like it might be handy for small remote teams: http://bit.ly/c8D8nC — @stackhousehouse
  • quick test drive of @Handcraft... clever stuff like switching focus from code to writing. — @jessekorzan
  • Groovy little HTML prototyping app called Handcraft: http://bit.ly/anki5E #HTML #design — @camsweeney
  • Found a terrific interactive web-based prototype development & sharing tool : Handcraft. Great idea, neat implementation, lots of goodies! — @ntarunkumar
  • I hope @Handcraft can do for IDEs what the iPhone did to cell phones. I love when stagnant, overcomplicated and outdated technology is replaced. — @lucaswoj

We believe great designers are craftsmen.

Having intimate knowledge of the tools and processes required to craft a quality product is something we think is vital to any designer worth her salt.

That's why we made Handcraft: it's the next step in design after wireframes or Photoshop. You use it when it's time to buckle down and really start chiseling out the details. You can't do that unless you're working with the final medium. That medium is the web browser.

Handcraft takes full advantage of browser features like tabs and HTML5. Our take on working on a design? You don't really know what it's going to be like unless you're in the browser. Leading designers around the world agree with us.

Q42 Handcraft is a Q42 product. We're a team of 35 interaction and software engineers and we've been handcrafting websites for over a decade. Handcraft is something that evolved naturally.

Read more about why we made Handcraft

Leading designers worldwide think like us.

  • "If you want to be a really exceptional designer [...] then learning to use the current tools will only make your understanding and work stronger."

    — Rebekah Cox, Lead Product Designer at Quora

  • "I don't think it makes sense to call oneself an interface designer unless there is at least an understanding of how programs work."

    — Ryan Singer, Product Manager at 37signals

  • "Knowing how to code helps you produce better prototypes"

    — Jared Spool, CEO & Founding Principal, UIE

  • "The best [designers] tend to be the ones with a non-trivial technical background."

    — Glen Murphy, Lead User Experience Designer, Google Chrome

  • "Designing in a browser makes the design process more fluid, efficient and accurate because it addresses issues that are difficult when making static visuals, if they are addressed at all."

    — Andy Clarke of Walls Come Tumbling Down

Read our blog

Follow us on twitter