Artystka muzyczna
z Warszawy
Dark pop, cinematic visuals, fanbase na Spotify i TikTok — ale strona wygenerowana z darmowego kreatora z 2018. Zaprojektowałem editorial stronę, która pasuje do brzmienia: ciemna, filmowa, intymna. 7 podstron z odtwarzaczem muzyki i merch shopem.
Artystka dark pop bez strony godnej swojego brzmienia.
Artystka z Warszawy tworzy dark pop z elementami electronic i cinematic. Kilkanaście tysięcy słuchaczy na Spotify, aktywny TikTok. Problem: strona zbudowana w darmowym kreatorze, biała, generyczna, z domyślnymi fontami. Zupełnie nie pasowała do estetyki muzyki.
Potrzeby: strona, która "brzmi" jak muzyka. Ciemna paleta. Embedded player Spotify. Własny audio player na fragmenty niepublikowane. Galeria artystyczna. Sekcja merch. Booking/kontakt dla eventów. Tour dates. Mailing list dla fanów.
Ograniczenie: artystka nie ma budżetu na custom build od zera. Trafiła do Sprintly po zobaczeniu szablonu darkpop-artist — i właśnie ten szablon dostosowałem pod jej identyfikację wizualną.
7 dni. Szablon jako punkt wyjścia, nie gotowy produkt.
Dzień 1: brief + zdjęcia artystki + paleta kolorów (czarny #0a0a0a + burgundy #5c1a2a + złoto #c8a06e). Dzień 2-3: dostosowanie szablonu pod identyfikację — czcionki (Cinzel Decorative w nagłówkach, Lato body), kolory, animacje intro. Dzień 4-5: treść — bio, discography, embedding Spotify. Dzień 6: merch section z 3D card flip. Dzień 7: review + polish + launch.
Kluczowa decyzja: nie robiłem custom audio playera od zera. Użyłem Wavesurfer.js — lekka biblioteka, piękna wizualizacja waveform, wbudowana obsługa loop i seek. 3 tracki demo bez uploadowania na Spotify — bezpośrednio z serwera.
Ciemna paleta. Cinematic. Każde zdjęcie jak kadr filmowy.
Dark editorial palette
Czarny #0a0a0a base, burgundy #5c1a2a akcent, złoto #c8a06e na CTA. Tekstury overlay na zdjęciach — grain CSS dla analog feel.
Cinzel Decorative
Kapitalne serif litery w nagłówkach. Pasuje do dark pop, nawiązuje do glam i darkwave. Lato 300 w body — kontrast wagi.
Wavesurfer.js player
Audio player z wizualizacją waveform na 3 tracki demo. Bez YouTube embed, bez Spotify iframe — własna kontrola nad UX odtwarzania.
3D merch cards
CSS 3D transform na kartach merchu. Hover obraca kartę 180 stopni — przód: zdjęcie produktu, tył: cena + link do sklepu. Czysto CSS, zero JS.
7 podstron
Home / Music / Live / Gallery / Merch / Press Kit / Contact. Press kit jako osobna strona z downloadem EPK PDF — przydatne dla organizatorów eventów.
Tu zdjęcia artystki
W tej wersji demo hero używa placeholdera. W finalnej wersji: zdjęcia artystki w stylu editorial, minimum 2400x1600px, możliwie ciemne tła dla spójności z paletą.