UI Prototyping with Emacs

A while back Jeff Atwood wrote about prototyping a web site that he was working on. It turned out that he was talking about his new venture, Stack Overflow. There are several approaches to UI prototyping, but one of the best regarded is Paper Prototyping. Both Jeff and Jakob Nielsen are proponents of the idea.

There are also many other techniques and tools for UI prototyping and Jeff mentions a one of them in his article: Powerpoint or Keynote. Recently, a new breed of UI mockup tool has been getting a lot of attention. This is the Balsamiq Mockup tool and it looks really great. I want to play with it first and then I'll write about it here.

Today, though, I'd like to talk about and propose a different approach to User Interface Prototyping:

UI Prototyping in Emacs Artist Mode

Artist mode is a minor Emacs mode that turns an emacs buffer into a canvas you can draw all sorts of geometrical shapes on. You can use the mouse or keyboard and the shapes are drawn using the |, \, /, -, +, and x characters.

Artist mode ships with the latest version of Emacs and you can activate it by issuing the M-x artist-mode sequence in the minibuffer. I created a screen mockup of this site in about 15 minutes and you can view it by clicking the image on the right or by downloading the text file at the bottom.

Once artist mode is active within your buffer, you can use the middle mouse button (or the wheel button is most modern mice) to view the artist context menu. From there you can pick the action you want to perform: draw a line, rectangle, elipse, fill an area, etc. To jump out of artist mode, all you have to do is execute M-x artist-mode-off in the minibuffer.

Artist mode has many other uses for programmers as is illustrated in this great screencast by Seong-Kook Shin. The creator of artist mode is Tomas Abrahamsson.

Let me know how you are using artist mode in your projects. The text file with the UI mockup of this blog can be dowloaded here.