Skoro strona to wizytówka, to musi robić wrażenie – case study OneMillion
O tym, że strona internetowa jest wizytówką firmy, mówi niemal każdy przedsiębiorca. Przeglądając jednak internet, można odnieść wrażenie, że nie każdy tę mantrę wziął sobie do serca. Większość wygląda, jakby była zrobiona metodą kopiuj/wklej. Zobaczmy, jak może wyglądać dobrze przygotowana strona na podstawie OneMillion.
Nie każdy zdaje sobie sprawę jak dużo pracy i ile kreatywności wymaga przygotowanie kompletnej wizytówki firmy. Mowa oczywiście o firmach, które oczekują czegoś więcej niż adaptacja kupionego szablonu do danej działalności. O tym, jak może wyglądać porządnie zaprojektowana i przemyślana strona oraz jak wyglądają kolejne etapy takiego projektu, zobaczymy na projekcie wykonanym przez OneMillion oraz MITS.
OneMillion
Firma OneMillion postawiła sobie za zadanie rozpowszechnienie płatności walutami cyfrowymi w codziennym życiu. Realizują ten plan od kilku lat, tworząc kompletny ekosystem dla użytkowników kryptowalut. Użytkownik, który założy konto ma otrzymać narzędzia oraz niezbędną wiedzę do wdrożenia kryptowalut w swoje życie.
W oparciu o te założenia firmy postawiono cele, które głównie zakładały przede wszystkim nową stronę internetową, która miała robić wrażenie. Miała być efektowna i zaawansowana technologiczne. Postawiono sobie za cel wywarcie na użytkowniku wrażenia zbliżonego do tego, jakie mógłby mieć po wejściu do gabinetu Tony’iego Starka.
Strona niczym z gry
Aby ukazać powagę założeń firmy, strona musiała być zaawansowana technologicznie, ale i powiązana z działalnością. Logotyp One Million Group to złoty sygnet, o czym wspomnę jeszcze poniżej. Jasne zatem było, że to on powinien stanowić główny punkt nowej strony. Aby jeszcze bardziej pokreślić działalność i zakres One Million, zdecydowano się stworzyć model 3D złotego ringu, który od wewnętrznej strony miał w pełni opracowane miasto. Miało to za zadanie ukazać wizję miasta przyszłości, w której wszystko jest ze sobą połączone, a informacje przepływają w mgnieniu oka. Taki obraz idealnie pasuje do wizji kompletnego ekosystemu oferowanego przez One Million i ich autorski token MONx.
Pomysł był trafny, ale i na tyle zaawansowany, że przed realizacją wymagał wielu testów wydajnościowych, które pokazałyby, ile z tego śmiałego pomysłu można zrealizować na stronie www. Testy wyszły pozytywnie i udało się stworzyć pierwsze wersje przy użyciu HTML5, CSS4 oraz języka JavaScript wraz z bibliotekami React i Three. Three.js umożliwiła prezentację animowanej grafiki 3D w przeglądarce internetowej przy użyciu WebGL. Efekt jest naprawdę imponujący i uważam, że spełnia założenia.
Aby strona tytułowa nie straciła blasku, dodatkowe informacje o OneMillion zostały ulokowane w oddzielnych sekcjach.
Złoty sygnet
Logotypem One Million jest złoty sygnet, o którym wspominałem wcześniej. Idea jaka przyświecała przy jego stworzeniu to odzwierciedlenie idei firmy w elegancki, ale i stosowany sposób. Symbolika koła/okręgu wydaje się być tutaj odpowiednia, gdyż ukazuje pewną całość, a przy tym pozbawiona kątów, jest łagodna i ciągła. Wraz z powstaniem nowej strony, logotyp wymagał jedynie liftingu.
Nowy logotyp, choć nie różni się znacząco od starego, definitywnie sprawia wrażenie bardziej nowoczesnego. Zmieniła się czcionka, ułożenie tekstu oraz sam sygnet. Nabrał on lekkości i nowoczesnego sznytu.
Model 3D – najciekawszy element strony
Strona WWW musi ze sobą nieść treść, w końcu to dla niej odwiedzamy daną stronę. Nie przeszkadza to jednak dorzucić do merytorycznej treści elementu, który ściągnie do niej osoby wstępnie niekoniecznie zainteresowane tematyką.
Cała strona OneMillion od początku powoduje, że chce się przebywać dłużej niż wynikałoby to z chęci zapoznania się z treścią. Dodatkowy czas spędza się na rozkoszowaniu się animacjami przewijającego się w kółko modelu miasta 3D. Twórcy strony przewidzieli jednak, że kiedyś ten zapętlony ruch modelu przestanie być interesujący. Z tego też powodu udostępnił nam pełen model 3D na specjalnej podstronie, do której link znajdziemy w prawym górnym rogu.
Tam właśnie odkryjemy pełne piękno i majstersztyk złotego pierścienia i zamkniętego w nim miasta. Za pomocą myszki możemy się bowiem poruszać po pełnym modelu 3D z niemal pełną dowolnością. Przyznaję, że to wciąga :)
Dźwięk i obraz – wzmocnienie przekazu
Ze stroną OneMillion.com mam pewien wewnętrzny problem. Z reguły nie lubię, gdy strona WWW na wstępie atakuje mnie muzyką w tle i cieszę się, że twórcy poszli właśnie w tym kierunku i domyślnie jest ona wyłączona. Z drugiej jednak strony, wydaje mi się ona na tyle delikatna i uzupełniająca całokształt, że brakowało mi jej, gdy zdecydowałem się przejrzeć stronę bez dźwięku. O ile przy czytaniu artykułów nie jest może ona niezbędna i pozostaje miłym dodatkiem, tak przy podziwianiu modelu miasta po prostu musi być włączona. Melodia mianowicie zgrywa się z poruszającymi się w tle efektami galaktyki, i delikatnym obrotem pierścienia wprowadzając pewną aurę spokoju. Jeżeli taki był zamysł, to udał się na 5.
Ewolucja stron WWW
Projekt OneMillion jest idealnym przykładem reprezentującym ewolucję jaką przeszły strony WWW. Rok temu WWW obchodziło swoje 30-lecie. W tyle czasu od samego istnienia strony przeszliśmy drogę do pięknych projektów jak właśnie OneMillion. Projektów, które w sposób kompletny i niebezpośredni, są w stanie przekazać cechy danej firmy i zapewnić dostęp do całego ekosystemu. Warto wspomnieć, że strona otrzymała kilka dni temu tytuł ‘Site of the day’ w konkursie Best CSS oraz ‘Star’ w konkursie CSS Winner.
Zachęcamy do zobaczenia strony, najlepiej na większym ekranie niż smartfon :)
Zobacz stronę OneMillion
Artykuł powstał przy współpracy z marką One Million