Tell their history through design
Our long-standing partner, an organization that challenges injustice through media, stories and art, together with the initiative of the prison lawyers at the NYU School of Law, approached us to become a member of their prison campaign for Jailhouse advocaten to increase work about the work of the current and former prisoners as human rights as human rights. Justice changes.
We are invited to make different parts of the campaign website. One of the most important project aspects was a visual timeline that followed the history and growth of prison lawyers and presented their impact on the legal system.
Look & feel
We started the project by diving into a detailed historical document full of legal terminology, plus audio recordings, videos and letters from the community. This research helped us understand the context and to record the personal stories behind the legal movement.
Although the client’s first inspiration for the visuals came from an existing project of prison lawyers, our goal was to refine it, with the visual harmony balanced with the necessary feeling of tension. We have worked on color and typography choices and created design guidelines to stay consistent with the original style while we increase them.
“We used film posters, vintage posters, book covers and legal cases as references to strengthen the concept of stories.”
Making stories of legal texts
The most important challenge was to transform dense, formal legal content into a fascinating story that feels human. To solve this, we:
- Recorded details from the life of the individuals mentioned, to improve his personal touch.
- Used visual anchors to give readers a glimpse of the general story, so that they are encouraged in the text in the text that each story presented as an individual copy by designing collages, streamlining text in documents and aligning all content to a consistent style.
- Used personal photos and archived documents for authenticity. Our research for references mainly included film and book covers, together with actual stories of prisoners.
By combining personal histories with a structured, consistent design, the website now brings out the voices of prison lawyers who are visible and compelling for a wider audience.
Behind the build
Just like other projects in our studio, it was fully developed in Web flow. Because most of the site is based horizontal scrollingOur first challenge was to decide which units to use for the format of elements on the page.
We have ended up this approach:
- Sections and elements that scroll vertical were using use VW
- Sections and elements that scroll horizontal were using use VH
This setup helped us to maintain consistent pedings and proportions in horizontally scrolling sections, making them look exactly in the design – regardless of the screen size.
Scroll -behavior
We used to create a smooth scrolling experience TenderlyAn open-source library through Dark room. Engineering. It was easy to integrate – only a few lines of code – and gave us full control over the scroll speed and slipperiness.
Animations
Where possible, we used the built -in animation tools from WebFlow, either with Scroll or user interaction.
But when our ideas went beyond what WebFlow Native can handle, we added adjusted scripts. For example:
- Word by Word Animate of heads as they appear in the viewport (existing solutions did not work well with horizontal scroll, so we have built it all the way again)
- Subsections switch at Hover in a period block in the hero part
- Change stacking content cards one by one on the click
The hand-drawn Doodle elements that you can see throughout the site were animated in after effects and embedded as gifs.
Performance and optimization
During the development we considered keeping all content on a single page or to split in separate pages for each period – especially because the site contains a lot of visual assets.
Multiple pages may have helped with the loading speed, but have introduced UX challenges:
- How to guarantee a seamless transition between periods (one idea was to automatically load the next section when the user reached the end of the current one)
- How to deal with navigation between years consistently, whether they belong to the same period or not
In the end we decided to keep everything on a single page and focused on best practices for performance, such as the use of Webp images, lazy drawers, mining HTML, CSS and JS, avoiding hidden or unnecessary elements and other common techniques.
Ultimately, the page is loaded quickly and it is smooth, which is crucial to guarantee a smooth experience on both desktop and mobile.
The team
Tubik helps both large and small companies to use the design to improve communication with their customers or users and to increase the sale of products and services.
We specialize in making fascinating brands, designing intuitive web and app interfaces and increasing user experience through custom images and motion design.
#project #attention #Jailhouse #Advocaten