Przejdź do treści
Zadzwoń

KonceptProjekt koncepcyjny · festiwal muzyczny

ZGIEŁK: strona festiwalu z literami, które reagują na ruch.

To projekt pokazowy ALUK, nie zlecenie. Festiwal „ZGIEŁK” nie istnieje. Wymyśliłem go, żeby sprawdzić, ile ruchu zmieści strona wydarzenia, zanim zacznie przeszkadzać. Strona działa na zgielk.madebyaluk.pl. Taką stronę dla prawdziwego festiwalu wyceniam indywidualnie, po rozmowie i darmowym szkicu. Jak wyceniam.

Strona główna prezentacji ZGIEŁK: ruchomy tytuł festiwalu na całą szerokość nad wideo tłumuKoncept
Marka wymyślona na potrzeby portfolio, kod prawdziwy. Wygląd w kadrze należy do konceptu, nie do ALUK.Kliknij, żeby przewinąć stronę w nowej karcie

01Założenia

Co zobaczysz na stronie.

Trzy dni muzyki i światła w starej cegielni. Tu decyduje emocja: artyści, data i bilet. Strona ma być głośna jak plakat. Mimo to w trzech krokach prowadzi do kupna.

Założenie: czerń, jeden kwaśny kolor i jedna magenta. Litery jako grafika. Własne zdjęcia tłumu i artystów, wideo na starcie. Program, miejsce i bilety czytelne bez JavaScriptu.

  1. 01Litery, które się ruszają.

    Tytuł zajmuje całą szerokość ekranu. Każda litera pochyla się w stronę kursora. Gdy przewijasz, litery rozjeżdżają się i obracają.

  2. 02Pas, który przyspiesza.

    Pas z hasłami przyspiesza i pochyla się, gdy szybko przewijasz. Potem wraca do spokojnego tempa. Ten sam pas jest w stopce.

  3. 03Artyści z obrazem za kursorem.

    Wielkie nazwy artystów wjeżdżają od dołu. Po najechaniu wiersz się przesuwa, a za kursorem idzie zdjęcie z nazwą sceny. Na telefonie to zwykła lista.

  4. 04Cięcia, odliczanie, bilety.

    Sześć zdjęć i słów zmienia się twardym cięciem, z krótkim błyskiem i licznikiem 01/06. Odliczanie do daty festiwalu działa na żywo. Trzy pule biletów, jedna z pieczątką rabatu.

02Prawdziwa strona

Jak zrobię to u Ciebie.

Prezentacja to zwykły HTML. Biblioteka animacji ładuje się z zewnętrznego serwera. Twoją stronę buduję tak, żeby łatwo było ją zmieniać i utrzymać.

Nagranie prezentacji ZGIEŁK
KonceptNagranie strony od góry do dołu (1280×720). Włącza się po kliknięciu.
  • Bilety u operatora

    Strona wydarzenia bez logowania nie potrzebuje bazy danych. Buduję ją w Astro. Bilety sprzedaje operator, strona tylko do niego prowadzi. Animacje ruszają, gdy wczytają się fonty.

  • Fonty i ziarno u siebie

    Fonty z polskimi znakami leżą na serwerze strony. Odstęp między wierszami nie ucina ogonków ą i ę. Efekt ziarna jak na kliszy to lekki plik, na telefonie jeszcze lżejszy.

  • Ruch z wyłącznikiem

    Gdy ktoś wyłączył animacje w systemie, tytuł, artyści i cięcia stoją w gotowym stanie. Odliczanie działa dalej, bo to treść, nie ozdoba.

  • Telefon z połową efektów

    Litery rozjeżdżają się mniej, sekcje są krótsze, pas się nie pochyla. Zdjęcie za kursorem jest wyłączone. Sprawdzam na ekranie 390 px.

03Zastosowanie

Dla kogo jest ten styl?

To najgłośniejszy z sześciu projektów i tak ma zostać. Wydarzenia, kluby i kultura sprzedają nastrój. Poza tym światem te same efekty odradzam.

  • Ten styl pasuje

    • festiwale, kluby, koncerty, premiery kulturalne
    • marki odzieżowe i krótkie premiery z limitowaną pulą
    • kampanie z datą: odliczanie i pule biletów pomagają sprzedawać
  • Tu radzę inaczej

    • prawnicy, kliniki, księgowość: żadnego z tych efektów
    • sprzedaż firmom i programy w abonamencie: skaczące litery odbierają wiarygodność
    • strony, na których czyta się dłuższe teksty

Fakty: tylko to, co zmierzyłem

Marka jest wymyślona. Nie ma sprzedaży ani zapytań, więc ich nie podaję.
Waga przy pierwszym wejściu (1600×1000, po ekranie ładowania)
1,5 MB
Biblioteki animacji
GSAP + Lenis
Waga przy pierwszym wejściu z komputera. Większość to wideo tłumu na starcie. Na prawdziwej stronie najpierw wchodzi zdjęcie, a wideo po głównej treści. Wyników testu szybkości Google nie podaję, bo ich nie mierzyłem.

04Kontakt

Taka strona dla Twojej marki?

Napisz, co organizujesz i kiedy. Powiem wprost, ile tego ruchu ma sens u Ciebie. Potem dostaniesz zakres, termin i cenę.

  • Szkic jest bezpłatny i do niczego nie zobowiązuje
  • Raty 30%, 40% i 30%, pierwsza dopiero po akceptacji szkicu
  • Domena i hosting na Ciebie, 30 dni poprawek po starcie

Zacznij od darmowego szkicu

Kilka zdań o firmie wystarczy, resztę dopytam. Odpisuję osobiście, tego samego dnia.

Zamów darmowy szkic Umów rozmowę online
Wolisz zadzwonić? +48 572 061 738Wolisz maila? kontakt@madebyaluk.pl