• Date

    2019

  • Category

    • Identity
    • Web
    • Computational Design
    • Development

  • Industry

    • Technology
    • Education

  • Client

    Columbia University

  • Lead

    Nio Ono

  • Development

    David Lu

  • Design

Decipher logotype

Introduction

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.

Type

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.

Type treatment

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.

Type styles

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.

Typefaces

Logo

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.

Logos at different scales

Web

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.

Web home

Loading animations imitate missing Unicode characters to highlight the roots of the typographic treatment and suggest a literal process of decryption. 

Web entrance animation

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. 

Web article layout
Web article layout
Web article layout

Color

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.

Decipher color palette

Applications

Letterhead and business card front and back
Letterhead and business card front and back
Slide presentation template
Decipher Instagram page

Tools

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.

Decipher identity guidelines site
Decipher identity guidelines site

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.

Decipher logo and type style generator