Ideas
Scribus
Scribus is a Desktop Publishing application released as Free Software. The project began in 2001 when Franz Schmid, a German programmer, started to write a program to make his own christmas cards on a bet. The project grew surprisingly quickly, attracting the attention of pre-press professionals and contributors from all over the world. Today it has reached a level of professional quality, in use by several commercial newspapers, and continues to improve.
One of the most interesting things for me about Scribus when I first found it was that it used XML for its native file format. (Technically its not XML, its pseudo-xml, but the project roadmap says it will be real XML real soon.) This allowed me to save a file and look inside it to see just how what I did in the Graphical User Interface was expressed in code. That's what got me thinking.
I could see patterns in my designs - textboxes of a regular size and typography - and I wondered how this might be processed by the computer with the results fed back to me, interactively, to improve my design process.
Smart Defaults
The simplest implementation of this idea, from an interaction design perspective, is one of smart defaults. Consider the first steps of a mock newsletter front page (I have prepared a screencast of Scribus being used to lay out this simple example so that readers unfamiliar with it can see it in action.)
To the right of the layout is the actual code that represents it. To simplify things, I'll use hypothetical XML code. (I hope that the new Scribus format can be used as simply as this to enable people to construct documents like webpages, as I'll explain later.)
<textbox x="20mm" y="20mm" width="120mm" height="30mm"
font="FreeSans" size="32pt" leading="32pt" align="centre" id="1">
<textbox x="20mm" y="70mm" width="50mm" height="200mm"
font="Gentium" size="9.5pt" leading="11pt" align="left" id="2">The first line represents the headline across the top, and the second is the story column along the left side. The first four attributes are about the geometry of the textbox, describing its starting co-ordinates from the top left of the page and its width and height from that point. The next four describe its typography - font family, size, leading, and alignment - and finally a unique identifier. In the screencast you can see these attributes being set with the Properties palette on the right.
If I now draw out a third textbox as a center column, I set its geometric attributes. The application sets the typographic attributes with defaults - Times, 10pt size with 12pt leading and a left alignment - which look like this:
The hypothetical code is now:
<textbox x="20mm" y="20mm" width="120mm" height="30mm"
font="FreeSans" size="32pt" leading="32pt" align="centre" id="1">
<textbox x="20mm" y="70mm" width="50mm" height="200mm"
font="Gentium" size="9.5pt" leading="11pt" align="left" id="2">
<textbox x="80mm" y="70mm" width="50mm" height="150mm"
font="Times" size="10pt" leading="12pt" align="left" id="3">In the first set of attributes, we can see a pattern between the second and third textboxes: y and width are the same. Since the last textbox is very similar to the second, it could be filled in with the attributes of the second instead of the blind defaults, and instead look like this:
If we now draw out an image box below this textbox, it will need a caption beneath it.
The code for this has apparently unique geometric attributes:
<textbox x="80mm" y="260mm" width="50mm" height="10mm"However, looking at it, we can see that its X:Y proportions are more like the headline than the story galleys. Processing the code reveals the caption has a 5:1 ratio, the headline is 4:1, while the galleys are 1:4 and 1:3. Their relationship is clearly shown when visualised:
Since the headline is the most similar, its typographic attributes could be used instead of the defaults:
font="FreeSans" size="32pt" leading="32pt" align="centre"But these sizes are too big to fit inside this small caption textbox, so the system could apply sizes used by the next most similar element. This is a little better than using the defaults, but we would still change it be to smaller, use a bold face, and be aligned left.
If we now draw out another column, with a similarly sized image and caption, then from the internal geometry of the textboxes everything can be filled in appropriately to complete the page:
This example may seem contrived, even banal. Afterall, this is a very simple example and it only takes a second to set these attributes without such a system. If those seconds do add up, as with a large document, Scribus's paragraph styles (stylesheets in QuarkXPress) come into play.
Yet those tools are not actually used in practice by many designers, because design is a know it when you see it activity; Designers prefer to develop things visually on the page instead of planning styles and applying them. This is also reflected in the slow uptake of Cascading Style Sheets based webdesign.
The big idea here is that the interaction between the user and the inferred patterns is as unobtrusive as possible - almost unnoticed - the opposite of the annoying Microsoft Office Clippy help agent. When the system gets it wrong, the effect is the same as the application's default settings: inappropriate and quickly changed. But when it gets it right, it speeds up the design process.
Golden Rules
Consistency, repetition, alignment and proximity are the golden rules of Modernist design. Remaining unobtrusive, how could Scribus help express some of these principles?
If we consider this example newspaper visually, another kind of geometry can be seen: Implicit relations between the boxes. For example, there is a very consistent but implicit pattern between the imageboxes and the caption textboxes beneath them.
This happens in the white space of the page and could be made explicit by slicing and processing that space, in a similar way to the smart guides tools in Adobe Illustrator or OmniGraffle. These are temporary guides created along frame edges, centers, and 45' angles, shown individually when the pointer is close to where they lie. OmniGraffle goes further, such as creating smart guides to help align an object equidistant between two others.
This kind of smart guides would be a useful feature for Scribus anyway, and although invisible, their relations could be constantly calculated and used to spot inconsistencies. For example, if a caption box has accidently become nudged out of alignment from its neighbours, there will be two (invisible) smart guides very close to each other. Or if an imagebox doesn't have a thin rule directly above it, and all others of a similar size repeatedly do, the designer could have forgotten to place one.
To remain unobtrusive, presenting this would happen after the basic layout has been made, when it is being fine-tuned. This is similar to the use of a spellchecker, which today has two modes of interaction: one being invoked and walking the user past each flagged item, the other very quietly marking any errors as they happpen.
For the first mode, perhaps the Scribus pre-press flight check tool's traffic light interface could be extended to listing frames with inconsistency and colour coding severity.
Like a normal spellchecker when the user clicks a list item it would zoom the canvas window to that item, and have last/next buttons to walk through the whole document. For the second mode, a similar icon to the overflow icon of the textbox frames could indicate an inconsistent setting associated with that frame. Unusual areas of white space could be highlighted by filling the area with a pulsing colour to draw attention to the area interactively.
Each mode creates a two stage process, first alerting the user of a possible problem, then presenting suggestions or the input of manual corrections. Presenting suggestions could be done in the same way, and need to present two views of the document showing the current and the suggested designs.
This could be done by splitting the canvas window into two panes tiled side by side for comparison. To ensure that spot the differences style frustration does not result, as the design check tool walks the user thought the suggestions, it could start the suggested design as the current one and morph into the suggested one with 37signals-style fading animation to indicate exactly what was changing. An option to make all the changes at once, with an immediate undo, could also be useful for giving the designer ideas about what to do next and would be less proscriptive.
For the second mode, the textbox frame icon or whitespace could trigger this animation when clicked, and the change would revert after a few seconds unless clicked while transformed to accept the suggestion.
In addition to the emergent internal properties of the layout, external design guidelines could also be applied to a document in this way. Many designers use concepts from the ancient greeks' aesthetics, such as frames with beautiful mathematical proportions like the golden section, and Robert Bringhurst's The Elements of Typographic Style contains guidelines such as the use of a mathematical scale to compose elements in a systematic way. These are general purpose, but there are some kinds of documents that have strict design guidelines, sometimes even legal requirements, such as the thin information sheets found inside medicines or accessible literature. Accessibility emphasised in modern web design, but is not as often considered in print design.
While The Elements of Typographic Style has more guidelines on inline typography rather than layout, the kind of typographic enhancements to plain text available in Textile could also be a useful addition to Scribus' Story Editor.
A Story Editor tool was first seen in Aldus PageMaker, and it gives an alternate view of all the text in a document and is used to assign predefined paragraph styles. Its interface could also be extended with design check functionality, being the natural home of the spell check.
Tetris
Suggestions could also be presented before the design process enters the fine tuning stage. Consider playing Tetris:
A canvas has blocks placed on it piece by piece, and each new block is rotated through different versions and fitted into the existing pieces. A palette on the right side has a preview of what comes next.
This sounds like a workflow style design process, with content files typically created by others and collected together in a folder for the designer to pour into pages piece by piece, in a unique way but following a house style. It even looks a little like it with Scribus' Scrapbook, where these content files can be pre-loaded for quick drag'n'drop access.
If the scrapbook was modified to record which items were not yet placed on the page and combined with the smart defaults functionality, perhaps unplaced items could previewed in a preview pane extension to the scrapbook. Combined with the suggestion functionality of the design check, perhaps pending items could even be automatically placed.
Continuing the above newspaper example, after the main article in a page has been placed, smaller parts such as advertisements could fill out the rest of the page in a way consistent with the house style.
The system would be expected to get things badly wrong at first, but as each item is placed the design would emerge and the system could incrementally improve - similar to the way early voice recognition software and todays spam filters have to be trained.
If several placements were possible, presenting several panes of the canvas window could be done like the Exposé feature of Mac OS X. This would also be useful for suggestions, such as if adjustments to a textbox's leading and justification were suggested, seeing each adjustment on its own and the two combined would be useful.
Evolution
The next step is to apply this to a whole page. If all the content is collected and ready to go in the scrapbook, and a style has emerged in previous pages, new pages could be automatically generated.
Consider a simple model of evolution: genes are code that dictates the way organs are expressed, and together the organs make an organism. Organisms with the same organs are a species, and over time selection pressure is applied to a species. Some organisms are adapted well to the pressure and produce another generation, while others aren't and don't, and the species evolves. After a few generations, hopefully a prime specimen is entered into Crufts.
This sounds a little like the design process. Code dictates the way content is expressed, and together the frames form a page design. Designs with the same content are a set, and selection pressure is applied to chose the best one. After a few generations, hopefully a prime specimen is entered into D&AD.
Instead of one page being generated, 30 different pages would be generated (perhaps including some random chances into the process) and set out in an Exposé style grid. Selection pressure can then be applied - "I like this bit and this bit, but want less like that or that" - to come up another set of 30 pages. After a few generations, hopefully one of them is a useful starting point and the designer has plenty of ideas.
This could go forwards and backwards through the family trees, working similarly to the Photoshop variations tool that presents colour variations in a "more like this, less like that" process for designers to "know it when they see it". This is exploring a phase space, and could allow suggestions to be combined in various ways.
Essences
If the style of a design can be extracted, extrapolated and applied like this, then those styles can be stored and a collection built up. So you could take, say, the Pushpin Studios catalogue, and reproduce all their designs in the system, and pull out the essence of their style. And then queue up some new content, and explore the phase space of results.
The Open Clipart Library has been growing for a few years, alongside the musical ccMixter and Wikipedia as centers of the Free Culture movement that began with Free Software. These models of Freely licensed content collections easily apply to this idea of design essenses, where a community of designers would share and develop permissively licensed design essenses and example results.
With many different styles at your fingertips, perhaps styles could be interpolated - "Typography like that, layout like that, and colours like that". Webservices can integrate webbased repositories with desktop software, and in Scribus this might look much like the current template system, flowing into the evolutionary system.
