A team at Columbia’s Department of Computer Science asked us develop a publishing platform, editorial design system, and graphic identity for a new digital publication focused on educating and engaging the public on digital security and privacy.
Decipher’s mission and ethos are populist, a contrast to the corporate elitism and technical abstruseness that define its industry. Grounded in an interplay of the institutional and the subversive, the visual language reflects how ordinary people find expressiveness in mundane technologies like office software and plain text.
Manipulating Unicode to produce stylized text illustrates how ordinary users find novelty and self-expression in the most ubiquitous of technologies. This transparently highlights how the technology itself works, reflecting the instructional mandate of the publication.
These styles can be used in combination to create a ransom note effect that represents the publications identity, or individually to provide a more distinctive voice.
System fonts like Times New Roman and Arial are the visual voice of both solitary office workers and formal institutions. They provide a sober foundation for Decipher’s exotic typographic treatments.
Decipher’s core identity elements leverage text treatments in different ways, depending on context and scale. At larger sizes and when using the entire name of the publication, use ransom note styling. This gives an overall sense of the type system, allows for motion, and projects a bold and subversive identity. At smaller sizes, we use Zalgo styling to highlight the name of the publication amidst other text. For social media avatars and small iconographic applications, the logo is further reduced to a collection of randomly animating diacritics.
Decipher’s website uses different type treatments to express a unique identity for each article, maintaining a consistent color palette and layout to bring the composition together. The design of metadata and headers is inspired by the headers and footers that browers insert on printed webpages, which continues the theme of finding expression the gaps of ubiquitous tools.
Loading animations imitate missing Unicode characters to highlight the roots of the typographic treatment and suggest a literal process of decryption.
Decipher provides each article with a custom editorial design that reflects the tone of the subject matter while adding a sense of variety and controlled chaos to the site. This allows the publication’s staff to set a visual mood for each article simply by rating its tone along four dimensions.
Decipher’s color palette is derived from six primary and complementary hues resulting from combinations of red, green, and blue pixels. This transparently illustrates the RGB color model that drives computer displays while maintaining visual intensity and evoking the early web.
Even thoough the website itself and the logo generator tool implemented most aspects of the identity in code, we delivered a traditional design guidelines site to allow Decipher’s staff to apply the system in unanticipated contexts.
In addition to a content management system, we delivered a tool that generates logos at various scales as well as stylized text, allowing for use of the system in other contexts.