Designing Interfaces

Chapter 8. Builders and Editors

This chapter covers ideas and patterns used in various "editor" idioms. Many users are familiar with them through common applications like Word and PowerPoint, but the ideas usually are much older or more widespread than these applications. The patterns in this chapter are drawn mostly from these idioms:

Page layout and formatted text editors

For example, Word, Quark, and InDesign

Image editors

Photoshop, the GIMP, Paint Shop Pro, Fireworks, and MacPaint

Vector-graphics editors

Powerpoint, Illustrator, CorelDraw, Visio, and OmniGraffle

Web site builders

Dreamweaver and GoLive

GUI builders and code editors

Visual Studio, Eclipse, and Interface Builder

Generic text editors

Notepad, Emacs, email composers, and millions of web pages

Despite the different media they edit, these idioms have a lot in common. They are, first and foremost, canvases—they offer the user an empty shell she can creatively fill, plus the tools to fill it with. Most of them are naturally structured around the Canvas Plus Palette pattern, from Chapter 2, which prescribes a blank canvas area next to an iconic toolbox.

Going back further, into Chapter 1, you might recall the Incremental Construction pattern and the concept of "flow." They are especially important for builder-style software. People who create things don't work linearly—they create a little bit, see how it looks (or works), change it, add more, delete some of it, and step back to take another look. When the tools are responsive ...