TM Completed sentences

Original	Translated

Other sentences

Original	Similar TM records
Dictionary, but more engaging: Case Study	Dictionary, but more engaging: Case Study
Introduction	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.	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://www.awwwards.com/sites/dictionary-of-free-speech https://www.awwwards.com/sites/sculpting-harmony
https://purple-mandolin.sandbox.otgs.work/2024/11/27/the-10-best-agencies-in-new-york-city/	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	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.	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://showcase.fmk.utb.cz/en/digital-design-studio/
https://www.utb.cz/en/	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 front of the committee in Zlín, Czech Republic. Photo by Diana Randjak.

Presentation of my master's thesis	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.	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	The Ideation Process
Possible visual ideas generated by MidJourney.	Possible visual ideas generated by MidJourney. Possible visual ideas generated by MidJourney
Possible visual ideas generated by MidJourney	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.	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/	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. Generative keyboard ideas made in Blender Geometry Nodes
Generative keyboard ideas made in Blender Geometry Nodes	Generative keyboard ideas made in Blender Geometry Nodes Generative keyboard ideas made in Blender Geometry Nodes.

Going WebGL	Going WebGL
https://www.youtube.com/embed/UjDgD-US1HM	https://www.youtube.com/embed/UjDgD-US1HM https://www.youtube.com/embed/UZZDvLZMnYg https://www.youtube.com/embed/G8szAF5x5Zk
Imported GLTF with shape key animations.	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.	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	Let's Have Fun
https://www.youtube.com/embed/UZZDvLZMnYg	https://www.youtube.com/embed/UZZDvLZMnYg https://www.youtube.com/embed/UjDgD-US1HM https://www.youtube.com/embed/G8szAF5x5Zk
Experimenting with various inputs.	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).	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/	https://www.imdb.com/title/tt0816692/
_blank
noreferrer noopener
https://www.youtube.com/embed/uqqURY_pbqM	https://www.youtube.com/embed/uqqURY_pbqM https://www.youtube.com/embed/G8szAF5x5Zk https://www.youtube.com/embed/WabrfJZCyyw
https://www.youtube.com/embed/OPFowyCAahw	https://www.youtube.com/embed/OPFowyCAahw https://www.youtube.com/embed/G8szAF5x5Zk https://www.youtube.com/embed/WabrfJZCyyw
Experimenting with second render target.	Experimenting with second render target.
Adjusting Generative Parameters	Adjusting Generative Parameters
With the core visuals and interactions in place, I went on to design the intro scene...	With the core visuals and interactions in place, I went on to design the intro scene...
https://www.youtube.com/embed/WabrfJZCyyw	https://www.youtube.com/embed/WabrfJZCyyw https://www.youtube.com/embed/G8szAF5x5Zk https://www.youtube.com/embed/OPFowyCAahw
Showcase of each chapter with unique visual.	Showcase of each chapter with unique visual.
The Final Layer on Top	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.	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://react.dev/
https://strapi.io/	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.	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	https://www.youtube.com/embed/G8szAF5x5Zk https://www.youtube.com/embed/WabrfJZCyyw https://www.youtube.com/embed/OPFowyCAahw
Preview of the UI.	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.	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 (left) and after (right) post-processing. Before and after post-processing
Before and after post-processing	Before and after post-processing Before (left) and after (right) 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.	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.	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/	https://elevenlabs.io/
_blank
noreferrer noopener

User Testing	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.	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	With Accessibility in Mind Accessibility version of the website
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.	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	https://www.awwwards.com/sites/sculpting-harmony https://www.awwwards.com/sites/dictionary-of-free-speech
_blank
noreferrer noopener
Simplified version of the website focusing on accessibility.	Simplified version of the website focusing on accessibility. Accessibility version of the website
Accessibility version of the website	Accessibility version of the website Simplified version of the website focusing on accessibility. With Accessibility in Mind

Wrapping up	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.	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.