Brian Dys

Visual Variables

Visual Variables - Cover

Visual Variables is a workflow tool that leverages on graphical elements to represent sizes and dimensions in a design mock-up (wireframe or hi-fi).

It intends to simplify the translation of design mock-ups into style sheet language (e.g., CSS) or other markup language (e.g., XML) – specifically in the aspect of visual design (text sizes and layout spacing).

Download Sketch Template (138 KB)

Download Photoshop Template (202 KB)

Visual Variables Template
An image of the Visual Variables Photoshop Template

Similar to Animation Diagram, this tool is mostly based on basic ideas instead on technology (software, devices), so technically you could use colored pens and paper to practice this kind of workflow.

From Designer to Developer

For teams working on web products wherein design mock-ups are produced by designers and the actual working product is produced by developers, there is a communication gap that must be lessened. An aspect of this gap is about the intention of designers regarding sizes and dimensions of the visual design.

Typically, a design mock-up – whether a wireframe or a high fidelity mock-up – will get finalized for production and immediately will be turned over to a front-end designer (HTML, CSS) or a developer (app development). The receiving person must also have guideline to determine the values (sizes and dimensions) involved in the design. Although there are several techniques available for a developer to determine such values, it is the designer’s responsibility to ensure that the product comes out as designed visually – so, he or she must also provide for that guideline.

The Variables

Visual Variables uses variable names with predefined values. All values are in pixel unit and are based on 160 dpi resolution. The Medium (M) variable is deemed to be the normal size/dimension – not too big or too small for web products.

Size Variables

  • Extra-small (XS): 12px
  • Small (S): 14px
  • Medium (M): 18px
  • Large (L): 22px
  • Extra-large (XL): 28px
  • Double Extra-large (XXL): 36px

Likewise, margin, padding and any spacing that have defined or exact values are put in variable names in the form of colors.

Dimension Variables

  • Cyan: 4px
  • Magenta: 8px
  • Yellow: 16px
  • Green: 24px
  • Red: 32px
  • Blue: 48px
  • Gray: Content area

These two sets of variables, when used in a design mock-up, would greatly “annotate” the mock-up at hand. When used in a digital environment, the Dimension Variables could be used as guides for the layout of UI elements and the Size Variables could be used as placeholders for textual UI elements.

Using Visual Variables

Visual Variables - Mock-ups
Figure 1. Different levels of a mock-up with Visual Variables. Used in this example is a concept of the Profile screen of Chikka Text Messenger.

As mentioned earlier, Visual Variables is a workflow tool – first, it consists of the Size Variables and Dimension Variables and second, it must be employed during the development of the details of a visual design by using the Dimension Variables as guides for the margin, padding, and spacing between UI elements (otherwise, if done the other way around, it would be just like measuring and estimating dimensions – which will be time-consuming).

Mock-up Levels

These levels are recommended to lessen the clutter of information in a mock-up.

Level 1: Content Areas

The first level of usage is over spacing of content areas. This demonstrates the distances of components from each other.

Level 2: Component Details

The second level delves deeper into the details of those content areas in level 1. It includes both the text sizes and layout spacing of UI elements. For dimensions beyond the variables (colored blocks), one could use the generic Dimension Variable denoted by the gray color along with the exact pixel dimension of the UI element.

Text sizes are replaced by their Size Variable names which also act as text placeholders.

Afterword

The success of the usage of Visual Variables lies in two main points:

  1. For the users: the familiarity on the legend of the variables (although a legend could simply be made available with the mock-ups).
  2. For the creators: the ease of use of the variables in the form of vector symbols/layers/stencil in a digital environment. It should be as easy as toggling the visibility of the variables’ layers to produce the different levels of a mock-up.

Resources

—

Author: Brian Dys Sahagun