Specly is the best way to document, envision, and share digital design specs. It defines a set of constructs and conventions that lets everyone easily envision and share accurate, comprehensive specs for even the most sophisticated digital designs.
Specly Notation—the “language” of Specly—is a set of intuitive keywords and symbols, arranged in a logical order alongside values. Specly Notation empowers us to easily envision and share specs for digital designs without resorting to ad hoc diagrams, lengthy descriptions, or animated explanations.
A simple line of Specly Notation might look like this: 300x250. Too easy? Okay, a more sophisticated example might look like this P:768x1024 & L:1024x768 or this [300-320]x50 / 300x[250-300]. Don’t worry if any of those examples are illegible right now; the following documentation will have you reading and writing even more sophisticated Specly Notation in no time.
After a brief orientation, Specly Notation is immediately readable. It can therefore be incorporated seamlessly into any digital production workflow, adding new layers of efficiency and expanding creative possibilities.
After using Specly in your next project, you may wonder what you ever did without it!
First time readers are encouraged to thumb through the documentation in its entirety, in the order that it is presented. After reading it once from top to bottom, the below links are useful for jumping directly to specific sections.
Specly also provides strategies and solutions for several other key issues related to digital design specs:
Let’s dive in!
Since a pixel is the smallest physical element that can be controlled on a digital display, Specly Notation uses pixels as its primary/default unit of measure. Pixels have long been used by digital designers to specify sizes. But the question of what size the pixels actually are has become a bit thorny with the widespread adoption of high-density displays— screens that pack more, smaller pixels into the same amount of space so graphics can appear more crisp.
Until 2009, nearly every mobile, tablet, and computer screen had a pixel density of about 72 pixels per inch (PPI). Imagine dividing one inch on a ruler into 72 little slices. These “classic” screens—still very much in use today—are used as a baseline for digital designers and are said to have a pixel density of 1, or 1x.
Digital designers refer to pixel density using “@“ notation such as “@1x”, “@2x”, “@3x”, etc. Today, higher-density displays with 200+ PPI (@2x), 400+ PPI (@3x), and higher are common on handheld and tablet devices, and are also appearing more regularly on laptops, desktops, and even televisions.
The variance in pixel size across different screens can quickly create ambiguity and confusion when design specs are communicated: “What size pixels are we all referring to?”
In order to prevent misunderstandings with regard to pixel size and density, Specly Notation applies the following rules:
Using @1x pixels as the unit of measurement for most digital designs is often appropriate. Pixels are therefore the primary/default unit of measurement in Specly Notation. But other measurement units such as percentages, ems, points, and centimeters can be used in Specly Notation when they express something that pixels cannot.
When necessary, use other units of measure in Specly Notation by adding the unit name to the end of every number, just as a web developer might use them in CSS code. For example, writing 3em, 100%, [80pt-100pt], or even 18cm, in a line of Specly Notation would each be technically valid.
Using other units of measure in Specly Notation is somewhat experimental at this stage, so caveat emptor. Care should also be taken not to mix different units of measurement within a single line of Specly Notation—the only exception is percentages; although rarely necessary, percentages can theoretically be mixed alongside other units (including pixels).
Figure 1 (below) illustrates a simple, static design documented with Specly Notation. The design has a static/fixed width of 300 pixels and a static/fixed height of 250 pixels.
On the left side of Figure 1, the line of Specly Notation representing the design is shown in the larger blue text; it reads: 300x250. The diagram with the rectangle on the right side is a visual representation of the same design.
As you can see, Specly Notation adopts commonly used conventions but institutes them as standards for documenting digital designs with its intuitive system of constructs and conventions.
Creating digital designs that accommodate a range of dimensions is a common scenario. For example, if an app designer was tasked with creating a design that would fill the screen of an iPhone 4 and an iPhone 5, the designer may choose create a flexible design that accommodates both sizes.
Figure 2 (below) illustrates how Specly Notation is used to document flexible dimension ranges within a design.
Again, the line of Specly Notation appears on the left side in larger, blue text: 320x[480-568]. The diagram on the right is a visual representation of that same design.
Figure 2 (above) documents a design with a static width of 320 pixels, and a flexible height range of 480-568 pixels. In theory, this design could vertically shrink and grow at all the possible heights within the specified range: 480, 481, 482, 483, ...and so on, up to... 566, 567, and 568.)
Many mobile and tablet screens can be used in either portrait (tall) or landscape (wide) orientation.
Figure 3 (below) illustrates how Specly Notation is used to document a design containing an orientation-aware panel.
Figure 3 documents an orientation-aware design that (inherently) includes two layouts. The first orientation is prefixed with the P: symbol to indicate the layout(s) within it are for portrait orientation. The second orientation is prefixed with the L: symbol to indicate the layout(s) within it are for landscape orientation. The ampersand symbol & is used to separate the portrait and landscape orientations.
The design shown in Figure 3 (above) could conceivably be documented using a single, flexible design of [768-1024]x[768-1024]. However, such a notation may not provide a sufficient level of detail in other circumstances.
For example, what if each orientation’s layout had to accommodate its own unique range of heights? Such a situation can only be described with a line of Specly Notation, such as: P:768x[900-1024] & L:1024x[600-768]. Using a flexible, single-layout design instead ([768-1024]x[600-1024]) would likely lead to different design and/or development decisions, and would also not reveal details like the minimum height in portrait orientation being 900 pixels (in this theoretical example). A device’s orientation is often important for overall user experience considerations as well
Specly generally favors using the most specific and informative method for documenting a design.
Responsive designs consist of two or more layouts within a single panel. Responsive layouts are separated by breakpoints. Specly Notation uses the forward slash / to indicate breakpoints within a panel.
Figure 4 (above) documents a responsive design that includes four static layout sizes, each separated by breakpoints. Such a design might be useful for creating a single document that adapts responsively to various environments.
It should be noted that this example does not use flexible design techniques. Breakpoints indicate that the design will responsively “snap” between the layout sizes, not flexibly shrink and grow between them. For more information, please read the next bonus Q&A, below.
Flexible design serves different purposes from responsive design. As we’ll see later, flexible and responsive techniques can even be used simultaneously within the same design.
The example shown in Figure 4 (above) could conceivably be satisfied in a number of different ways that would yield a design compatible with the same four target sizes; for example, using a flexible design with a single layout of [300-320]x[50-300] would accomplish just that. However, such a flexible design would also (in this example) be “unnecessarily” compatible with many additional sizes such as 320x300 and every possible height between 50 and 300: 51, 52, 53, etc.
There is nothing inherently “wrong” with either spec, but they do carry different meanings. Creating a design that is compatible with unneeded sizes may take more time and resources for designers and developers.
Specly’s power lies in the ability it gives us to express differences such as these and communicate exactly what we mean.
Multi-panel designs use separate panel areas in the finished piece of work. The separate panels might be displayed one at a time, or multiple panels might be visible simultaneously. In some cases, separate panels may be shown on the same screen. In other cases, separate panels may be shown on different screens. Specly Notation has ways to help us communicate such scenarios.
One common example of multi-panel design is an expandable advertisement—an ad where a user interacts with one panel of an ad to reveal a second (usually larger) panel of the same ad. Other examples include mobile or tablet apps that can “cast” app content to a second screen, or so-called “companion ads” where two digital ads on the same page might display marketing messages in concert.
Specly Notation provides two ways to document multi-panel designs: using either the to or with keywords.
Figure 5 (below) illustrates an example multi-panel design whose panels are displayed individually, one at a time. This example might be representative of the design for an expandable advertisement appearing on a mobile phone.
Figure 6 (below), illustrates an example multi-panel design whose panels are displayed simultaneously, at the same time. This example might be representative of the design for a mobile handset app that “casts” content to an HD television screen.
Multi-panel designs are a close cousin to orientation-aware designs, but each design method serves an entirely different purpose. Orientation-awareness is applied to individual panels that contain a portrait and landscape layout. A multi-panel design could therefore include multiple orientation-aware panels. Upcoming examples will illustrate such a case.
The previously described Specly Notation techniques for Static, Flexible, Orientation-Aware, Responsive, and Multi-Panel—can be combined, to form even more powerful Specly Notations, as shown in the Combination Design examples that follow.
Flexible layouts are often used within responsive panels. Figure 7 (below) illustrates a simple example.
Figure 8 (below) illustrates a multi-panel, orientation-aware, responsive design that uses both flexible and static layouts.
Although it may seem somewhat complex at first, this Specly Notation serves as the design for an “expandable” ad unit that could be served into numerous rich media mobile and tablet ad placements in apps and websites.
Within panel #1, the initial (collapsed) banner sizes that this expandable ad unit would be compatible with are shown to the left of the to keyword: [300-320]x50 and 728x90. 300x50 and 320x50 are common ad placement sizes for handset apps and websites. 728x90 is a common ad placement size on tablet apps and websites. Panel #1 in this design is not orientation-aware simply because orientation-awareness is not required there.
Within panel #2, the “expanded panel” sizes are shown to the left of the to keyword. A single, orientation-aware panel encloses two pairs of responsive layouts, one pair for the portrait orientation and another pair for the landscape orientation. This expanded panel design happens to be compatible with many mobile browser and app ad placements on iOS handsets and tablets. The flexible layouts ensure that the panel will fill the entire browser viewport or the full screen of the device, when possible.
Perhaps it’s not difficult to imagine extending this example to add compatibility for 320x250 placement sizes as well; to do so, we would add a 2nd breakpoint / to panel #1, followed by a 3rd, static 300x250 layout, all before the to keyword.
In some cases, a particular design dimension, or one of the limits of a dimension range, are not important to the end product. For example, in web design, the overall height of page content may vary depending on article length, the text size, column width, and other factors. And since vertical scrolling is a generally assumed navigation technique in web browsers, the overall height of a web page itself is often inconsequential to the design.
For this reason, websites that use responsive design techniques often base their rendered appearances solely on the width of the browser viewport. The height of the viewport and the height of the web page itself are often outside the designer’s control anyway. Specly Notation allows us to document such cases with the [any] keyword.
The example in Figure 9 (below) uses Specly Notation to document the responsive design applied by Bootstrap 3, a popular CSS framework.
The Bootstrap 3 CSS framework defines a responsive grid system with five core layouts based on a web browser’s width (in pixels). Since the height of a web browser is variable and generally assumed to be of “sufficient height” to allow use of the website itself, the height dimensions are inconsequential to the design; Specly Notation’s [any] keyword allows such a situation to be clearly documented and easily understood.
The [any] keyword is also used in this example in the place of inconsequential dimension range limits. In Figure 9 (above), width range #1 [any-480] and width range #5 [1200-any] both use the [any] keyword to express inconsequential range limits.
In some scenarios, a panel may be used in various places where portions of certain layouts in the panel are obscured or “cut off” in predictable ways. In these cases, designers can apply a “safe area” to keep the crucial elements in their designs—logos, text, buttons, etc.—visible at all times. It is expected that portions of non-crucial design elements—background images, etc.—that are outside the safe area may not be visible in certain scenarios.
Specly Notation uses the upper-case (S:) container—always wrapped in parenthesis ( and )—to indicate that a required, centered safe area should be applied to all layouts within the same panel.
Figure 10 (below) illustrates a simple example of applying a safe area layout to a panel design.
Design and production teams may choose to apply a safe area to their designs even when not required by external factors in order to save time and resources by creating a single, static design that can be applied to multiple settings.
Layouts are sometimes required to have round corners. Specly Notation provides a simple method for indicating such scenarios.
Specly Notation uses the upper-case (R:#) container—always wrapped in parenthesis ( and )—to indicate that the preceeding layout has rounded corners.
Figure 11 (below) illustrates a simple example of applying rounded corners to a layout.
Rounded corners are expressed as a radius whose centerpoint is equidistant from its respective edges.
Rounded corners should only be specified in Specly Notation when they are required by the shape of the screen or an outer container. Rounded corners should never to be used in Specly Notation merely to express stylistic preference.
Radius notation can also be used to express fully circular layouts and shown in Figure 12 (below). That example might be the specification for the screen of a wearable device.
In the case of round screens, the numeric value of the radius should never exceed one-half the smallest width or height dimension of the layout it applies to.
|layout||A layout is a set of width and height dimensions separated by the x keyword.|
|panel||A panel is a set of one or more layouts, potentially including a safe area layout as well.|
|orientation||An orientation, is a set of one or more layouts presented in one of a screen’s two aspect ratios. Portrait refers to the screens “tall” aspect ratio. Landscape refers to the “wide” aspect ratio.|
|x||The x character—spoken in English as “by”—is used to separate width dimensions from height dimensions. Width is listed first, to the left of the x. Height is listed second, to the right of the x.|
|[ ]||Pairs of square brackets [ and ] are used to enclose a dimension range—a range of width dimensions or a range of height dimensions.|
|-||The dash - character—spoken in English as “through”—is used to separate minimum and maximum dimensions within a width or height range, such as: [300-320].|
|[any]||The [any] keyword is used in place of numeric dimensions when all or part of a particular dimension range is inconsequential to the design. The [any] keyword is also used in place of upper or lower range limits that are inconsequential, often meaning “zero” or “infinite”, i.e., [any-480] or [1200-any]. The [any] keyword is always wrapped in square brackets.|
|/||The slash symbol / is used to separate two or more layouts in a responsive panel. The slash symbol is referred to as a breakpoint and can be spoken in English as “break”.|
|&||The ampersand symbol &—spoken in English as “and"—separates portrait and landscape layouts in an orientation-aware panel.|
|P:||The upper-case P: prefix is used before the portrait (tall) layout(s) in orientation-aware panels.|
|L:||The upper-case L: prefix is used before the landscape (wide) layout(s) in orientation-aware panels.|
|to||The to keyword is used when multiple panels in a design are displayed individually, one at a time. One panel might cover or simply replace the other panel, or an animation may provide a visual transition between the two panel states.|
|with||The with keyword is used when multiple panels in a design are displayed simultaneously, at the same time, whether they appear on the same screen or on different screens.|
|(S:)||The upper-case (S:) container—always wrapped in parentheses—indicates that a required, centered “safe area” should be applied to all layouts within the panel. A safe area is a horizontally and vertically centered space intended to contain the “required elements” of a design, such as logos, text, and interactive elements that should always remain visible. It is implied that any elements or background images positioned outside the safe area may not be visible in certain scenarios.|
|(R:#)||The upper-case (R:#) container—always wrapped in parentheses—indicates the radius of required rounded corners for the preceeding layout. The numeric value of the radius should never exceed one-half of the smallest width or height dmension of the layout it applies to.|
|%||The percentage symbol % is placed immediately after numeric dimensions to express a relative dimension instead of an absolute dimension. Using percentages in Specly Notation is less specific and therefore uncommon.|
|px, pt, em, cm, etc.||Although Specly Notation uses @1x pixels as its default unit of measure, other measurement units are not forbidden, as long as: (1) they are inserted immediately after the numeral they apply to, and (2) the line of Specly Notation does not mix units. Using non-pixel units in Specly Notation is a less explored area of research, so it should be considered in “alpha” stage. Caveat emptor!|