Laboratorium Percepcji
Od istniejącej strony HTML do rozbudowanego, edytowalnego systemu WordPress. Książki, muzyka, usługi i SOMA w jednej uporządkowanej przestrzeni.
Istniejący serwis
Migracja i rozwój HTML → WordPress
Własny motyw
Treści i kolekcje edytowalne z panelu
Działa publicznie
Kolejne moduły rozwijane etapowo
Rozwinąć stronę. Zachować jej charakter.
Laboratorium miało już własne teksty, okładki, albumy i filmy. Treść była zapisana w plikach HTML, CSS i JavaScript. Rozwój wymagał uporządkowania materiałów oraz wspólnego miejsca do ich edycji.
Zamiast zaczynać od pustej strony, zachowaliśmy autorskie treści i ważne materiały. Zmieniliśmy sposób ich organizacji i prezentacji.
Przed / po
BEFORE
Statyczne pliki strony. Treść i układ utrzymywane razem. Albumy w HTML i niepełnym JSON. Rozbudowane moduły HOME.
AFTER
Jeden WordPress. Osobne modele książek, albumów i projektów. Filmowe wejścia do podstron. Wspólne formularze i powtarzalne komponenty.
Ta zmiana rozwija istniejący projekt — nie oznacza, że poprzednia strona nie działała.
Krok po kroku, z testem po drodze.
Analiza źródła → migracja → moduły → test → dopracowanie → mobile QA. Kolejne etapy zachowywały to, co działało, i sprawdzały następną zmianę przed dalszym rozwojem.
Jeden system. Kilka odrębnych obszarów.
WordPress wybiera, opisuje i prowadzi do materiałów. Pełna biblioteka i głębsza eksploracja pozostają przyszłym zadaniem Atlasu. Kontakt i wybrane media dopełniają główne sekcje.
HOME jako filmowa nawigacja
Krótki tytuł, niewielki opis i jedno główne wejście. Sekwencja pełnoszerokich teł prowadzi do projektów, usług, SOMA, ebooków i muzyki. Pełniejsze treści są na podstronach, zamiast konkurować ze sobą na HOME.
Podgląd oryginalnej, 10-sekundowej pętli użytej w hero. W samej witrynie film pełni rolę wyciszonego tła.
Dziewięć książek. Jeden prosty katalog.
Zachowane okładki, kompaktowe kafelki i osobne strony ebooków. Na telefonie katalog ma dwie kolumny.
Chcę przeczytać
Wspólny formularz automatycznie rozpoznaje książkę. Użytkownik zostawia kontakt, a zgłoszenie trafia mailem. To prośba o dostęp — bez sklepu i automatycznej wysyłki PDF.
Trzy usługi, czytelny wybór
Trzy kafelki prowadzą do osobnych stron. Każda zachowuje własny charakter, mapę, proces i kontakt. Wspólny formularz rozpoznaje usługę, której dotyczy zapytanie.
Mapa zamiast przypadkowej dekoracji
Wykorzystane zostały rzeczywiste mapy usług. Odbiorca widzi obszary rozmowy, a na telefonie może otworzyć pełną grafikę.
SOMA — własna marka w jednym WordPressie
Osobny język wizualny, ciepła paleta i własna nawigacja. SOMA zachowuje Body Map, Pressure Slider, Breath Moment oraz filmowe tła, pozostając częścią tej samej instalacji.
Interakcje z konkretną rolą
Mapa pozwala wybrać obszar ciała, slider określa preferowany nacisk, a ćwiczenie oddechowe daje chwilę zatrzymania. Formularz służy do zapytania o sesję, nie automatycznej rezerwacji.
Zakres częściowy: moduł działa, ale finalne dane oferty, ceny, lokalizacja i bio wymagają dopracowania.
Muzyka V0.1 — uporządkowany katalog
10 albumów · 92 pozycje tracklist · 5 krótkich preview. To zakres katalogu V0.1, nie pełny streaming kolekcji.
Okładka, tracklista i odsłuch
Album ma własną stronę. Lekki player odtwarza krótkie preview; jedno audio naraz, bez autoplay. Mapa muzyki jest prostą osią albumów, nie grafem podobieństw.
Dalszy rozwój: pełne audio i głębsza eksploracja są planowane poza obecnym katalogiem.
Ruch, który prowadzi przez stronę
Filmowe tła: wyciszone autoplay, pętla i pełna szerokość. Odtwarzanie jest uruchamiane przy widocznej sekcji, a pozostałe filmy są pauzowane. Postery zastępują ruch przy ograniczeniu animacji lub oszczędzaniu danych.
Kadry i nakładki dopasowano do tekstu oraz mobile. Ważne okładki i mapy pozostały obrazami. Wykorzystano istniejące filmy — bez fikcyjnych scen.
Desktop i mobile mają ten sam rytm
Pełnoszerokie tła, czytelny crop, mobilne menu i spokojna stopka. Naprawiono źródła białych pasów w kontenerach i marginesach.
Zapis końcowego QA projektu obejmuje 52 adresy × 8 szerokości = 416 pomiarów. To kontrola układu, nie wynik badania konwersji ani 416 screenshotów.
Treści zmieniasz w panelu
Kolekcje
Książki, opisy albumów, tracklisty, projekty i usługi.
Prezentacja
Okładki, wybrane media, CTA i powiązania między materiałami.
Wspólne ustawienia
Menu, profile social, branding oraz teksty formularzy.
Codzienna edycja nie wymaga zmiany kodu. Przebudowa samego layoutu nadal odbywa się w motywie.
Spójność, która mieści różne światy
Ciemna zieleń, ciepła biel, grafit i akcenty złota / miedzi. Duża typografia, pełnoszerokie media i oszczędna treść. Typograficzne znaki SVG zachowują czytelność. SOMA ma własną paletę ivory, sand, olive i copper oraz fonty Prata / Karla.
Technologia
WordPress · własny klasyczny motyw PHP · HTML / CSS / JavaScript · natywne typy treści, pola i ustawienia · IntersectionObserver · SVG / WebP · MP4 H.264 / MP3 preview · wp_mail / FluentSMTP.
FFmpeg przygotowywał filmy, postery i preview. Skrypty Python / JavaScript wspierały migrację i QA. To narzędzia pracy, nie dodatkowy frontend strony.
Rezultat: strona gotowa na dalszy rozwój
Migracja WordPress, własny motyw, architektura treści, powtarzalne komponenty, formularze, responsywny layout i wspólny system wideo. Materiały mają swoje miejsce, a kolejne książki, albumy i projekty można rozwijać w tym samym panelu.
Atlas: działa strona informacyjna. Pełna aplikacja i biblioteka pozostają planem. Dalsza redakcja treści ma bazować na eksporcie do Worda.
Nie przypisujemy realizacji wzrostu ruchu, sprzedaży ani konwersji — takich danych nie zebrano.
Masz istniejącą stronę, która potrzebuje uporządkowania i rozwoju?
Możemy zacząć od tego, co już działa. Ustalić najbliższy krok i stopniowo zbudować system, który łatwiej prowadzić dalej.