Beyond Grids

Abstract

Traditional graphic design tools emphasize the grid for structuring layout. Interviews with professional graphic designers revealed that they use surprisingly sophisticated structures that go beyond the grid, which we call graphical substrates. We present a framework to describe how designers establish graphical substrates based on properties extracted from concepts, content and context, and use them to compose layouts in both space and time. We developed two technology probes to explore how to embed graphical substrates into tools. Contextify lets designers tailor layouts according to each reader's intention and context; while Linkify lets designers create dynamic layouts based on relationships among content properties. We tested the probes with professional graphic designers, who all identified novel uses in their current projects. We incorporated their suggestions into, StyleBlocks, a prototype that reifies CSS declarations into interactive graphical substrates. Graphical substrates offer an untapped design space for tools that can help graphic designers generate personal layout structures.

Textlets: Supporting Constraints and Consistency in Text Documents

“…Beaudouin-Lafon's [3] Instrumental Interaction model extends and generalizes the principles of direct manipulation, and is operationalized by three design principles [5]: Reification turns commands into first class objects or instruments; polymorphism applies instruments to different types of objects; and reuse makes both user input and system output accessible for later use. Although they have been explored in the context of graphical editing [15,34]; our focus here is on text editing.…”

FileWeaver

“…Beaudouin-Lafon [1] describes substrates as computational media that hold digital information, possibly created by other substrates, manage constraints and dependencies, react to changes in both the information and the substrate, and generate information consumable by other substrates. Maudet et al [20] analyzed the constraints and rules that graphical designers manage in their heads and introduced digital tools that explicitly support these substrates. We follow a similar approach by identifying the types of substrates currently used by scientists in order to inform the design of more appropriate ones.…”

StructGraphics: Flexible Visualization Design through Data-Agnostic and Reusable Graphical Structures

“…Others have looked on how designers work with graphical structures. In particular, Maudet et al [23] point out that the creation of layout structures is an essential part of the graphics design process but also observe that many designers struggle when having to go beyond gridbased layouts. The authors argue that graphical properties must be described instead through versatile rules or constraints that they call "graphical substrates."…”

“…Thus, if the user turns the height of a bar from positive to negative , its fill color will not automatically change to blue. More generally, StructGraphics cannot express functional dependencies between properties, which would require more expressive visual languages, such as iVoLVER [26] or Linkify [23]. We defer the study of this problem to future work.…”