• Date

    2020

  • Category

    • Identity
    • Visual
    • Front-End Development

  • Industry

    • Technology
    • Law

  • Client

    Antimander.org

  • Design

    Nio Ono

  • Development

Introduction

Antimander is an open source initiative and research project aimed at combating gerrymandering by allowing anyone—from citizens to legislators—to generate optimal congressional maps, and by establishing objective metrics for electoral fairness. I worked with the project’s creator to establish a visual identity for the project and contribute to its front-end development and visual design.

Ethos

The visual language is rooted in the need to communicate to two very different audiences: software engineers and legal and political actors. In developing the concept, we identified a number of qualities valued by both these communities, such as objectivity, precision, and openness. We also identified characteristics of one audience that are antithetical to the other, such as the traditionalism of the legal system vs. the transience of technology. These qualities formed the foundation of the graphic system, with different elements corresponding to different characteristics.

Identity

The symbol is a direct visual metaphor of the project along several dimensions, referencing…

  • The endlessly varying shapes of congressional districts themselves;
  • Asymptotic curves on a cartesian coordinate plane, evoking both the distribution of computed districts and the general idea of mathematics;
  • Rectilinearity that echos the computational nature of the project and provides a crisp, hyper-rational juxtaposition to the ugly irrationality of gerrymandered districts;
  • Cross-hairs, suggesting precision and the use of graphics.

Contrast between the rough outer edges and the unchanging perpendicular center, hinting at the tug-of-war between optimization and arbitrariness that defines the process of districting. The more complex geometry preserves the distinctiveness of the symbol in the absence of color or gradients and at much smaller sizes, and creates potential for motion.

The logotype—and typographic language as a whole—expresses both the technical and traditional. By becoming more or less pixellated, it can vary its expressiveness or readability depending on context, and italicization breaks the orthogonality of the system while implying forward momentum, activism, and urgency.

The central axes of the symbol provide axes of alignment that allow for lively and asymmetric lockups with the logotype, as well as opportunites for integration with larger compositions.

Type

The typographic language is based on two open source typefaces: Redaction and VG5000. Redaction blends the juristic and technologic aspects of the identity, at a variety of levels of expressiveness and readability. In addition, the origins of Redaction as a typeface for a MoMA exhibit on the criminal justice system are perfectly aligned with the mission of Antimander. Used in limited contexts, VG5000 provides a strong contrast to its counterpart, evoking the casual and quirky nature of the open source community, while echoing the theme of pixellation that spans the whole visual system.

Color

Being about the American political system, Antimander’s colors are naturally red, white, and blue. We softened and brightened the blue and red and warmed up the white to contrast the rectilinear, digital geometry and symmetrical layout of the system. These three tonal palettes are also joined to form a gradient corresponding to partisan outcomes.

These are supported by a sunny yellow which acts as non-partisan but highly energetic color for interface components and to indicate interactive states. Green and purple serve as secondary non-semantic hues, making for an overall color palette that feels primary and educational, reflecting the importance of public education in Antimander’s mission.

Icons

Antimander’s icon system adds a degree of levity and nostalgia to its identity. Based on a rudimentary eight-pixel grid and always oversized, they emphasize the approachability of the project in a way that stays true to its technical origins. Custom cursors were also provided, drawing attention to the interactive aspects of the launch website.

Website

Antimander was launched via a comprehensive website providing an overview of the project and detailing the research behind it. We wanted the website to borrow certain aspects of its visuals from textbooks and academic papers—especially since the project originated in an academic paper—but also remain unique and engaging for a non-technical audience. The bilateral symmetry of the layout echos both the American partisan divide and the distinction between legal and mathematical ways of thinking at the heart of the project.

Applications