Lawendowy
Dla prywatnego domu opieki przygotowałem dodatkową stronę wizytówkę (one-page) pod adresem lawendowydomseniora.pl, uzupełniając istniejący, pełniejszy serwis pod lawendowy.eu. Landing został zaprojektowany jako prosty, czytelny ekran z kluczowym przekazem i wyraźnym CTA, kierowany do seniorów i ich rodzin. Nacisk położono na dostępność (kontrast, większa typografia), spokojną paletę inspirowaną lawendą oraz szybki kontakt.
Interaktywny projekt
Przewiń myszkąWyzwanie
Właściciel istniejącej strony lawendowy.eu poprosił o stworzenie dodatkowej, lekkiej wizytówki (one-page) z jasnym przekazem i szybkim kontaktem. Priorytetem była prostota, dostępność dla osób starszych oraz spójność wizualna z marką.
Rozwiązanie
Zaprojektowałem i wdrożyłem minimalistyczny landing na WordPressie (PageLayer + niestandardowe CSS), oparty na jednym ekranie (bez klasycznego headera i stopki). Zastosowałem większą typografię, kontrastowe CTA oraz paletę inspirowaną lawendą. Strona kieruje użytkownika dalej do pełnego serwisu.
Rezultaty
Nowa wizytówka pod lawendowydomseniora.pl zwiększa widoczność marki i ułatwia szybki kontakt. Prosty układ i czytelny przekaz poprawiają doświadczenie użytkowników, a jednocześnie wspierają ruch do głównej strony lawendowy.eu.
Galeria projektu
Widok landingu
Sekcja z CTA
Proces projektowy
Brief i cele
Krótkie warsztaty, określenie roli landingu: szybkie przedstawienie placówki, natychmiastowy kontakt oraz skierowanie do pełnego serwisu lawendowy.eu. Ustalono priorytety: czytelność, wysoki kontrast, duże CTA, empatyczny ton.
Architektura treści
Jednoekranowy układ z klarowną hierarchią: logotyp, krótki opis, korzyści, CTA i dane kontaktowe. Ograniczono elementy rozpraszające, zachowano spójność z identyfikacją wizualną.
Makieta low-fi
Szybki prototyp w Figmie pod test czytelności (wielkość czcionek, rytm akapitów, kontrast). Zadbano o intuicyjne rozmieszczenie CTA i danych kontaktowych na urządzeniach mobilnych.
UI i dostępność
Projekt graficzny z paletą inspirowaną lawendą, duże nagłówki i czytelne przyciski. Zastosowano wytyczne WCAG AA: odpowiednie kontrasty, focus-states, zrozumiałe etykiety.
Wdrożenie
Realizacja na WordPressie (PageLayer) z dopisanymi regułami CSS dla typografii i CTA. Optymalizacja obrazów, poprawa wydajności i konfiguracja przekierowań do lawendowy.eu.
Publikacja i pomiary
Uruchomienie landingu, integracja z analityką (GA4, GSC) i mierzenie kliknięć w CTA/telefon. Na podstawie danych wprowadzane są drobne usprawnienia copy i kontrastów.
Design System
Typografia
Nagłówek H1
Poppins SemiBold 36–40 px · lh ~1.3 · biały tekst na przyciemnionym wideo
Nagłówek H2
Poppins Medium 24–28 px · lh ~1.35 · subtelne podkreślenia akcentem
Tekst akapitowy
Poppins Regular 16–18 px · lh ~1.6 · wysoki kontrast (WCAG AA) na overlayu
Większe rozmiary i wysoki kontrast poprawiają czytelność dla seniorów i rodzin.
Paleta kolorów
#7A6AAE
Primary — Lawenda (CTA/akcenty)
#5B3F84
Primary Hover — ciemniejsza lawenda
#1F2937
Overlay/Dark — przyciemnienie wideo
#FFFFFF
Tekst — jasny (nagłówki/CTA)
Akcent lawendowy na przyciskach i linkach; jasny tekst na ciemnym overlayu w hero.
Komponenty UI
Karta informacyjna
Prosta karta z klarownym tytułem i krótkim opisem — jak sekcje pod hero.
Przycisk główny (CTA)
Lawendowy CTA ze stanem hover; etykiety krótkie i konkretne.
Spacing & Grid
Siatka 8 px
Odstępy wewnątrz kart: 16–24 px
Przerwy między sekcjami: 32–48 px
Hero/CTA: 56–80 px
Rytm 8 px i większe marginesy ułatwiają skanowanie treści.