In 2014, Type/Code came together with former client Blue Chalk Media to create an online publication that focuses on creators’ roles in the evolving world of multimedia journalism. Seeking to expand their contribution to the journalism community, BCM sought to build a platform that enabled guest contributors — in conjunction with their editorial team — to share in-depth stories, interviews, and creative tips relevant to the field. The result is a retrospective of features that chronicles our rapidly changing world, and the artists who have endeavored to tell its story in ways that have a lasting impact.
Blue Chalk Media had two primary constraints for the naming of the new journal: first, to linguistically retain a relationship with BCM as its parent company; and also, to be symbolic of original, gestural creation — accurately reflecting the kind of journalism that BCM hoped to proliferate.
The name Ochre was chosen because it succeeded in both respects. Ochre as a material has clear ties to the chalk medium, and its natural pigment — gold, orange, and red — is a color value complement to BCM’s azure-centric branding. As importantly, the object that inspired the name was one of the first innovations in visual communication — used to adorn the walls of the famous Lascaux Cave in France — making it a meaningful moniker for the storytelling community the BCM was trying to cultivate.
The process for creating the Ochre logotype was self-evident given the name — hand-drawn solutions would likely be most true to the brand. It was important to us and the client that the logotype felt gestural, not over-developed, and friendly enough to accurately reflect the collaborative network that would author the journal.
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
In 2015 was purchased by Northeastern University’s Media Innovation lab, where it serves as an active platform for the graduate students in the program