TM completed segments: 60
Other segments: 37
TM completed words: 670
Other words: 413
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 |
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 |
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 |
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 |
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 |
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 |
Otrzymałem wiele wariacji łączących różne motywy, a jeden z nich zainspirował mnie do pójścia o krok dalej i stworzenia |
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 |
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 |
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 |
Podsumowując, rozpocząłem pracę nad interfejsem użytkownika za pomocą |
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 |
Byłem jednak zaskoczony, jak łatwo było stworzyć wysokiej jakości lektora za pomocą narzędzia AI, takiego jak |
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 |
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 |
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. |
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 | |