Responses by Tom Tian, designer and Matt Soria, developer, Firebelly

Background: We cannot build better worlds without imagining them first. Facilitated by Illinois Humanities, the mission of Envisioning Justice and its site is precisely that: to offer Chicagoans of all stripes a forum for discussing how they can use the arts and humanities to highlight and reduce the criminal justice system’s depredations.

Highlights: To help the public join a broader movement to identify and mitigate the negative impacts of the criminal justice system, the site lists and maps out events and resources, while providing a space where users may share personal stories. The design deliberately eschews horizontal lines in favor of diagonals and variable marks to distance itself from more conventional, orthogonal layouts.

Challenges: We needed to build a method for implementing the angled edges so that they could be used across the site in several different contexts. Because the angle of the edges mirror an element of the logo, precision was critical—we had to maintain the exact degree of each angle while maintaining proper padding for each distinct section’s content.

Favorite details: The cursor-following field lines. It’s such a simple interaction that really helps bring things to life.

Anything new: The ability to design directly atop wireframes using established symbol libraries vastly improved overall efficiency, as did using Craft to bring in live content so that we could better accommodate edge cases. We also created a flexible form to make it as easy as possible for users to share their stories and accompanying photos. Ease of use—for both visitors and site administrators—was a priority, so we wanted to ensure this feature was as user-friendly as possible.

Technical features: The repeating angled dashes that appear in various places throughout the site were built to rotate based on the movement of the user’s cursor. We put work into smoothing it out, without making too much of an imprint on the page speed. This automatically builds out the grid of “slashes” with however many rows are required by the design from one area to the next. We also designed and produced this site almost entirely in Sketch.