Założeniem projektu było zaprezentowanie zalet produktu w nowoczecny i niekonwencjonalny sposób. Chcieliśmy rozłożyć je na czynniki pierwsze, a następnie krok po kroku przeprowadzić użytkownika przez proces ich produkcji, tłumacząc w ten sposób jakie czynniki wpływają na ich jakość. Na stronie możemy poznać je dzięki wykorzystaniu szeregu ilustracji technicznych, materiałów wideo oraz interaktywnych animacji skorelowanych ze scrollingiem myszy. Dzięki temu przeglądając stronę możemy nie tylko prześledzić cały proces produkcji, ale również poczuć się jego częścią.
Jak to wygląda od strony technicznej? Wszystkie sekwencje animacji zostały podzielone na poszczególne sceny, z których każda zajmuje cały ekran wyświetlania. Aby umożliwić użytkownikowi przeglądanie ich w dowolnej kolejności, zaimplementowaliśmy boczny pasek menu, który umożliwia prostą nawigację i odtwarzanie dowolnych sekwencji. Dodatkowo, aby zwiększyć użyteczność interfejsu, postawiliśmy na ukryte menu, które pojawia się po kliknięciu na ikonę. Dopełnieniem strony jest nowe logo, które powinno zapadać użytkownikom w pamięć niczym gwóźdź mocujący poszczególne części palety.
Wykorzystaliśmy interfejs API wideo HTML5 do streamingu wideo.
Opóźnione ładowanie
Aby przyspieszyć ładowanie strony, skorzystaliśmy z opóźnionego pobierania plików wideo. Najpierw ładują się „lżejsze” elementy, które wyświetlają się w trakcie ładowania bardziej złożonych animacji. Dzięki temu cały proces przebiega stopniowo, a użytkownik nie musi czekać na załadowanie strony, ale może od razu zacząć jej przeglądanie.
Projektowanie logo, projektowanie UX, modelowanie 3D, animowana wizualizacja, projektowanie grafiki i programowanie.
Awards
