{"id":16636,"date":"2026-01-02T20:55:38","date_gmt":"2026-01-02T20:55:38","guid":{"rendered":"https:\/\/blog.tubikstudio.com\/?p=16636"},"modified":"2026-04-06T12:12:00","modified_gmt":"2026-04-06T12:12:00","slug":"designing-for-justice-jailhouse-lawyers","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/designing-for-justice-jailhouse-lawyers\/","title":{"rendered":"Designing for Justice: Telling the Story of Jailhouse Lawyers"},"content":{"rendered":"

Some stories aren\u2019t told in courtrooms. They\u2019re scribbled in the margins of legal briefs, whispered through cell bars, or stitched into the quiet resilience of those fighting for justice from the inside.<\/span><\/p>\n

That\u2019s the story we were invited to help tell.<\/span><\/p>\n

Our long-standing partner Zealous\u2014an organization amplifying justice movements through storytelling and media\u2014reached out with a new collaboration. Together with the <\/span>Jailhouse Lawyers Initiative<\/span><\/i> at NYU School of Law, they were launching a campaign to spotlight jailhouse lawyers: incarcerated and formerly incarcerated individuals who study the law to advocate for themselves and their communities.<\/span><\/p>\n

The campaign had many layers\u2014policy, memory, movement\u2014and we were brought in to shape one of its core pieces: an interactive visual timeline website that would trace the history, voices, and impact of jailhouse lawyers over the years.<\/span><\/p>\n

It had to be informative. Emotional. Navigable. And alive.<\/span><\/p>\n

Translating History into Design<\/span><\/h2>\n

\"\"<\/p>\n

We began with research, not layouts. Pages of legal documentation, audio recordings, archival letters, and video interviews. What we received was not just reference\u2014it was testimony. Rich with historical nuance and personal accounts that demanded a careful, intentional design approach.<\/span><\/p>\n

Our task was to translate legal history into visual rhythm. Not oversimplified, not overly embellished. Something direct and respectful, yet visually striking enough to invite curiosity.<\/span><\/p>\n

The visual direction was inspired by existing activist and legal design materials, but we didn\u2019t want to copy. We aimed to elevate\u2014to balance the weight of the subject matter with a clarity and tension that kept the viewer reading.<\/span><\/p>\n

We looked at 70s legal posters. Protest art. Paperback law books. Movie title cards. The reference wall was a mix of grit and structure.<\/span><\/p>\n

From Case Law to Collage: Building the Story Structure<\/span><\/h2>\n

\"\"<\/p>\n

The core of the site is a horizontal-scroll timeline\u2014each decade unspooling as the user moves sideways, not down. This wasn\u2019t just a creative choice. It was a metaphor. Because this story doesn\u2019t climb a ladder\u2014it moves forward against resistance. Period by period, policy by policy.<\/span><\/p>\n

Each section tells part of the movement\u2019s evolution\u2014with photographs, quotes, and stories pulled from legal records and personal archives. The challenge? Making dense legal text readable and emotionally resonant without losing factual precision.<\/span><\/p>\n

To do that, we built:<\/span><\/p>\n

    \n
  • Visual anchors<\/b>: Full-screen illustrations, document scans, collaged headlines\u2014each designed to stop the scroll and ground the reader.<\/span><\/li>\n
  • Micro-narratives<\/b>: Instead of one continuous history, we broke content into story blocks. Each had a beginning, middle, and end\u2014letting users dip in and out without losing context.<\/span><\/li>\n
  • Authentic texture<\/b>: We worked with handwritten annotations, scanned prison mail, and real case excerpts to make sure every visual felt human, not generic.<\/span><\/li>\n<\/ul>\n

    And when a quote or photo felt too clean, we roughed it up. Not to distort, but to reflect the reality behind the words.<\/span><\/p>\n

    Designed in Webflow. Built to Move.<\/span><\/h2>\n

    We built the full website in Webflow. That meant a close dance between design and development\u2014especially when handling horizontal scroll and complex animations.<\/span><\/p>\n

    Since horizontal layouts don\u2019t play by typical viewport rules, it was all about sizing and responsiveness.<\/span><\/p>\n

    So we split logic:<\/span><\/p>\n

      \n
    • Vertical elements sized with <\/span>vw<\/b><\/li>\n
    • Horizontal sections sized with <\/span>vh<\/b><\/li>\n<\/ul>\n

      That gave us precise control over spacing, padding, and scaling\u2014across all devices, without distortion.<\/span><\/p>\n

      To support the scroll behavior, we integrated Lenis, an open-source scroll-smoothing library. Lightweight, flexible, and easy to customize, it gave us the control we needed to make horizontal navigation feel as fluid as flipping through a book.<\/span><\/p>\n

      When Native Tools Weren\u2019t Enough<\/span><\/h2>\n