TM Completed sentences

Original	Translated

Other sentences

Original	Similar TM records
Dictionary, but more engaging: Case Study
Introduction
We often take freedom of speech for granted in many democratic countries, while knowing little about its rich history, key figures, and the ideas that shaped it. I wanted to change that by creating The Interactive Dictionary of Free Speech, an immersive web experience featuring all the necessary terms to learn about this important topic, a bunch of smooth interactions and a single low-poly keycap model used for almost everything.

https://www.awwwards.com/sites/dictionary-of-free-speech
https://purple-mandolin.sandbox.otgs.work/2024/11/27/the-10-best-agencies-in-new-york-city/
_blank
noreferrer noopener
post
525
How It All Started
The Interactive Dictionary of Free Speech is my master’s thesis project, developed at the Digital Design department at TBU Zlín in the Czech Republic and a result of my passion for immersive web experiences I developed during my studies.
https://showcase.fmk.utb.cz/en/digital-design-studio/
https://www.utb.cz/en/
_blank
noreferrer noopener
_blank
noreferrer noopener
Presentation of my master’s thesis in front of the committee in Zlín, Czech Republic. Photo by Diana Randjak.

Presentation of my master's thesis
In my previous design projects, I frequently explored social issues, so I decided to focus on freedom of speech this time. My goal was to help bridge the knowledge gap, especially for people in my generation, by offering an immersive yet educational site where they could explore this topic.

text-decoration: underline;
The Ideation Process
Possible visual ideas generated by MidJourney.
Possible visual ideas generated by MidJourney

I got multiple variations combining various motives and one of them inspired me to move further with creating a generative keyboard in Blender's Geometry Nodes, allowing me to experiment with different compositions and shapes directly in 3D. And here it clicked – accumulating multiple keycaps with random width settings complemented by a few of them sticking out looked visually super promising. And even more so after I aligned and curved them into a hemisphere — this was exactly what I was looking for.
https://www.blender.org/
_blank
noreferrer noopener
text-decoration: underline;


Generative keyboard ideas made in Blender Geometry Nodes.
Generative keyboard ideas made in Blender Geometry Nodes

Going WebGL
https://www.youtube.com/embed/UjDgD-US1HM
Imported GLTF with shape key animations.
To solve this, I decided to recreate the node setup from Geometry Nodes directly in Three.js using instanced mesh instead, which allowed for all the 1500 keycaps to use the same geometry with minimal performance impact.
Let's Have Fun
https://www.youtube.com/embed/UZZDvLZMnYg
Experimenting with various inputs.
The most "aha moment" for me was when I introduced the second render target that allowed me to smoothly translate the user into another, different scene. (You may notice the Tesseract inspiration from Interstellar).

https://www.imdb.com/title/tt0816692/
_blank
noreferrer noopener
https://www.youtube.com/embed/uqqURY_pbqM
https://www.youtube.com/embed/OPFowyCAahw
Experimenting with second render target.
Adjusting Generative Parameters
With the core visuals and interactions in place, I went on to design the intro scene...
https://www.youtube.com/embed/WabrfJZCyyw
Showcase of each chapter with unique visual.
The Final Layer on Top
To wrap everything up, I started working on the user interface using React and Zustand for global state management, which simplified updating the DOM and fetching data from the backend I built with Strapi CMS.
https://react.dev/
https://strapi.io/
_blank
noreferrer noopener
_blank
noreferrer noopener
Because I was heavily focused on the WebGL aspect and short on time, I skipped much of the prototyping and designed the UI directly in the code. This was contradictory to the standard design workflow I usually follow, but this way I was able to see in real-time how my ideas fit within the scene and the existing interactions. Thanks to that, I even had some happy accidents, discovering options I wouldn’t have tried otherwise, like the horizontal scrolling in the terms detail or the draggable menu in the top right corner.


https://www.youtube.com/embed/G8szAF5x5Zk
Preview of the UI.
Lastly, I added post-processing effects, like bloom and cursor-triggered distortion, and used a quirky CSS bug to generate a noise overlay, adding a subtle touch of realism.
Before (left) and after (right) post-processing.
Before and after post-processing
Audio
To fully immerse the users, I also wanted to create some kind of audio experience. From all the competences I had in this website, this was definitely the one furthest from my skill set.

I was surprised however how easy it was to create a high-quality voiceover with an AI tool like ElevenLabs. In combination with copyright free sound effects and ambient sounds that I tweaked a little in Adobe Premiere, I significantly expanded the experience in this area as well.
https://elevenlabs.io/
_blank
noreferrer noopener

User Testing
Due to the experimental nature of the web and the alternative navigation I implemented, I decided to conduct user testing to ensure the experience was as usable as possible. Through three rounds of testing with a total of 8 participants, I was able to identify most of the usability issues. This experience confirmed to me once again how important user testing is, and how little is enough to make things more usable.


With Accessibility in Mind
As a designer, I believe our work should be accessible to everyone, but achieving this with 3D environments is challenging. Inspired by Sculpting Harmony's (Getty) approach, I created a simplified version of the website with all the accessibility semantics in mind, ensuring that the content could be fully reached by all users.

https://www.awwwards.com/sites/sculpting-harmony
_blank
noreferrer noopener
Simplified version of the website focusing on accessibility.
Accessibility version of the website

Wrapping up
Being the sole creator of the content, design, and development was challenging and it took several months for me to finish the whole site. Looking back on the process, I'm glad I live in times where I have so many great tools and educational content available, allowing a student like I was at the time to create an immersive web experience by himself, almost for free, and even help him land his first SOTD.