Realizacje
Portfolio.
Nie mockupy. Działające strony.
Każdy projekt poniżej zbudowałem sam — od struktury i copy, przez design, po wdrożenie i optymalizację. Bez agencji, bez podwykonawców.
Rafałprojektant i założyciel DreamDesigners
Field report · 001
War for a Better Life
warforabetterlife.pl
Osobisty dziennik transformacji zbudowany od zera jako w pełni autorski projekt. Zamiast typowego bloga lifestyle’owego — surowy, ciemny interfejs w konwencji „raportu z pola walki”: grafitowe tło, rdzawy akcent, kontrast serifowego nagłówka z monospace’ową typografią. Wygląd, który nie udaje motywacyjnego plakatu.
Strona nie jest wizytówką — jest narzędziem. Czytelnik dostaje kalkulator kalorii liczony po stronie przeglądarki, cotygodniowy log postępów, checklistę „Ja vs Ja”, sekcję celów z paskami postępu, bazę wiedzy i zapis do newslettera. Całość działa na WordPressie z autorskim CSS-em, bez płatnych wtyczek i bez gotowych szablonów.
Zakres prac
Strategia i struktura
Architektura informacji, ścieżka czytelnika, plan monetyzacji i budowy społeczności.
Identyfikacja wizualna
Paleta, system typograficzny, layout — projekt zaczęty od statycznego prototypu HTML.
Wdrożenie
WordPress, autorski CSS, interaktywny kalkulator w JS, cache i optymalizacja.
Treść i lista mailingowa
Copy, blog, integracja newslettera, strony prawne i polityka prywatności.
→ Dowód, że projekt bez budżetu na wtyczki premium może wyglądać lepiej niż strona za kilka tysięcy złotych.
Case study wewnętrzny · 002
Grafiki AI dla marki
Grafiki AI · Identyfikacja wizualna
Jeden kierunek wizualny dla całej marki: ciemny, geometryczny świat grafik AI w jednej palecie. Czerń, złoto, biel, bez zdjęć stockowych.
Kilkanaście grafik w jednym kierunku, wdrożonych na stronie głównej, w kartach usług, w pakietach i w portfolio. Materiał, na który sesja zdjęciowa potrzebowałaby tygodni, powstał w kilka dni.
→ Projekt własny, nie zlecenie. Jedyny materiał, którego efekt zweryfikujesz bez zaufania mi na słowo.
Projekt demonstracyjny · 003
Demo: trener personalny
Strona z ofertą · sklep · regulamin
Komplet trzech podstron dla trenera personalnego: strona z ofertą (trzy formy współpracy, metoda w czterech krokach, FAQ, formularz kontaktowy), podstrona sklepu z plikami do pobrania i sprzętem oraz regulamin z polityką prywatności.
Wszystko zbudowane na standardowych widgetach Elementora, więc klient sam zmienia teksty, ceny i zdjęcia. To projekt pokazowy: firma, osoby, zdjęcia i dane kontaktowe są fikcyjne, formularz niczego nie wysyła, a płatności nie są podpięte. Przy realnym zleceniu dochodzą podpięty formularz, płatność i prawdziwe materiały klienta.
Co jest w zestawie
Strona z ofertą
Hero, trzy formy treningu z cenami, metoda, galeria, opinie przykładowe, FAQ i kontakt.
Sklep
Plany i poradniki do pobrania, sprzęt, zestaw, informacje o dostawie i prawa konsumenta.
Regulamin
Zamówienia, dostawa, odstąpienie od umowy, reklamacje, polityka prywatności i cookies (wzory do uzupełnienia).
Edycja przez klienta
Standardowe widgety Elementora, bez wklejonego kodu HTML w treści.
→ Tak wygląda gotowy zestaw dla małej firmy usługowej. Dane zastępcze, układ prawdziwy.
Projekt demonstracyjny · 004
Demo: barber
Strona salonu · cennik · rezerwacja · regulamin
Strona dla salonu barberskiego: cennik usług, zespół, zdjęcia salonu, galeria z automatycznie przewijanym slajderem, opinie, FAQ, godziny i adres oraz sekcja rezerwacji. Do tego osobna podstrona z regulaminem i polityką prywatności.
Wszystko na standardowych widgetach Elementora, więc właściciel sam zmienia ceny, teksty i zdjęcia. To projekt pokazowy: salon, osoby i dane kontaktowe są fikcyjne, zdjęcia są wygenerowane, a formularz rezerwacji niczego nie wysyła. Przy realnym zleceniu dochodzą działający system rezerwacji, prawdziwe zdjęcia i dane firmy.
Co jest w zestawie
Strona salonu
Hero, cennik, jak wygląda wizyta, zespół, salon, opinie przykładowe, FAQ i kontakt.
Galeria
Slajder ze zdjęciami: strzałki, kropki, automatyczne przewijanie.
Rezerwacja
Formularz z wyborem usługi, terminu i fryzjera (w demie atrapa).
Regulamin
Rezerwacje, odwołanie wizyty, reklamacje, polityka prywatności i cookies (wzory do uzupełnienia).
→ Gotowy układ dla lokalnej usługi z wizytami. Dane zastępcze, układ prawdziwy.
Projekt demonstracyjny · 005
Demo: stolarnia
Strona firmy · oferta · realizacje · FAQ
Strona dla stolarni na zamówienie: hero, trzy karty oferty z widełkami cen, cztery kroki od pomiaru do montażu, galeria sześciu realizacji, sekcja o właścicielu, opinie przykładowe, FAQ i kontakt.
Wszystko na standardowych widgetach Elementora, więc właściciel sam zmienia teksty, ceny i zdjęcia. To projekt pokazowy: firma, osoby i dane kontaktowe są fikcyjne, zdjęcia są wygenerowane, a strona niczego nie wysyła. Przy realnym zleceniu dochodzą prawdziwe realizacje, zdjęcia i dane firmy.
Co jest w zestawie
Oferta
Meble na wymiar, stoły z litego drewna, schody i parapety z widełkami cen.
Realizacje
Galeria sześciu prac z podpisami: wnęka, stół, schody, regał, garderoba, parapet.
O właścicielu
Historia pracowni, zasady współpracy i lista zalet.
FAQ i kontakt
Pytania o wycenę, termin, montaż i zwroty oraz przyciski do telefonu i maila.
→ Układ dla rzemieślnika, który pracuje na zamówienie i wycenia po pomiarze. Dane zastępcze, układ prawdziwy.
Projekt demonstracyjny · 006
Demo: gabinet fizjoterapii
Strona gabinetu · cennik · pierwsza wizyta · FAQ
Strona dla gabinetu fizjoterapii: hero z ostrzeżeniem o numerze 112, cennik usług w rozwijanych kartach, pierwsza wizyta w czterech krokach, sekcja o gabinecie, przygotowanie do wizyty, FAQ i kontakt.
Wszystko na standardowych widgetach Elementora. To projekt pokazowy: firma, osoby i dane kontaktowe są fikcyjne, zdjęcia są wygenerowane, a strona niczego nie wysyła, bo zamiast formularza ma przyciski do telefonu i maila. Przy realnym zleceniu dochodzi formularz z osobną zgodą na dane o zdrowiu oraz polityka prywatności sprawdzona przez prawnika.
Co jest w zestawie
Cennik
Pięć usług z czasem i ceną, rozwijane po kliknięciu.
Pierwsza wizyta
Rozmowa, badanie, terapia, zalecenia: cztery kroki.
Przygotowanie
Lista rzeczy do przemyślenia przed kontaktem oraz FAQ.
Bezpieczeństwo
Ostrzeżenie o nagłych objawach i numerze alarmowym 112 na samej górze.
→ Spokojny układ dla usługi, w której pacjent boi się pierwszej wizyty. Dane zastępcze, układ prawdziwy.
Projekt demonstracyjny · 007
Demo: remonty i budowa
Strona firmy · dwie ścieżki · etapy · realizacje · wycena
Strona dla firmy remontowo-budowlanej: wybór między pracami remontowymi i budowlanymi, rozwijane zakresy prac, etapy współpracy, galeria sześciu realizacji, sekcja o firmie, FAQ oraz formularz wyceny.
Wszystko na standardowych widgetach Elementora, więc właściciel sam zmienia teksty i zdjęcia. To projekt pokazowy: firma, osoby i dane kontaktowe są fikcyjne, zdjęcia są wygenerowane, a formularz wyceny niczego nie wysyła i nie zapisuje danych. Przy realnym zleceniu dochodzą prawdziwe realizacje, działający formularz z załącznikami i dane firmy.
Co jest w zestawie
Dwie ścieżki
Prace remontowe i budowlane w osobnych panelach, z przejściem do właściwego zakresu.
Zakres prac
Dwanaście kategorii rozwijanych po kliknięciu oraz etapy współpracy dla obu ścieżek.
Realizacje
Galeria sześciu prac z podpisami: łazienka, kuchnia, salon, dach, elewacja, dobudowa.
Wycena
Formularz z rodzajem prac, miejscowością, zakresem i materiałami (w demie atrapa).
→ Układ dla firmy, która robi i remonty, i budowy, i musi to klientowi szybko rozdzielić. Dane zastępcze, układ prawdziwy.
Za kulisami · 008
Jak powstaje strona
Brief · Elementor · teksty · telefon
Jak buduję stronę krok po kroku, na przykładzie demo trenera: od briefu i mapy podstron, przez układ w Elementorze i teksty, po sprawdzenie na telefonie. Z zrzutami z edytora i informacją, co robi AI, a co robię ręcznie.
→ Bez klienta i bez wyników, za to z całym procesem na wierzchu.
Chcesz taką stronę u siebie?
Napisz w jednym zdaniu, co chcesz osiągnąć. Odpiszę w ciągu 48 godzin i powiem wprost, co warto zrobić w pierwszej kolejności.