Kadra wyżej
Na stronie „O nas” przesunąłem kadrę wyżej. Z perspektywy 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 przechodzisz 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 doświadczenie 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 współkodującymi. AI zwiększało moją siłę wykonawczą, ale diagnoza, selekcja i odpowiedzialność pozostały po mojej stronie.
-
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ślałem rolę każdej sekcji.
-
Kod
Antigravity pomagało przekładać te decyzje na kod. Jeżeli czegoś nie rozumiałem, wymagałem wyjaśnienia, 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 możliwością powiększenia. 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 umieściłem zaprojektowaną przeze mnie kartę zgłoszeniową PDF. Cyfrowy formularz nie musi być jedyną drogą. Rodzic preferujący papier może pobrać dokument i wypełnić go we własnym 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: stara pusta galeria została zastąpiona prawdziwym obrazem 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żniejszy dowód, jaki zostało zdobyć, to 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, przeprowadziłem pełny redesign i przebudowałem statyczny serwis z Webflow w Astro 7, żeby ograniczyć niepotrzebny koszt utrzymania.
SensoBaza ma osobne case study, ponieważ rozwiązuje inny problem: pokazuje ponowną ocenę własnej pracy, budowę systemu projektowego i migrację zaprojektowaną tak, żeby nie ryzykować istniejących tras ani pozycji wypracowanej wcześniej. Nowa wersja działa już pod adresem klientki. Oba projekty łączy relacja z klientką i wspólne materiały offline, ale każdy zasługuje na 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 przy takiej pracy 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 w tym świecie.