Connect-A-Sketch

An Introduction to Connect-A-Sketch · constructed by Connect-A-Sketch

The original tour

In September 2009 the app explained itself the only way it knew how: as a clickable prototype. Fifteen screens, linked by 23 hotspots. The pictures were kept on a separate server that was never archived, so what you see here is the skeleton. Each frame is the right size, and each dashed box is a real link from 2009, still pointing where it pointed then.

slide1.jpgSlide 2

Screen 01 · Slide 1 · original file slide1.jpg · 800×618 · click a dashed box

All fifteen screens

  1. 01Slide 1One way forward. 1 hotspot.Open →
  2. 02Slide 2Back on the left, forward on the right. 2 hotspots.Open →
  3. 03Slide 3The name and the file disagree. 2 hotspots.Open →
  4. 04Slide 4Order lives in the links. 2 hotspots.Open →
  5. 05Slide 5The bridge into the demo. 2 hotspots.Open →
  6. 06Demo 1A big target to start. 1 hotspot.Open →
  7. 07Demo 2Two routes to the same screen. 3 hotspots.Open →
  8. 08Demo 3One tall hotspot. 1 hotspot.Open →
  9. 09Demo 4A menu and a panel. 2 hotspots.Open →
  10. 10Demo 5Most of the canvas is the link. 1 hotspot.Open →
  11. 11Demo 6A small, precise target. 1 hotspot.Open →
  12. 12Demo 7The only step back in the second half. 2 hotspots.Open →
  13. 13Demo 8Next, at the edge. 1 hotspot.Open →
  14. 14Demo 9Last two links. 2 hotspots.Open →
  15. 15Demo 10Where the tour stops. 0 hotspots.Open →

Reading a prototype without its pictures

It sounds like a loss, and it is. But a prototype's links are its argument. They say what the designer expected people to want next, how many ways forward each screen offered, and where the story ended. With the images gone, that structure is easier to see than it would have been in 2009, when the drawings drew the eye.

For how the app itself worked, see How it worked, which also maps the whole tour on one diagram.