Projekt Interfejsu Formularza "EKO DOM"
Założenia projektu
To nowoczesny, wielostopniowy formularz internetowy (multi-step form) stworzony dla programu dotacyjnego EKO DOM. Służy do składania wniosków o dofinansowanie na rozwiązania ekologiczne (termomodernizacja, instalacje fotowoltaiczne, pompy ciepła) w ramach programów państwowych i unijnych, takich jak Czyste Powietrze, Mój Prąd 6.0 czy Moje Ciepło.
Główny cel: Zamiana zazwyczaj skomplikowanego, biurokratycznego procesu papierowego w intuicyjne, bezstresowe doświadczenie cyfrowe.
Główne założenia projektowe:
- Minimalizm i przejrzystość: Usunięcie zbędnych elementów zakłócających uwagę użytkownika.
- Stopniowe ujawnianie informacji (Progressive Disclosure): Rozbicie długiego procesu na małe, łatwe do przyswojenia kroki, co redukuje obciążenie poznawcze (cognitive load).
- Wysoka konwersja: Przejrzyste ścieżki wyboru i wyraźne przyciski akcji (CTA) zwiększające odsetek poprawnie ukończonych wniosków.
Style guide
System wizualny został zaprojektowany tak, aby łączyć naturę (ekologię) z technologią:
Paleta barw (Color Palette):
- Zieleń oliwkowa / Eukaliptusowa: Dominujący kolor akcentowy symbolizujący OZE, ekologię i zrównoważony rozwój. Używany w głównych przyciskach oraz nagłówkach.
- Ciemny Oliwkowy: Zastosowany dla stanów aktywnych i naciśniętych (Hover, Selected).
- Gołębi Błękit / Slate Blue: Odpowiada za elementy funkcjonalne (np. wskaźnik postępu, przycisk „ROZPOCZNIJ”, aktywne przełączniki), dodając interfejsowi świeżości i cyfrowego charakteru.
- Neutralne szarości: Stosowane dla stanów nieaktywnych (Disabled) oraz tła pól.
- Kolory walidacji: Ciepła czerwień dla błędów (
email#gmail.com) i zieleń dla poprawnie wprowadzonych danych.
Typografia:
- Nagłówki (HEADING): Geometryczny, mocno zaokrąglony font bezszeryfowy, który nadaje interfejsowi nowoczesny, przyjazny i mniej formalny wygląd.
- Tekst podstawowy (Body): Prosty, wysoki krój bezszeryfowy zapewniający doskonałą czytelność podczas wpisywania danych.
Komponenty i stany UI:
- Pola tekstowe (Inputs): Zaokrąglone krawędzie z precyzyjnie zdefiniowanymi stanami (Required field, Focused, Typing, Entered, Error, Success).
- Przełączniki i przyciski: Pełny zestaw stanów (Default, Hover, Selected, Disabled) zapobiegający pomyłkom nawigacyjnym.
Film z działania formularza
Wykorzystano format pionowy, idealnie dopasowany do przeglądania na urządzeniach mobilnych,
co jest kluczowe dla turystów korzystających z przewodnika bezpośrednio na szlaku.
Chcesz wykonać podobny projekt?
Napisz do nas wiadomość lub wypełnij formularz bezpłatnej wyceny!