1. Upload
Homepage, 2009
There are a thousand great design tools out there, including pen and paper. Sketch out your designs, then upload them to Connect-A-Sketch.
Each sketch was an ordinary image file. The surviving pages show JPEGs and PNGs, with file names like
slide1.jpg and Canvas_4.png, stored on a separate uploads server. People
used it for scanned paper drawings, exported wireframes and screenshots of half-built pages alike.
The app didn't care how a screen was made, which kept the cost of a change close to zero. Redraw it,
upload it again, keep going.
2. Connect
Homepage, 2009
Drag and drop your sketches into your prototype. Create connections between sketches and make your prototype interactive.
A connection was a rectangle drawn over part of a sketch and pointed at another screen. Under the hood it was plain HTML: a link positioned over the image with a top, left, width and height in pixels. That is why the tour can be rebuilt today. The pictures are gone, but every rectangle and its destination is still sitting in the archived markup.
Screens had names of their own, separate from their files, and every screen got its own address: the tour lived at /connectasketch/intro, with screens such as /connectasketch/intro/29-slide-2. Anyone with the address could open a single screen directly.
3. Click
Homepage, 2009
Explore your own interactive design, or easily share it with your users.
A shared prototype opened full size with a slim header: the project name, a line reading Constructed by and the owner's username, and a checkbox labeled show links that outlined every hotspot. The checkbox mattered more than it looks. Hand-drawn screens don't always make it obvious what is clickable, and a tester stuck on a screen could switch the outlines on instead of giving up.
By 2012 each screen also carried a Leave Feedback button. It opened a small window with two tabs, one for comments on the whole prototype and one for comments on the screen being viewed, so a reviewer could say "this button is in the wrong place" exactly where the button was. The 2009 tour used a simpler Send Feedback link that opened an email.
The tour, mapped
The app introduced itself with a prototype built in the app: fifteen screens, five slides and ten demo steps, constructed by the Connect-A-Sketch account. Here is every screen and every link it held.
Solid arrows move forward, dashed arrows go back. Every arrow is one hotspot recorded in the 2009 pages. Click a box to open that screen.
| # | Screen | File | Hotspots lead to |
|---|---|---|---|
| 01 | Slide 1 | slide1.jpg | Slide 2 |
| 02 | Slide 2 | slide2.jpg | Slide 3, Slide 1 |
| 03 | Slide 3 | slide4.jpg | Slide 4, Slide 2 |
| 04 | Slide 4 | slide5.jpg | Slide 5, Slide 3 |
| 05 | Slide 5 | slide3.jpg | Slide 4, Demo 1 |
| 06 | Demo 1 | Canvas_1.png | Demo 2 |
| 07 | Demo 2 | Canvas_2.png | Demo 3, Demo 1, Demo 3 |
| 08 | Demo 3 | Canvas_3.png | Demo 4 |
| 09 | Demo 4 | Canvas_4.png | Demo 5, Demo 5 |
| 10 | Demo 5 | Canvas_5.png | Demo 6 |
| 11 | Demo 6 | Canvas_6.png | Demo 7 |
| 12 | Demo 7 | Canvas_7.png | Demo 8, Demo 6 |
| 13 | Demo 8 | Canvas_8.png | Demo 9 |
| 14 | Demo 9 | Canvas_9.png | Demo 10, Demo 10 |
| 15 | Demo 10 | Canvas_10.png | none (end) |
Two things stand out. The slides use a strict back-and-forward pair, like a book. The demo steps mostly go forward only, with large targets and a couple of screens that offer two different hotspots for the same destination. That is a prototype built for a stranger: forgiving, hard to get lost in, and finished at the point where there was nothing more to show.
Start the tour from screen one →
What it would look like now
Every part of this has become standard. Design tools link frames with hotspots, share prototypes by URL and pin comments to a spot on a screen. What Connect-A-Sketch had going for it was how little it asked. There was no component library to learn and no layers panel. You brought pictures, drew boxes and sent a link, and the session after that was about the design rather than the tool. Sketch to prototype in 2026 covers the same workflow with today's tools.