READY GO – Strona agencji, na której nagłówek jest showreelem
READY GO to agencja digitalowa. Jej strona musiała w pierwszych trzech sekundach pokazać zakres możliwości, więc dowodem jest sam nagłówek: stałe zdanie, którego ostatnie słowo ciągle się zmienia.
Wyzwanie
Każda agencja deklaruje szeroki zakres i każda pisze o tym w akapicie. Dowodem musi być samo dzieło, a nie tekst – ale strona główna nadal musi jasno mówić, czym firma się zajmuje, inaczej staje się portfolio, którego nikt nie umie zaklasyfikować.
Podejście
Nagłówek podaje fakt – agencja digitalowa – a potem jego ostatnie słowo przechodzi przez oferowane usługi: produkcję, strategię, merch, kreację. Deklaracja i dowód mieszczą się w jednym zdaniu, a zdjęcia realizacji rozsypują się wokół niego, zamiast stać w siatce poniżej.
Nagłówek, który występuje
„Jesteśmy agencją digitalową. Przychodzą do nas po…” – a potem ostatnie słowo się zmienia. Każdy wariant jest rysowany jako własne liternictwo, a nie składany fontem, więc każdy stan zdania to osobny kawałek typografii.
Pierwsza linia odpowiada na pytanie, czym jest firma, druga pokazuje zakres możliwości – bez ani jednego zdania autoprezentacji.
Liternictwo jako identyfikacja
Duże słowa to grafika wektorowa, a nie tekst. To daje każdej rotacji własną grubość i deformację i dlatego nagłówek czyta się jak zaprojektowany obiekt, a nie efekt animacji nałożony na tekst.
Ten kompromis jest świadomy i warto go nazwać: skoro słowa są obrysami, to obrazy, a nie zaznaczalny tekst, więc znaczenie dla wszystkiego, co czyta stronę automatycznie, niesie otaczający je tekst.
Realizacje rozsypane, a nie w siatce
Zdjęcia realizacji unoszą się przy krawędziach nagłówka w różnych rozmiarach i pod różnymi kątami i zmieniają się razem ze zdaniem. Zwykła siatka mówiłaby „szablon agencji”; rozproszenie mówi, że układ powstał dla tych treści.
Powściągliwość wszędzie indziej
Nawigacja to trzy proste linki. Nie ma wideo na pierwszym ekranie, wskaźnika przewijania ani teatru wokół zgody na cookies, który konkurowałby z nagłówkiem. Wszystko, co strona ma do wydania, wydaje w jednym miejscu.
Wdrożenie
Next.js serwowany przez nginx. Rotujący nagłówek wcześniej ładuje grafikę kolejnego słowa, żeby zmiana nigdy nie trafiła na pustą klatkę.
Co dowieźliśmy
- Rotujący nagłówek z ręcznie rysowanym liternictwem dla każdego wariantu
- Rozproszone zdjęcia realizacji zmieniające się razem z nagłówkiem
- Nawigacja z trzech linków, bez konkurujących elementów na pierwszym ekranie
- Strona w Next.js i Tailwind CSS na własnym serwerze Node.js
Częste pytania
Bo agencja musi udowodnić zakres możliwości, a nie go deklarować. Rotowanie ostatniego słowa w stałym zdaniu mówi, czym firma się zajmuje, i pokazuje jej pracę w tej samej linii.
Każdy wariant jest rysowany, żeby mógł mieć własną grubość i deformację. Kosztem jest to, że te słowa są obrazami, a nie zaznaczalnym tekstem, więc znaczenie dla wszystkiego, co czyta stronę automatycznie, niesie otaczający tekst.
Na Next.js i React z Tailwind CSS, na własnym serwerze Node.js.
Co jest w środku
„Chcieliśmy, żeby sama strona pokazywała, co potrafi nasza agencja, i Sakura świetnie to uchwyciła. Ruchoma typografia i cały układ dają jej mnóstwo charakteru, a przy tym nic nie jest zagmatwane.”