Etch-A-Sketch-A-Site

May 12, 2003 7:10 AM

Denim "A team at the University of California at Berkeley has developed a software sketching tool that helps designers create fully interactive websites using just a graphics tablet or mouse...

Developed by the Group for User Interface Research at UC Berkeley, Denim allows designers to play around with different ideas with the speed and ease of drawing on paper. Even better, sketches can be hyperlinked, allowing a series of rough drawings to become a fully interactive site.

'We're trying to replicate the way designers have traditionally worked in the early stages of design, which is with pen and paper,' said the project's lead, James Landay, an associate professor at the university."

(Quote above is from this Wired News article.)
posted by eyebeam (17 comments total)

I think this is the greatest idea since sliced bread.

The examples I checked out on their website are pretty crude, but imagine what someone with some drawing ability could do with this tool. A fabulously intricate hand-drawn website, or an online art portfolio that replicates the look of the artist's real-world sketchbook, or perhaps a sketch-blog...
posted by eyebeam at 7:15 AM on May 12, 2003

I think it'll need a bit more work (in the drawing tool area) before anyone will want to do anything _really_ intricate with it. The pencil tool felt a bit laggy when I tried it a moment ago.

That said, it's an awesome idea and it fits SO well with how I work when I put together websites. I'm surprised someone hasn't twigged to the idea before this.
posted by Kikkoman at 7:22 AM on May 12, 2003

Yeah, Denim is a cool idea - I've been playing with it on and off for 6 months or so.

It's not great with a Wacom style drawing pad, unless you're a skilled user [and I'm not] - I'm guessing that the sweet spot is gonna be a Tablet PC, where you're drawing on screen.

But let's not get carried away - it's not a tool to "create a fully interactive website." It is a tool to quickly get propotypes / wireframes running, especially when sitting with clients / users.

If they complete the widget concept, then Denim's worth increases greatly.

All in all, could be one of those tools that arrives just at the right time - like I said, Denim on a TabletPC could be a really really cool designer/consultant application
posted by urbanjunkie at 7:34 AM on May 12, 2003

a link to jeffbridges.com seems appropriate.
posted by GeekAnimator at 7:37 AM on May 12, 2003

I like that. I think my 5 year old would like it too. I think that a workspace metaphor would help her understand hyperlinking, and could help her use the medium effectively, even as she's just now starting to read. A production tool like this would be a boon for kids.
Off subject, but saturday, my 1 year old realized that the icons on the dock got bigger when he pulled the mac's mouse off of the desk, as he is wont to do. So later he kept the mouse on the desk and moved it around until the icons jumped.
A wisely chosen metaphor and clear causal relationships go a long way.
posted by putzface_dickman at 9:14 AM on May 12, 2003

It is a tool to quickly get propotypes / wireframes running, especially when sitting with clients / users.

ah! a vast leap forward in client-bullshitting tools!
posted by quonsar at 9:58 AM on May 12, 2003

Ha! No kidding, quonsar, that was exactly my thought.

I would love to use this with my clients. I'm sad to hear that it's hard with a separate tablet -- because a Tablet PC would be a terrible platform on which to design a website. I can't tell from the movies if it has enough tools to use it productively with a mouse. But this is a GREAT idea.
posted by josh at 10:08 AM on May 12, 2003

GeekAnimator - thank you for that link! I had no idea that Jeff Bridges was so...cool (even though he's long been a favourite actor of mine, and we share the same birthday, which is clearly the birthday of cool people). His photography is actually impressive, I'll buy his book when it comes out. This one in particular stands out.

Seeing something like that in action really gives you an idea of what software like this could do. I thought it was kind of messy and crude at first, but after looking around a bit it realised that it's only that way in comparison to what you're used to. It makes the site much more personal, more organic. And I'm sure there are a whole host of creative ways to use it. This is why I love Metafilter - a thread about software, which I thought might have been ho-hum, has actually turned out to be something I find interesting. Thanks, eyebeam.
posted by biscotti at 11:13 AM on May 12, 2003

"It is a tool to quickly get propotypes / wireframes running, especially when sitting with clients / users."

ah! a vast leap forward in client-bullshitting tools!

And a leap backwards for grammar.
posted by carter at 11:14 AM on May 12, 2003

Actually, clicking on 'More Projects' took me to a lot of other interesting looking work - thanks, eyebeam!
posted by carter at 11:22 AM on May 12, 2003

Ah, split infinitives... the pedant's favourite since, well, who cares?
posted by armoured-ant at 11:22 AM on May 12, 2003

It's a tad freaky on my Jaguar. Little too beta. Could be nice, when they're finished.
posted by DenOfSizer at 12:32 PM on May 12, 2003

Sketchbook Pro is another great prototyping App for the Tablet PC. They may not be UC Berkeley, but the lads who make it recently got an Academy Award for some other software of theirs.
posted by fnord_prefect at 12:54 PM on May 12, 2003

Wow, GeekAnimator, it certainly is appropriate. I found the text a little hard to read, but still a fascinating site. Thanks.
posted by tommasz at 2:22 PM on May 12, 2003

This is great. I always feel compelled grab a pad and scribble boxes and arrows all over the place before starting anything. Although in its current form the sites it produces aren't much good as anything but prototypes, digital design should be going this way. Putting design and creativity ahead of the medium and its various complications/limitations has got to be a good thing. Thanks for the link, eyebeam.
posted by zygoticmynci at 4:24 PM on May 12, 2003

Apparently I'm missing the point. What does this do that can't be done in Fireworks, ImageReady, Photoshop, Illustrator, FreeHand, etc.?

You've got a drawing tool. Got that in all of the above. You get to definte hyperlinks and export the whole shebang as a web site which is really just a bunch of image maps. All of the above also offer tools for defining link areas and exporting them as either sliced images or image maps. Seems to me it would be relatively easy to define an action (or whatever the Fireworks equivalent is) to automate the export of multiple pages from one or more documents for the same result.

This may offer some benefits in terms of out-of-the-box simplicity, but otherwise I'm not seeing anything I can't do right now with software I already own and use.
posted by setmajer at 1:30 AM on May 13, 2003

setmajer

Yup, I think you might have missed the point.

The way I see Denim is as a nice replacement for paper napkins. Rough sketches but with cool feature of being able to link pages together, draw little buttons, etc to construct a rough rough wireframe. Really really simple to make changes, and even to use as the target for some early user testing.

Tools like Fireworks seem to be more appropriate for mocking up the visual aspects of the site once the rough wireframe is done. There are too many steps in what you've described for those tools to be useful in the same way as Denim, which really is drag and link.

Does that make more sense ?
posted by urbanjunkie at 11:25 AM on May 13, 2003