Kadra wyżej
Na stronie „O nas” przesunąłem kadrę wyżej. Dla rodzica ważniejsze od kolejnego opisu terapii było zobaczenie osób, którym ma powierzyć dziecko.
Czarodziejskie Smyczki
Przedszkole ułożone pod decyzję rodzica.
Przebudowałem stronę Czarodziejskich Smyczków, bo poprzednia wersja nie pokazywała tego, co w tym miejscu najważniejsze: ludzi, atmosfery i sposobu pracy z dziećmi.
- Rola
- Treść, struktura, projekt, wdrożenie
- Czas
- 1,5–2 tygodnie
- Publikacja
- 9 czerwca 2026
- Warsztat
- Figma, Antigravity, Cloudflare
- Status
- Działa na czarodziejskiesmyczki.pl
Punkt wyjścia
Stara strona mówiła dużo, ale niewiele pokazywała.
Nie zaczynałem od pytania, jak zrobić ładniejszy interfejs.
Najpierw chciałem zrozumieć, co nie działa w pierwszym kontakcie rodzica z przedszkolem. Stara strona przypominała długi dokument, kontakt nie był łatwy do znalezienia, a galeria była pusta. Rodzic dostawał informacje, ale nie dostawał jasnego obrazu miejsca.
Cztery pary zrzutów całych stron w 1440 px. Wybierz podstronę i przewiń kadr: obie wersje przejdziesz od nagłówka do stopki w tej samej skali.
Pod zdjęciem z hasłem Montessori ciągnie się tekst: oferta, pełne biogramy kadry, plan dnia i lista uroczystości. 11 441 px wysokości.
Otwórz zrzut w nowej karcie
Obawy rodzica, adaptacja, dzień w przedszkolu, zdjęcia, opinie i pytania w osobnych sekcjach. 6 880 px przy tej samej szerokości.
Otwórz zrzut w nowej karcieBiogramy kadry przeszły na „O nas”, więc strona główna skróciła się bez gubienia treści. Zostało to, co pomaga zdecydować, czy chce się poznać to miejsce bliżej.
Montessori, muzyka i taniec jako kolumny tekstu. Puste ramki po prawej to zdjęcia, których archiwum nie zachowało.
Otwórz zrzut w nowej karcie
Filozofia w trzech punktach, zdjęcie z sali, akcje i certyfikaty, a pod nimi trzynaście osób kadry.
Otwórz zrzut w nowej karcieStara strona rozkładała podejście na trzy podstrony: Pasja do nauki, Muzykoterapia i Zdrowe nawyki. Nowa zbiera je w jednym miejscu, obok ludzi, którzy je realizują.
Cała treść podstrony, która miała pokazywać przedszkole.
Otwórz zrzut w nowej karcie
Sześć na start i przycisk, który dokłada kolejne.
Otwórz zrzut w nowej karcieNajprostsza para w tym zestawieniu i najbardziej namacalny rezultat projektu.
Stara strona nie miała podstrony kontaktu. Zapisy, telefon i karta zgłoszeniowa leżały na dole „Informacji”, pod długą serią komunikatów.
Otwórz zrzut w nowej karcie
Telefon, e-mail i godziny po lewej, formularz po prawej, a pod nim karta PDF do wydruku.
Otwórz zrzut w nowej karcieRodzic nie musi szukać, gdzie się zgłosić. Wybiera tylko, w jaki sposób.
O kadrach „przed”. To ostatnie kopie z Web Archive sprzed 9.06.2026. Archiwum nie zachowało fontu ikon ani części zdjęć, dlatego w menu widać puste kwadraty, a na podstronach puste ramki. Na żywo tak to nie wyglądało. Kadry „po” zrobiłem 23.09.2026 z działającej strony.
Najpierw tekst
Najpierw napisałem stronę.
Z NUEVE wyniosłem zasadę, do której regularnie wracam: stronę najpierw trzeba napisać i sprawdzić, czy dobrze się ją czyta. Dopiero później przychodzi warstwa wizualna.
Zlecenie Smyczków trafiło na moment, w którym i tak ćwiczyłem ten kierunek. Dwa tygodnie wcześniej projektowałem do szuflady panel rodzica dla centrum terapii, więc miałem gotowy klimat, zanim klientka się odezwała. Tekst i tak napisałem najpierw, bo to on decydował, które z tych wzorców mają sens w przedszkolu.
Ułożyłem stronę jak spokojne poznawanie przedszkola.
- 01Czym są Smyczki
- 02Adaptacja
- 03Podejście Montessori
- 04Prawdziwe zdjęcia
- 05Kadra
- 06Częste pytania
- 07Kontakt
Na pierwszym ekranie zostawiłem dwie drogi.
Nie chciałem zakładać, że każdy rodzic wchodzi na stronę na tym samym etapie decyzji.
„Zapisz dziecko” → Kontakt
Prowadzi prosto do kontaktu.
„Zobacz jak żyjemy” → O nas
Pozwala najpierw poznać miejsce i ludzi.
Młot i kowal
AI było młotem, ale kierunek należał do mnie.
Smyczki powstawały na początku mojej pracy z narzędziami do współkodowania. AI przyspieszało wykonanie, ale diagnozę, wybór i odpowiedzialność miałem ja.
-
Eksploracja, zanim przyszło zlecenie
Przygotowywałem w Google Stitch ekrany panelu rodzica dla terapii dziecięcej i zaznaczałem na nich, co zostaje, a co odpada.
Moja tablica w Figmie: ekrany pochodzą z Google Stitch, zaznaczenia i karteczki są moje. Notatki robocze, zostawione tak, jak powstały. Ptaszek: biorę, krzyżyk: odrzucam. -
„Wszystko elegancko ale to wszystko wymagałoby podpięcie i stworzenia systyemu logowania na strone i tu juz robimy cos ala apke webową! ciekawe ale wymagajace na maksa.”
Koszt wdrożenia -
„niby spoooko ale tu tez ciezka rozkmina ile tych ‘’postepow’’ mialoby byc i skala jak juz to nie 4 a do 5.”
Sens skali -
„Mega fajne przywitanie i znika problem personalizacji komunikatu”
Problem, który wzorzec rozwiązuje
-
-
Panel rodzica do szuflady
Z tego, co zostało, zaprojektowałem w Figmie własny panel rodzica: dwa stany menu i własne komponenty. To było ćwiczenie, którego nikt poza mną nie widział. Nazwę SensoBazy wpisałem roboczo, bo wcześniej z nią pracowałem.
Co przeszło z ćwiczenia na Smyczki
- Nagłówek w dwóch rejestrach
- Druga linia kursywą w kolorze akcentu: w ćwiczeniu „Zobacz, jak Liam dzisiaj rozkwita”, na Smyczkach „Galeria Magicznych Momentów”.
- Etykieta w pigułce
- „Nadchodząca wizyta” nad kartą w panelu, „Nasza codzienność” nad nagłówkiem galerii.
- Miękkie karty na ciepłym tle
- Mocno zaokrąglone, bez twardych ramek.
- Ikona w zabarwionym kółku
- Przy podsumowaniu tygodnia w panelu, przy telefonie, e-mailu i godzinach na kontakcie Smyczków.
- Przyciski w kształcie pigułki
- Główny wypełniony, drugi obrysowany albo tekstowy.
- Kolor nie przeszedł
-
brąz
#925531w ćwiczeniu, zieleń#8EB085Smyczków.
-
Tekst i struktura
Przygotowałem inspiracje, napisałem treści, ułożyłem strony i określiłem rolę każdej sekcji.
-
Kod
Antigravity pomagało przekładać te decyzje na kod. Gdy czegoś nie rozumiałem, dopytywałem, co zmieniamy i dlaczego.
-
Kontrola i wdrożenie
Uruchamiałem projekt lokalnie, sprawdzałem responsywność i wracałem z poprawkami. Potem wdrożenie na Cloudflare i poprawki już po publikacji.
Trzy decyzje
Trzy małe decyzje odsłoniły prawdziwy sposób działania placówki.
Certyfikaty w lekkiej galerii
Na propozycję pani Ewy dodałem cztery certyfikaty w lekkiej galerii z powiększeniem. To nie dyplomy kadry, tylko ślady inicjatyw, w których przedszkole bierze udział: pierwsza pomoc, ochrona środowiska, pomoc zwierzętom. Miały urealnić placówkę i pokazać jej charakter, a nie być magazynem dokumentów.
Karta PDF pod formularzem
Pod formularzem dałem kartę zgłoszeniową PDF, którą sam zaprojektowałem. Cyfrowy formularz nie musi być jedyną drogą. Rodzic, który woli papier, może pobrać dokument i wypełnić go w swoim tempie.
Rezultat
Rezultat pokazuję uczciwie.
Smyczki mają dziś prawdziwe zdjęcia, widoczną kadrę, jasny opis podejścia i krótkie drogi kontaktu.
Najbardziej namacalny rezultat jest prostszy: zamiast pustej galerii jest prawdziwy obraz placówki, a rodzic może szybciej zrozumieć, komu powierza dziecko i co ma zrobić dalej.
- Zdjęcia w galerii
- 0 → 32
- Policzone w Web Archive i na działającej stronie.
- Podstawowa realizacja
- 1,5–2 tygodnie
- Szacunek z pamięci, bez zapisu godzin.
- Zapisy i zapytania
- brak danych
- Strona nie ma Analytics, więc zapisów nie da się połączyć z ruchem.
Stworzone przez niego strony Czarodziejskich Smyczków i SensoBazy są piękne, nowoczesne, przejrzyste, a przede wszystkim bardzo dobrze sprawdzają się w praktyce. Rodzice bez problemu znajdują na nich potrzebne informacje, a my wielokrotnie słyszeliśmy bardzo pozytywne opinie o ich wyglądzie i funkcjonalności.
Ewa Pietras, dyrektor przedszkola Czarodziejskie Smyczki
Granica danych
Nie pokazuję danych z Search Console jako rezultatu. Kliknięcia z Google wzrosły na początku maja 2026, miesiąc przed publikacją nowej strony, a wokół 9 czerwca nie widać skoku.
Strona nie ma też Analytics, więc ruchu nie da się połączyć z zapisami. Dlatego najważniejszym dowodem są słowa klientki, a nie kolejny wykres.
Współpraca
Współpraca zaczęła się wcześniej.
Zanim powstała komercyjna przebudowa Smyczków, zaprojektowałem dla tej samej właścicielki SensoBazę. W 2026 roku wróciłem do tamtego projektu, przeprojektowałem go w całości i przeniosłem statyczny serwis z Webflow do Astro 7, żeby uciąć niepotrzebny koszt utrzymania.
SensoBaza ma osobne case study, bo rozwiązuje inny problem: wróciłem do własnej pracy i oceniłem ją na nowo, zbudowałem system wizualny i zaplanowałem migrację tak, żeby nie ryzykować istniejących adresów ani pozycji, którą strona wypracowała wcześniej. Nowa wersja działa już pod adresem klientki. Oba projekty łączy klientka i wspólne materiały offline, ale każdy ma własną historię.
Wniosek
Czego nauczył mnie ten projekt.
Smyczki były moim pierwszym komercyjnym projektem. Rok wcześniej, przy pierwszej wersji SensoBazy, przeszedłem podobną drogę, od pierwszych pomysłów i rozmów z klientką po wdrożenie. Tyle że za darmo, a wtedy oczekiwania są zwykle mniejsze. Tu od początku wiedziałem, że praca jest płatna, więc musiałem się liczyć z presją czasu i z ustaleniami, których trzeba było dotrzymać.
Zmieniła się też technologia. Pierwszą wersję SensoBazy zbudowałem w Webflow, a Smyczki w kodzie, korzystając z narzędzi do współkodowania. Postawiłem je na Cloudflare i podpiąłem formularz. To były moje pierwsze kroki z kodem.