Kreatywnie W Drewnie
Strona internetowa firmy „Staniec Kamiński – Kreatywnie w Drewnie” została zaprojektowana jako nowoczesna i przejrzysta wizytówka prezentująca ofertę realizacji stolarskich dla inwestycji mieszkaniowych i komercyjnych. Serwis w uporządkowany sposób przedstawia główne obszary działalności firmy – okładziny ścienne, portale drzwiowe i windowe, lady recepcyjne, zabudowy szachtów oraz skrzynek na listy. Projekt skupia się na czytelności, dużej typografii, spójnej kolorystyce i prostym dostępie do sekcji Oferta, Realizacje i Kontakt, zapewniając profesjonalny i wiarygodny wizerunek marki w sieci.
Interaktywny projekt
Przewiń myszkąWyzwanie
Celem projektu było stworzenie nowoczesnej, responsywnej strony internetowej, która w czytelny i profesjonalny sposób zaprezentuje szeroką ofertę stolarską firmy. Istotne było zachowanie balansu między technicznym charakterem treści a estetyką nowoczesnej prezentacji – tak, aby strona była równie atrakcyjna dla inwestorów, architektów i klientów biznesowych. Priorytetem była również intuicyjna nawigacja i klarowna struktura informacji.
Rozwiązanie
Opracowano lekką wizualnie stronę w WordPressie z wykorzystaniem Elementora oraz elastycznych sekcji opartych o niestandardowe pola (ACF). Projekt bazuje na eleganckiej, minimalistycznej estetyce inspirowanej naturalnymi materiałami – drewnem, fornirem i metalem. Zastosowano duże nagłówki, kontrastowe akcenty, harmonijną siatkę oraz subtelne animacje przewijania, które nadają stronie nowoczesnego charakteru. Struktura została w pełni dostosowana do urządzeń mobilnych.
Rezultaty
Nowa strona internetowa skutecznie komunikuje profesjonalizm marki i ułatwia dotarcie do kluczowych informacji o ofercie oraz realizacjach. Przejrzysty układ i dopracowana wizualnie prezentacja portfolio przyczyniły się do zwiększenia liczby zapytań ofertowych, wzmocnienia wizerunku firmy w branży oraz poprawy doświadczenia użytkowników na urządzeniach mobilnych i desktopowych.
Galeria projektu
Widok strony głównej
Sekcja „Oferta”
Proces projektowy
Analiza i brief
Warsztat z właścicielami oraz przegląd dotychczasowych realizacji. Określenie celów: przejrzyste pokazanie oferty stolarskiej, mocna sekcja realizacji i łatwy kontakt. Zdefiniowano grupy docelowe: inwestorzy, architekci, klienci B2B.
Architektura informacji
Opracowano strukturę: „Oferta”, „Realizacje”, „O firmie”, „Proces współpracy”, „Kontakt”. Priorytetem było szybkie dotarcie do kategorii produktów (okładziny, portale, lady, zabudowy) oraz do formularza zapytań.
Makiety (wireframes)
Przygotowano makiety low-fi w Figmie z naciskiem na hierarchię treści i duże siatki zdjęć. Zaplanowano moduły pod Elementor + ACF, aby łatwo zarządzać realizacjami i kategoriami.
Projekt wizualny
Powstał design inspirowany naturalnymi materiałami: paleta drewno/metal, duża typografia, kontrastowe nagłówki. Ujednolicono prezentację kart realizacji i CTA („Zobacz realizacje”, „Wyślij zapytanie”).
Wdrożenie i testy
Implementacja w WordPress + Elementor z niestandardowymi polami ACF. Optymalizacja obrazów, Core Web Vitals, testy responsywności i dostępności (WCAG AA).
Publikacja i optymalizacja
Uruchomienie strony, konfiguracja analityki (GA4, GSC), mapy kliknięć i mikro-konwersji. Na podstawie danych wprowadzane są iteracyjne ulepszenia UX i SEO.
Design System
Typografia
Nagłówki (Hero / sekcje)
Duże, kontrastowe tytuły na ciemnym tle
Podtytuły i opisy
Minimalistyczna, prosta typografia bez dekoracji
Akapity
Stosowane w opisach usług, realizacji oraz opisach produktów
Paleta kolorów
#374151
Ciemne tło sekcji
#FFFFFF
Teksty tytułów / overlay na zdjęciach
#22C55E
Przycisk CTA – „Dowiedz się więcej”
#16A34A
CTA hover
#E5E7EB
Delikatne linie i obrysy
Komponenty UI
Karty usług (Oferta)
Duże zdjęcia → tytuł w lewym górnym rogu → opis → zielony CTA w lewym dolnym rogu.
CTA
Przycisk pełny: #22C55E → hover: #16A34A
Spacing & Grid
Siatka kart 2-3 kolumny desktop / 1-2 mobilnie
Odstępy między kartami: 16–24 px
Margines sekcji: 56–80 px