the Components

Presentation

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

Wireframes

This skeletal layout is often referred to as a "template"

Styleguides

These identify the 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. StyleSwitcher 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".

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. Sharepoint webparts) that display several pieces of data.

Dashboard Components

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 MegaMenu on the Home/Landing page is an example of a dashboard "window" into the information that bubbles up from below.

Referential Components

These are a way to present different types of commentary within a page. In this site they often appear as branded panels in the sidebar (currently: Deliverables, Relevant Info, For Example, Inspiration, Quotes).

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

This is a useful technique for growing the richness of the site by enhancing the focal topic without distracting from it. 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.

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

 

Collateral Components

These are an efficient way to present common information across the site consistently. In this site they often appear as popups in a new browser window.

There is a purpose to placing the collateral component in a "popup" window. Although it is possible to integrate the collateral as a part of the mainwindow.