by

The layers of Design

Ogres and onions have layers…

And so do websites. Depending on who you’re talking to and how they’re slicing it, you’ll get different names that essentially represent the same thing: content, design, and functionality. While the end user looks at a site and sees seamless pages linking to one another, the content authors, designers, and developers see the website as a collection of layers that interact with each other.  As content strategies become more complex, we see content being sliced into more distinct layers for content management systems while the design gets treated as a flat, layer-less component of the site.

We shouldn’t give the design second-class treatment. Its own layers make it complex and deserving of attention. After all, the design is meant to support content – so it deserves to be layered and managed in a CMS as distinctly as the content it’s supporting. Let’s recognize a design as being composed of three sub-layers: brand, layout, and content flow.

  • The brand layer consists of the colors, logos, and interactive elements that are unique to the organization.
  • The layout layer is simply the size and positioning of major elements of the page.
  • The text layer consists of the design elements that are responsible for the visual hierarchy of  page content:
    • font size and color of primary and secondary content
    • borders and outlines for text and images
    •  interactive and responsive elements such as alt text, tool tips and title text
    • images, audio, and video
    • interactive elements such as widgets and podcasts

    The Brand Layer

    An organization’s brand can be very hard to identify to an outsider because it can be based on emotions and perceptions rather than hard metrics. Just remember that a company’s brand lets the user not only identify the organization, but feel trust and confidence in the business as well. While some of these elements of the brand can be centered around the mission statement or how to engage with the publich, other elements of the brand can be quantified as it manifests itself in the design. For simplicity, I’ll call this the visual brand —this is the brand layer I’m talking about.  Here’s a few exercises you can try to identify the visual brand of the website:

    1. First consult your organization’s brand guide (if one exists). Colors, typefaces, use of logos and images, and leading which may be specified in the brand guide are all components of the brand layer
    2. Print the web page. The stuff that’s missing which made the web page identifiable is probably the brand.  This is still defining via a negation, though.
    3. Turn off the stylesheet alltogether (it’s not that hard through Chrome’s dev window, or FireBug) and then start adding the things that make the website’s brand recognizable
    4. If this were a case of skinning or rebranding the site, these are the design elements you must touch, therefore the brand layer is not padding, margin, layout, or possibly even font-sizes or widths.

    In non-technical terms, I would state that these design elements are part of the brand.

    • Text
      • Typeface, font families
      • color
      • unique style and decoration (italic, underlined, bold)
      • kerning, letter spacing
      • effects like shadows and strokes
      • font size
    • Interactive elements (buttons, input boxes, links)
      • background color
      • border style and color
      • shape, suck as border radius
      • effects such as box shadows, strokes
    • Logos and icons

    From a technical angle, you can run through a stylesheet and look at the properties. W3schools.com has organized the CSS properties by “property groups”:

    • Animation
    • Background
    • Border and Outline
    • color
    • Font
    • List
    • Text
    • Transition
    • User Interface
    • Transforms

    The Layout Layer

    The Layout Layer is more self-explanatory. This is the layer responsible for the user’s ability to interpret the content hierarchy on the page; so it’s essentially the wrappers on the page.I believe that you can identify your layout layer both through the HTML elements — and the CSS properties applied to those elements.

    If you wanted a list of HTML5 elements whose CSS generally contribute to layout, I’d refer you to these. The pattern is that they’re all either sectioning, or block elements. (in fact, I read  Eric Meyer’s HTML5 reset to get the  block elements)

    html, body, div, article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section

    It’s always possible that p, h1-h6, blockquote, cite and others have a hand in the layout, in which case their positions should be classified as layout, while color and shape remains brand. If you need a second way to identify the layers of design, I’d point to anything in the stylesheet with positioning attributes, as well as items with floats.

    I find that in practice, the Layout Layer has two sublayers: page template, and page wrappers. The templating layer is responsible for whether the dimensions of the page (height, width, positioning). The wrappers are where major sections are positioned (header, content regions, columns, footer).

    The Content Flow Layer

    I thought of about 5 different names for this layer, but I’m just playing off of the HTML specs because I can’t think of a more descriptive term. The Content Flow layer is tied directly to your ability to recognize the meaning of different types of content. Brand is the uniqueness of the website, but Content Flow is the uniqueness of the content. In a practical sense, content flow is font size, font weight, decoration, alignment, indenting, and possibly line-height and padding. In fact, these are the properties I would skim in a stylesheet.

    An excellent exercise is to take a web page and apply only the Eric Meyer CSS reset, this essentially makes every element look the same. So now the things you do to make lists look like lists, and quotes look like quotes are often what you can label as content flow. In fact, I read through the W3Cs specification on HTML5 elements and I feel that the Grouping Content and Text Level Semantics sections are equivalents to this layer of design.
    span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, kbd, bdi, bdo, q, s, samp,
    small, strike, strong, sub, sup, tt,
    b, u, i, dl, dt, dd, ol, ul, li,summary, time, mark

    So why does it all matter?

    In truth, my hope is that CMS would manage each layer distinctly. This means that each aspect of the design can be syndicated very rapidly; a new microsite can be branded in minutes with the same stylesheet as the big corporate site, a new corporate site can keep the same layout as an existing one, or the content from a blog article looks good wherever it’s displayed on a page. This is, in fact, a very lengthy thesis, but first, I wanted to get the ground-work in place. Your web design has layers. Like Shrek. And Onions.