The next step after wireframes or Photoshop

Handcraft is designed to be a part of your production process.

  1. Wireframing
  2. Design
  3. H Handcraft goes here
  4. Development
  5. Profit!

Design in the browser and handcraft better websites

  • Show, don't tell
    There's nothing better than feeling how your app is going to work. Your clients will agree: experiencing a prototype in the browser is much more evocative than reading a spec document.
  • Simple or detailed
    Start simple and slowly build up fidelity. Or design something sharp and focus on details like copy and visual design.
  • Make developers' lives easier
    Creating a HTML prototype means it's immediately reusable by your development team, for which they're going to love you.
  • Continue using your favorite tools
    Handcraft enhances rather than replaces. Keep using wireframes and Photoshop. After you're done, figure out the details by designing in the browser.

    We love 37signals' Draft for sketching and Wirify and Balsamiq Mockups for wireframing, and still use them both!

The future of prototyping is in HTML

We think that five years from now, designing in the browser will be the norm. Today, leading web companies are already doing it: Google, Facebook, 37signals and Quora are but a few. These companies have the experience, track record and vision to be ahead of the curve. Will you join them?

Traditional prototyping HTML prototyping with Handcraft
Spend hours setting up your favorite programming framework to mock up an interactive signup flow Create a prototype and get started in minutes
Drag & drop widgets in your favorite wireframe app. Then drag & drop layer elements in Photoshop. Then do it all over again in HTML & CSS Just do it once in HTML and use your free time to get some real work done
Email your prototype as an attachment to your clients and deal with file format problems Share the URL to the prototype
Spend hours on the minutiae of your design in Photoshop only to find out it's inconvenient to implement in HTML Design minutiae that can be implemented because you started in HTML
Scour the internet for the latest version of reset.css Include the latest version from our goodies page in 30 seconds
Boot up Eclipse/Visual Studio and wait for your solution to load Open your browser and start typing
Deal with the version repository headache of updating, merging and committing changes Just work on your code and let Handcraft handle revisions

Designing in the browser means:

  • No WYSIWYG. Be prepared to knuckle down and write your own HTML, CSS and Javascript.
  • Instant sharing with clients and colleagues, just by giving them the address of your prototype
  • Constrained to reality. You can't design something that isn't going to work - the browser will push back and let you know that.