Pattern library

The Lego kit approach to design (and development) thinking. If a design can be deconstructed into ‘kit form’ successfully, the pieces can then be used recombined to create new components quickly and easily. Documentation resulting from a pattern library also serves as a useful communication tool for managers, designers and developers.

From a designer’s perspective I find the process of deconstructing a webpage design into components shines a light on the language of design. Breaking pages into components, and then into elements, forces each element to be given due consideration of purpose and design. Ambiguous intent is confronted and the overall design language unified as base elements are committed to the library and larger components amended to be comprised only of these base elements.


Display one, from a set of, multiple content blocks. This element is coupled with another component to operate the change over of visible content.

Note: Carousel is displayed with tabs (button styling) here to demonstrate functionality.


Grouped set of links that track click state. Tabs are typically used to control a carousel or similar component.

Default styling

Modified styling to appear as buttons

Content summary

Summarising a piece of content, typically combined with a link to that content or the entire entry being a link.

Agfa Optima Ia with AGFA COLOR-AGNAR 1:2.8 /4 5 lens.

Agfa Optima 1a

First produced in 1962, the Agfa Optima 1a was one of the first fully automatic 35mm film cameras. The successor to German camera manufacturer Agfa's Optima 1 camera, the camera employed a selenium cell, which provided the power required to read the light level for the automatic calculation of aperture and shutter speed.

Photo by CEphoto, Uwe Aranas [source]