TM completed segments: 60

Other segments: 37

TM completed words: 670

Other words: 413

TM Completed sentences

Original Translated
Dictionary, but more engaging: Case Study Słownikowo, ale bardziej wciągająco: Case Study
Introduction Wprowadzenie
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. W wielu demokratycznych krajach wolność słowa często uważamy za coś oczywistego, choć niewiele wiemy o jej bogatej historii, kluczowych postaciach i ideach, które ją ukształtowały. Chciałem to zmienić, tworząc Interaktywny Słownik Wolności Słowa, wciągające doświadczenie internetowe zawierające wszystkie niezbędne terminy do poznania tego ważnego tematu, kilka płynnych interakcji i jeden model low-poly używany do prawie wszystkiego.
https://www.awwwards.com/sites/dictionary-of-free-speech 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/ https://purple-mandolin.sandbox.otgs.work/2024/11/27/the-10-best-agencies-in-new-york-city/
How It All Started Jak to się wszystko zaczęło
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. Interaktywny Słownik Wolności Słowa to mój projekt pracy magisterskiej, opracowany na Wydziale Projektowania Cyfrowego na TBU Zlín w Czechach i będący wynikiem mojej pasji do immersyjnych doświadczeń internetowych, którą rozwinąłem podczas studiów.
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/
Presentation of my master’s thesis in front of the committee in Zlín, Czech Republic. Photo by Diana Randjak. Prezentacja mojej pracy magisterskiej przed komisją w Zlínie w Czechach. Zdjęcie: Diana Randjak.
Presentation of my master's thesis Prezentacja pracy magisterskiej
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. W moich poprzednich projektach często poruszałam tematykę społeczną, więc tym razem postanowiłam skupić się na wolności słowa. Moim celem była pomoc w wypełnieniu luki w wiedzy, zwłaszcza dla osób z mojego pokolenia, poprzez zaoferowanie wciągającej, ale edukacyjnej witryny, na której mogliby zgłębić ten temat.
The Ideation Process Proces tworzenia idei
Possible visual ideas generated by MidJourney. Możliwe pomysły wizualne wygenerowane przez MidJourney.
Possible visual ideas generated by MidJourney Możliwe pomysły wizualne wygenerowane przez 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. Otrzymałem wiele wariacji łączących różne motywy, a jeden z nich zainspirował mnie do pójścia o krok dalej i stworzenia generatywnej klawiatury w węzłach geometrycznych Blendera , co pozwoliło mi eksperymentować z różnymi kompozycjami i kształtami bezpośrednio w 3D. I tu zaskoczyło – nagromadzenie wielu z losowymi ustawieniami szerokości uzupełnionymi kilkoma z nich wystających wyglądało wizualnie super obiecująco. A tym bardziej po tym, jak ustawiłem je i wygiąłem w półkulę - to było dokładnie to, czego szukałem.
https://www.blender.org/ https://www.blender.org/
Generative keyboard ideas made in Blender Geometry Nodes. Pomysły na generatywne klawiatury wykonane w Blender Geometry Nodes.
Generative keyboard ideas made in Blender Geometry Nodes Pomysły na klawiaturę generatywną stworzone w węzłach geometrii Blendera
Going WebGL Przejście na WebGL
https://www.youtube.com/embed/UjDgD-US1HM https://www.youtube.com/embed/UjDgD-US1HM
Imported GLTF with shape key animations. Zaimportowano GLTF z animacjami kluczowania kształtem.
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. Aby rozwiązać ten problem, zdecydowałem się odtworzyć konfigurację węzłów z węzłów geometrii bezpośrednio w Three.js zamiast tego używając siatki instancji, co pozwoliło na użycie tej samej geometrii przez wszystkie 1500 przy minimalnym wpływie na wydajność.
Let's Have Fun Bawmy się dobrze
https://www.youtube.com/embed/UZZDvLZMnYg https://www.youtube.com/embed/UZZDvLZMnYg
Experimenting with various inputs. Eksperymentowanie z różnymi danymi wejściowymi.
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). Najbardziej „aha” momentem był dla mnie moment, w którym wprowadziłem drugi cel renderowania, który pozwolił mi płynnie przenieść użytkownika w inną, inną scenę. (Możesz zauważyć inspirację Tesseraktem z Interstellar).
https://www.imdb.com/title/tt0816692/ https://www.imdb.com/title/tt0816692/
https://www.youtube.com/embed/uqqURY_pbqM https://www.youtube.com/embed/uqqURY_pbqM
https://www.youtube.com/embed/OPFowyCAahw https://www.youtube.com/embed/OPFowyCAahw
Experimenting with second render target. Eksperymentowanie z drugim celem renderowania.
Adjusting Generative Parameters Dostosowywanie parametrów generatywnych
With the core visuals and interactions in place, I went on to design the intro scene... Mając już gotowe podstawowe elementy wizualne i interakcje, przystąpiłem do projektowania sceny wprowadzającej...
https://www.youtube.com/embed/WabrfJZCyyw https://www.youtube.com/embed/WabrfJZCyyw
Showcase of each chapter with unique visual. Prezentacja każdego rozdziału z unikalną grafiką.
The Final Layer on Top Ostatnia warstwa na wierzchu
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. Podsumowując, rozpocząłem pracę nad interfejsem użytkownika za pomocą Reacta i Zustanda do globalnego zarządzania stanem, co uprościło aktualizację DOM i pobieranie danych z backendu, który zbudowałem za pomocą Strapi CMS.
https://react.dev/ https://react.dev/
https://strapi.io/ https://strapi.io/
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. Ponieważ byłem mocno skoncentrowany na aspekcie WebGL i miałem mało czasu, pominąłem większość prototypowania i zaprojektowałem interfejs użytkownika bezpośrednio w kodzie. Było to sprzeczne ze standardowym przepływem pracy projektowej, którego zwykle przestrzegam, ale w ten sposób mogłem zobaczyć w czasie rzeczywistym, jak moje pomysły pasują do sceny i istniejących interakcji. Dzięki temu miałem nawet kilka szczęśliwych przypadków, odkrywając opcje, których inaczej bym nie wypróbował, jak przewijanie w poziomie w szczegółach terminów czy przeciągane menu w prawym górnym rogu.
https://www.youtube.com/embed/G8szAF5x5Zk https://www.youtube.com/embed/G8szAF5x5Zk
Preview of the UI. Podgląd interfejsu użytkownika.
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. Na koniec dodałem efekty post-processingu, takie jak poświata i zniekształcenia wywołane kursorem, a także użyłem dziwacznego błędu CSS do wygenerowania nakładki szumów, dodając subtelną nutę realizmu.
Before (left) and after (right) post-processing. Przed (po lewej) i po (po prawej) obróbce końcowej.
Before and after post-processing Przed i po obróbce końcowej
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. Aby w pełni zanurzyć użytkowników, chciałem również stworzyć pewnego rodzaju doświadczenie dźwiękowe. Ze wszystkich kompetencji, które posiadałem na tej stronie, ta była zdecydowanie najdalsza od mojego zestawu umiejętności.
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. Byłem jednak zaskoczony, jak łatwo było stworzyć wysokiej jakości lektora za pomocą narzędzia AI, takiego jak ElevenLabs. W połączeniu z wolnymi od praw autorskich efektami dźwiękowymi i dźwiękami otoczenia, które nieco podrasowałem w Adobe Premiere, znacznie rozszerzyłem doświadczenie również w tej dziedzinie.
https://elevenlabs.io/ https://elevenlabs.io/
User Testing Testowanie z użytkownikami
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. Ze względu na eksperymentalny charakter sieci i alternatywną nawigację, którą wdrożyłem, postanowiłem przeprowadzić testy z użytkownikami, aby upewnić się, że doświadczenie jest tak użyteczne, jak to tylko możliwe. Dzięki trzem rundom testów, w których wzięło udział łącznie 8 uczestników, udało mi się zidentyfikować większość problemów z użytecznością. To doświadczenie po raz kolejny utwierdziło mnie w przekonaniu, jak ważne są testy z użytkownikami i jak niewiele wystarczy, aby wszystko stało się bardziej użyteczne.
With Accessibility in Mind Z myślą o ułatwieniach dostępu
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. Jako projektant uważam, że nasza praca powinna być dostępna dla każdego, ale osiągnięcie tego za pomocą środowisk 3D jest wyzwaniem. Zainspirowany podejściem Sculpting Harmony (Getty), stworzyłem uproszczoną wersję strony z myślą o całej semantyce dostępności, dbając o to, aby treść była w pełni dostępna dla wszystkich użytkowników.
https://www.awwwards.com/sites/sculpting-harmony https://www.awwwards.com/sites/sculpting-harmony
Simplified version of the website focusing on accessibility. Uproszczona wersja strony skupiająca się na dostępności.
Accessibility version of the website Wersja strony internetowej dla ułatwień dostępu
Wrapping up Owijanie w górę
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. Bycie jedynym twórcą treści, projektu i rozwoju było wyzwaniem i zajęło mi kilka miesięcy, aby ukończyć całą witrynę. Patrząc wstecz na ten proces, cieszę się, że żyję w czasach, w których mam do dyspozycji tak wiele wspaniałych narzędzi i treści edukacyjnych, które pozwalają uczniowi takiemu jak ja w tamtym czasie samodzielnie stworzyć wciągające doświadczenie internetowe, prawie za darmo, a nawet pomóc mu wylądować w pierwszym SOTD.

Other sentences

Original Similar TM records
_blank
noreferrer noopener
post
525
_blank
noreferrer noopener
_blank
noreferrer noopener
text-decoration: underline;
_blank
noreferrer noopener
text-decoration: underline;
_blank
noreferrer noopener
_blank
noreferrer noopener
_blank
noreferrer noopener
Audio
_blank
noreferrer noopener
_blank
noreferrer noopener