Building out the brand collateral allowed us to get our hands dirty in a way not many projects afford. While Ochre elected to forgo the usual suite of business cards and stationery, T/C suggested they use a palette of original imagery in their brand communications as a way to unify their content, given that all of their other imagery would be contributed by their guest authors. We experimented with several ink rolling and graphite techniques that resulted in a satisfying palette of textures.
Knowing the platform would be run by multiple authors, Type/Code’s implementation needed to extend beyond a fill-in-the-template approach. Every story in the journal would require a unique structure, and to accommodate this we developed a CMS that allowed authors to build articles in a modular, extensible fashion.
Providing a palette of block elements (and inline editing capabilities within those) afforded a compositional range that template-based systems simply cannot accommodate. Contributors are now able to build their pieces to mimic their narrative structure, without compromising on the visual cohesion of the journal as a whole. The approach worked — and not just for this client. While Ochre was novel in its implementation at the time of launch, modular compositional platforms are becoming more common each day, and we’ve moved towards this model for most of our projects after Ochre.
BCM articulated two main design concerns for Ochre: that it immerses readers in its content, and that it be enjoyable to read in any setting. To address the former, we kept the architecture of the site simple: a homepage whose main focus was to highlight the latest features, clear in-article navigation to new content, and a prominently featured archive with simple filters.
The latter goal was more difficult to achieve. Journals like Ochre present a unique responsive challenge in that they are read on innumerable devices of varying size. When compounded with the site’s responsibility to showcase images and video without compromising the aspect ratio of any media, the challenge of proper presentation increased significantly.
Released only a few months earlier, CSS viewport units
vw provided us with a tremendous opportunity. Using these units allowed us to scale media containers proportionately, relative to viewport width — making possible features like proportionately scaling square media containers, and aspect-ratio locked heros that grow fluidly to fill the screen. The flexibility afforded by viewport units came at a cost, however; the new attributes were not fully cross-browser compatible at the time of implementation, and Type/Code was required to negotiate some cross-browser quirks specifically related to
vw handling. Ultimately this was achieved, and the result was an elegant reading experience that did not compromise on media presentation on any device.
The armature complete (and well-oiled), exhaustive rounds of typographic exploration commenced — resulting in a unique font pairing: Tiempos, for its screen-friendliness and readability; and Regular, a modern-sans, to weigh against the traditional character of Tiempos and mirror the journal’s “old-school-learns-new-tricks” content. The end result? A home for a rich array of content that is both deeply engaging and readily accessible.
We entrusted Type/Code with creating our website and company blog in the first few months of our business. Three years on, our site continues to bring in business and compliments — we couldn’t be happier with the result!— Lisa Jamhoury, Chief Digital Officer