As an “information architect”, I tend to view most everything as comprised of discrete entities – or “components“.

The components fall into 2 main categories: presentational context and data content.

Presentational Context

In the UI design arena, the presentational context expresses the basic Information Architecture (the high-level organization of the content structure) through:


This skeletal layout of basic page elements is often referred to as a “template”


These identify the presentational attributes of generic page content elements (s.a. Title, Body, Button, etc.)

Branding & Icons

These graphic items afford illustration and identity

Styling themes

The website stylesheet “skin” is made of colors, fonts, graphics. the Zen Garden is a good example of how you can change context without affecting the content.

 Best Practices

This defines usage patterns through appropriate workflow, tasks, wizards, etc. “Search” is such a pattern, as is “Form Entry”.

Data Content

In a truly data-driven environment, the data content is populated automatically – It’s a “fill in the blanks” of templated information that might be driven by a content management system.

At a higher level the data content components can be more complex groups (s.a. Sharepointwebparts) that display several pieces of data.

Dashboard Components

Component: Big Data Factoid

These often appear in the top or index page of a section and reveal a “taste” or a “scent” of the information that resides further down the website tree structure. One-click drilldown access means usability.

  • The dashboard component invites you to examine the topic in depth.

Commentary Components

Component: Quote

In this site they often appear as branded panels (for example: Quotes).  These may – or may not – be clickable links.

  • These are a way to present observational asides within a page.

Referential Components

Component: Collateral

The usage of referential components is easily scalable: you can add or remove branded groups at will, and fill them with as much – or as little – content and links as you wish. This is a useful technique for growing the richness of the site by enhancing the focal topic without distracting from it.

Meaningful referential components are dependent upon robust Information Architecture tagging of data that defines the relationship among types of components.

  • These are often an aside – They take you laterally, creating connections across the topic area, rather than deeper. I call it “parenthetical wisdom“.

Collateral Components

big-data-dilbertThese are an efficient way to present common information across the site consistently.

In this WordPress Blog site the collateral links sometimes appear as panels in the sidebar.

  • The collateral component invites you to explore beyond the site content with consistency.

The mapping between context and content is maintained through “tags” in CSS or XML.

Individuals mastering these diverse disciplines are abundant, but not so those capable of inventiveness and less so those capable of subordinating that inventiveness to a rigorous and systematic plan. — Jorge Luis Borges


© The Communication Studio LLC