Konfigurator osłon okiennych

Dla firmy Włoch – Systemy Okienne i Drzwiowe z Lubartowa stworzyliśmy konfigurator osłon okiennych, który w intuicyjny sposób pozwala klientom tworzyć indywidualne zamówienia dopasowane do ich potrzeb.

🧩 Co potrafi konfigurator?

Konfigurator produktu został zaprojektowany tak, by administrator sklepu mógł w prosty sposób odróżnić zwykły produkt od konfigurowalnego, jak widać na pierwszym zrzucie ekranu.
Dzięki temu każdy produkt może być przypisany do własnego cennika w formacie CSV, który jest importowany jednym kliknięciem.

Użytkownik, po stronie frontowej, może:

• wybrać interesujące go opcje (np. kolor, rodzaj materiału, sposób montażu),

• wpisać dokładne wymiary produktu (szerokość, wysokość, odległość od krawędzi),

• natychmiast zobaczyć obliczoną cenę oraz podgląd osłony.

To rozwiązanie znacznie skraca proces zamawiania i eliminuje błędy pomiarowe.

 

⚙️ Technologia pod maską

W większości konfiguratorów branży okiennej podgląd tworzony jest z użyciem bibliotek PHP.
W tym projekcie poszliśmy krok dalej – zdecydowaliśmy się na bibliotekę Konva.js.
Jest to nowoczesna biblioteka JavaScript do pracy z grafiką 2D w technologii HTML5 Canvas.
Dzięki niej podgląd osłony jest generowany dynamicznie w przeglądarce użytkownika, bez obciążania serwera, co zapewnia:

• płynną obsługę nawet na słabszych urządzeniach,

• natychmiastową reakcję na zmianę wymiarów lub koloru,

• i znacznie szybsze działanie całego konfiguratora.

 

🌐 Sklep zgodny z zasadami Google E-E-A-T

Projekt został stworzony w duchu Google E-E-A-T (Experience, Expertise, Authoritativeness, Trustworthiness), czyli zgodnie z wytycznymi budowania wiarygodności w sieci.
Strona zawiera wszystkie kluczowe elementy wpływające na zaufanie użytkowników i ocenę Google:

• pełne dane kontaktowe firmy,

• formularz kontaktowy dostępny nawet na stronie głównej,

• opinie klientów,

• publikację certyfikatu firmowego,

• blog z poradami i aktualnościami,

• zakładkę „O firmie” z historią i zakresem działalności.

 

🎨 Projekt graficzny – Włoch Systemy Okienne i Drzwiowe (Lubartów)

Nowa odsłona strony internetowej Włoch – Systemy Okienne i Drzwiowe to projekt łączący nowoczesność, przejrzystość i zaufanie. Celem było stworzenie witryny, która od pierwszych sekund budzi profesjonalne skojarzenia, a jednocześnie zachowuje ciepły, domowy klimat – zgodny z branżą stolarki okiennej.

 

🏠 Styl i koncepcja wizualna

Projekt został oparty na jasnej, przestronnej kompozycji z dużą ilością światła i naturalnych zdjęć.
Dominujące barwy to:

• biel i jasny szary – wprowadzają spokój i minimalizm,

• granat i bordo – kolory firmowe, podkreślające stabilność i solidność,

• złote akcenty – symbolizują prestiż i doświadczenie.

Uwagę przyciąga duży hero banner z realistycznym zdjęciem inwestycji i hasłem:

„Nowoczesna stolarka okienna i drzwiowa – WŁOCH Lubartów”.

Zdjęcia budynków i wnętrz są ciepłe, wysokiej jakości i spójne kolorystycznie – budują wrażenie bezpieczeństwa i solidności wykonania.

 

📐 Układ i funkcjonalność

Strona została zaprojektowana w modularnym układzie sekcji, co ułatwia zarówno nawigację, jak i czytanie treści.
Każdy blok ma swoją wyraźną rolę:

• Nagłówek z danymi kontaktowymi i CTA do szybkiego kontaktu,

• Sekcja „Jak możemy Ci pomóc?” – prezentująca główne kategorie produktów w formie kart z realistycznymi zdjęciami,

• Certyfikat IBK – umieszczony w centralnej części, podkreślający wiarygodność,

• Opinie klientów – prezentowane w czytelnych kartach z oceną i zdjęciem,

• Realizacje – w formie galerii z opisami inwestycji,

• Sekcja o firmie – z portretem właściciela i listą atutów.

Całość tworzy spójną narrację marki – od doświadczenia po dowody zaufania.

 

💡 Elementy UX i detale

Projekt jest w pełni responsywny, zoptymalizowany pod urządzenia mobilne.
Dodatkowe elementy zwiększające konwersję i zaufanie:

• widoczny formularz kontaktowy w hero sekcji,

• ikonografia atutów (certyfikaty, rekomendacje, doświadczenie),

• konsekwentne użycie fontów o wysokiej czytelności,

• miękkie zaokrąglenia elementów i przyjazne kontrasty.

 

🧭 Tożsamość i spójność marki

Projekt graficzny nawiązuje do wizerunku marki rodzinnej z tradycją, ale w nowoczesnym wydaniu.
Zdjęcia zespołu, certyfikatów i realizacji wprowadzają autentyczność – kluczowy element zgodny z zasadami Google E-E-A-T.
Wizualnie strona łączy prestiż dużego producenta z ciepłem lokalnej firmy, której można zaufać.

 

📱 Responsywność

Cały sklep jest w pełni responsywny – poprawnie działa na komputerach, tabletach i smartfonach.
Panel konfiguratora został zoptymalizowany pod dotyk, dzięki czemu obsługa zamówienia jest równie wygodna na ekranie telefonu, jak na laptopie.

Zobacz sklep internetowy online