Hand Canvas
Hand Sketched prototypes that run on Mobile Phones

In my last post I demonstrated how Hand Canvas can be used for resizable screens. This is one of the distinguishing factors I see for this prototyping toolkit:

The ability to show the same sketch on several different platforms and with different screen sizes.

My friend @lehtimaeki and I were trying out the last example (link) on several different android devices and got some pretty amazing results:

The Phone 

One of the first questions that came up in our discusson was, does it work on mobile? Of course, thanks to the beauty of HTML5 the answer to this question is, Yes!

So we quickly took some screen shots, have a look:

Of course that is not enough, we can do vertical as well as horizontal layouts. You can even switch back and forth between the two states.

The Tablet

The next stop in line was the tablet. Pretty much the same thing, but you see that the layout changed through media queries, etc. You can resize and the hand drawn sketches auto adjust and redraw.

And the obligatory vertical screen shot as well.

Does it work on your mobile?

If you have a somewhat recent android/iphone browser that supports canvas and font definitions you should be able to play with this too. 

Check out the example on your phone and let me know how it works: http://static.dennisschaaf.com/resize-sketch/

Also send me feedback to my twitter or G+.

Hand Canvas Sketch with Resizable Behavior

Using Hand Canvas Outliner with a Foundation Based Layout

In the last post I mentioned that using Hand Canvas you will be able to specify the resizing behavior. But the example I attached didn’t quite show that this was the case. 

So here is a better example, it nicely shows how you can demonstrate the resize behaviour.

If you think of a typical sketch you would get from Axure/Balsamiq you end up with a static page, but you can’t show how your window will behave when it is resized. 

Foundation

This sketch also demonstrates how easy it is to use any library for your prototyping work. I picked up the foundation toolkit and modified their example to be hand drawn in less than 15 minutes.

I only had to include the necessary files and apply a couple classes in the right places and then my site had a the hand-sketched look and feel. 

The Example

Here you go: Launch the Example

Check out the example. Try resizing it, try it out on a mobile. Have some fun.

Let me know what you think! Would you use this? What’s missing to make this a fully functional toolkit?

How-to Sketch a Website in a reusable way.

[This is part of a series of articles that describe how I am building a drop in replacement of the canvas control that will make it look like everything is hand drawn. Maybe you want to read from the beginning.]

Let’s get started!

Rather than stay in the abstract, I like to show concrete examples, give you something to play with and get high quality feedback about my ideas - Yep! Thanks for noticing, this is a blog about prototyping, so this should be my attitude.

Exhibit One - A hand-drawn wire frame sketch 

You will now see a prototype of a sketched wireframe, turned into a working mockup using my hand-canvas techniques. 

The original sketch is taken from Henry Jone’s article on sketched mockups. It looks something like this:

After I did my magic on it, there are several things that you can see on the prototype that could not be specified as nicely on paper. Only the first two are implemented in this prototype, i will leave the others for the upcoming posts.

For Example:

  • Resize Behaviour - What happens when the size of the window changes? (In this example the content simply stays centered, but i’ll show this working in a more exciting example in the next post)
    (EDIT: this example sucks for demonstrating the resize behaviour, check out this one instead ) 
  • Hover States - Which components react on hover? Some simple hover states on the top menu buttons …
  • Timed Events - Events that happen after a certain amount of time or in certain intervals.
  • State changes on click
  • Annotations - How do i highlight something unique about a specific component?

So Here is an example of the running page.

See the live example here: 

http://static.dennisschaaf.com/nascar-sketch/nascar.html

I will give the usual disclaimer that this is still example code. So it’s not production ready. 

What do you think of this? How could you use this in your design and development process?

D

Happy New Year!

Welcome back from the holiday season!

For those of you that need some holiday updates, the crew at Komola threw a one-day Hackathon last week. You should take a look at my contribution, because it makes use of some of the hand-canvas functionality which I am writing about here.

Meet ‘Sequence’

