Lawendowy Dom Seniora
Strona internetowa prywatnego domu opieki „Lawendowy Dom Seniora” została zaprojektowana jako czytelna, ciepła i przyjazna przestrzeń informacyjna skierowana do seniorów oraz ich rodzin. Serwis prezentuje ofertę domu opieki, warunki pobytu, lokalizację oraz formularz kalkulacyjny, który umożliwia użytkownikom samodzielne wyliczenie orientacyjnej ceny pobytu.
Interaktywny projekt
Przewiń myszkąWyzwanie
Klient potrzebował nowoczesnej, responsywnej strony prezentującej działalność prywatnego domu seniora. Ważnym aspektem była czytelność dla osób starszych, łatwy dostęp do informacji o lokalizacji, cenniku i kontakcie.
Rozwiązanie
Zaprojektowano przejrzystą, lekką wizualnie stronę opartą na WordPressie i PageLayerze. Użyto stonowanej kolorystyki inspirowanej lawendą, dużych nagłówków i kontrastowych przycisków CTA. Strona została w pełni dostosowana do urządzeń mobilnych.
Rezultaty
Nowa witryna znacząco poprawiła wizerunek placówki w internecie, nadając jej profesjonalny i przyjazny charakter. Użytkownicy mogą szybko uzyskać kluczowe informacje o ofercie, warunkach pobytu i lokalizacji, a dzięki interaktywnemu formularzowi wyceny — samodzielnie obliczyć orientacyjny koszt pobytu. Strona generuje stały napływ zapytań oraz zwiększa zainteresowanie ofertą, co przekłada się na lepszą widoczność i wiarygodność placówki w sieci.
Proces projektowy
Analiza potrzeb i celów
Proces rozpoczął się od rozmów z właścicielem placówki i analizą potrzeb seniorów oraz ich rodzin. Zdefiniowano główne cele projektu: stworzenie strony czytelnej, empatycznej i łatwej w obsłudze. Zebrano materiały o ofercie, zdjęcia obiektu oraz informacje dotyczące usług i cennika. Ustalono, że kluczowe będą dostępność, prostota i przyjazny ton komunikacji.
Architektura informacji
Opracowano strukturę strony, dzieląc treści na intuicyjne sekcje: „O nas”, „Oferta”, „Cennik”, „Galeria” i „Kontakt”. Priorytetem było ograniczenie liczby kliknięć do minimum oraz zachowanie logicznego porządku informacji. Zaprojektowano układ umożliwiający szybkie dotarcie do najważniejszych danych, w tym lokalizacji i formularza kontaktowego.
Wireframing
Na podstawie zebranych informacji przygotowano makiety niskiej wierności w Figmie. Skupiono się na układzie sekcji, hierarchii treści i rozmieszczeniu przycisków CTA. Makiety testowano z użytkownikami z grupy docelowej – osobami starszymi oraz ich bliskimi – aby ocenić czytelność i intuicyjność nawigacji.
Projekt graficzny
W oparciu o zaakceptowane makiety powstał pełny projekt UI w Figmie. Zastosowano stonowaną, lawendową kolorystykę oraz duże, kontrastowe nagłówki poprawiające czytelność. Całość utrzymano w spokojnym, eleganckim stylu, budzącym zaufanie i poczucie komfortu. Zadbano o spójność typografii, ikonografii i elementów interaktywnych.
Implementacja i testy
Projekt został wdrożony w oparciu o WordPress i kreator PageLayer. Zaimplementowano wszystkie sekcje zgodnie z layoutem oraz zoptymalizowano stronę pod kątem szybkości i SEO. Strona została przetestowana na różnych urządzeniach i przeglądarkach, aby zapewnić pełną responsywność i dostępność.
Optymalizacja i publikacja
Po końcowych testach funkcjonalnych strona została opublikowana. Wprowadzono narzędzia analityczne (Google Analytics, Search Console) oraz formularz kontaktowy i kalkulator pobytu. Na podstawie danych o ruchu i zachowaniach użytkowników wprowadzane są drobne ulepszenia UX, aby jeszcze lepiej odpowiadać na potrzeby odbiorców.
Design System
Typografia
Nagłówek H1
Sans-serif 36–44 px · proste krótkie komunikaty (np. „Wyceń pobyt”)
Nagłówek H2
Sans-serif 26–32 px · czytelna hierarchia treści
Tekst akapitowy
Sans-serif 16–18 px · wysoka czytelność dla seniorów · duża interlinia
Krótkie nagłówki i jasny język ułatwiają odbiór treści.
Paleta kolorów
#7A6AAE
Primary — Lawenda / Fiolet
#222222
Tekst — Ciemny szary
#FFFFFF
Tło — Biel (większość sekcji)
#F2F2F7
Tło — Bardzo jasny szary (delikatne odcięcia bloków)
Strona utrzymana jest w jasnych, spokojnych barwach z fioletowymi akcentami — zero żółci.
Komponenty UI
Hero + CTA
Główne CTA w kolorze fioletowym — kontrastowe, czytelne, krótkie hasła.
Karty 3-kolumnowe
Ikona + tytuł + krótki opis + link „Zobacz…”.
Sekcja 1–4 (benefity)
Numeracja kroków, czytelne nagłówki i krótkie zdania.
Spacing & Grid
Planowanie siatki: jednostka 8 px
Padding sekcji: 16–24 px
Marginesy między modułami: 32–48 px
Większe bloki: 56–80 px
Duże, jasne przestrzenie + minimalizm = elegancja i czytelność dla osób starszych.