Sequence

  • Targeted for developers and technical people.
  • It lets you draw Sequence Diagrams.
  • It has a fresh new feel
  • An interface that is blazing fast and easy to learn.
  • Best of all it allows for real time collaboration a la Etherpad. 

Check it out:

Sequence sequence.dennisschaaf.com
Porting any canvas library to hand-canvas

Alternative Title: Making SVG vector paths seem hand drawn

[This is part of a series of articles that describe how I am building a drop in replacement of the canvas control that will make it look like everything is hand drawn. Maybe you want to read from the beginning.]

The Logical Next Step

Once we have the basic drawing functionality working, it is time to see what we can do next. One simple experiment is to see what kind of libraries allow us to test out the widest set of drawing functionality. 

A good example of this are the various canvas based SVG drawing implementations. This will let us load examples from a huge collection of existing images and try them out to see how well everything is working. 

As I’ve pointed out a couple of times throughout this blog - This is supposed to be dead simple. That’s why I call it a drop in replacement. 

The process lined out in this article is the simplest approach to porting a library and requires modifying the source code of the 3rd party library. In some occasions it is also possible to make a library use hand-canvas without actually modifying the original library, but that’s a topic for another post.

Choosing a Library

There is a lot of different libraries that we can use for this. I browsed around a bit and found CantoJs very versatile and well-documented, so I will be using it for this example.

First we have to get the library. It is just one file so you can grab it directly from the repository: http://code.google.com/p/canto-js/source/browse/trunk/canto.js

Modifying the library

Once we have this, we look at the code and look where the canvas is initialized. The simplest way to do this is by doing a search for the getContext(“2d”) function call.

Read More

First Drawings

[This is part of a series of articles that describe how I am building a drop in replacement of the canvas control that will make it look like everything is hand drawn. Maybe you want to read the beginning first, or just the last article.]

Ok, time to get down and dirty! You want to see how this actually works.

I will start with some simple code examples. I will be using a relatively common Canvas Drawing Skeleton with a slight modification. You will see that after I get the 2D-drawing context from the canvas object, I wrap it with my hand canvas library.

See This Example:

No drawing code here yet. But as I said before, the goal of this library is to have everything look and behave exactly the same way, so any drawing code you already have or find on the web should work here too.

So if were are any surprises here, then I would be doing something wrong.

Drawing Hand Drawn Lines

So, let’s start off by drawing some simple lines. This is how to make lines seem hand drawn in HTML5 Canvas. Of course we can have them be stroked or filled.

Drawing one line

Read More

The Theory

[This is part of a series of articles that describe how I am building a drop in replacement of the canvas control that will make it look like everything is hand drawn. Maybe you want to read from the beginning.]

So before I get started on posting first screen shots I feel like I need to share some theory with you.

It’s all just lines and shapes!

Basically a 2D drawing library provides developers with a very basic set of drawing instructions. Usually these are commands like “draw a line from A to B”, “fill a circle with radius X”, “outline a rectangle”, and so on.

Of course there are plenty of other things going on, but for now I’m trying to keep things simple and won’t go into detail here quite yet. At the moment, all you have to know is that when your canvas game engine draws your game world, and when the business graph charting library draws a nice “area chart” for you, it uses these simple drawing instructions to create your image.

Here’s some simple examples:

Simple Drawing Functions Normal

Getting Dirty

These simple shapes are very nice, but at the same time they also look a bit lifeless and boring.

Read More

So one more time - What is this about?
This is part of a series of articles that describe how I am building a drop in replacement of the canvas control that will make it look like everything is hand drawn. 
  • What are you trying to do?
  • Why are you doing it?
  • What are your inspirations?

I am glad you asked! Because I was just about to answer that right now. 

Read More

Welcome

Hey Guys,

I am working on a drop-in replacement for the Canvas Control that will make it seem like everything is hand drawn.

I will post my progress here.

Enjoy,

Dennis