Agencja interaktywna + Agencja marketingowa = Two Colours

O projekcie

Naszym zadaniem było stworzenie strony internetowej wyposażonej w katalog produktów (z możliwością rozbudowy do e-commerce) dla firmy Heatking, która miała stanowić kompozycję, łączącą w sobie ciekawy design, bogaty asortyment produktów oraz kompleksową prezentację usług.

Heatking specjalizuje się w sprzedaży pomp ciepła, kotłów ciepłowniczych oraz systemów klimatyzacyjnych i stawia nie tylko na dystrybucję wysokiej jakości produktów, ale również na świadczenie usług montażu i projektowania.

Serdecznie zapraszamy do zapoznania się z procesem tworzenia strony www dla marki Heatking.

Autorzy projektu
  • Dawid Kotrys
    Właściciel, dyrektor kreatywny
  • Mateusz
    Projektant UX
  • Wioletta
    Elementor Developer
  • Arek
    Specjalista ds. Wsparcia Biznesu
Prototyp

Prototyp — makieta strony internetowej

W pierwszej fazie tworzenia strony skupiliśmy się na zbudowaniu wstępnej makiety — prototypuNa tym początkowym etapie naszym głównym celem było przygotowanie zarysu witryny, określenie jej głównych części i funkcji, jeszcze zanim przystąpiliśmy do tworzenia szczegółowego projektu graficznego.

Korzystając z narzędzi takich jak Figma i Miro, tworzymy przestrzeń, gdzie zarówno nasi projektanci, jak i klienci, mogą wspólnie analizować i dyskutować o strukturze strony już od jej wczesnych etapów. To podejście umożliwia bardziej płynną komunikację, a także ułatwia i usprawnia proces wprowadzania zmian.

Od początku precyzyjnie planujemy umiejscowienie każdego elementu strony, w tym różnorodnych sekcji, tekstów, elementów graficznych, multimediów oraz przycisków CTA, aby zagwarantować intuicyjność i funkcjonalność dla przyszłych użytkowników na każdym kroku korzystania z witryny.

Po opracowaniu prototypu organizujemy spotkanie z klientem w formie wideorozmowy. Jest to moment na wspólne przeglądnięcie zaproponowanego układu i omówienie wszelkich możliwych modyfikacji.

Prototyp strony internetowej z katalogiem produktów dla Heatking

Projekt graficzny

Starannie dopracowany projekt graficzny odzwierciedla energię nazwy firmy, w którym motyw „heat” (ang. ciepło) jest wyrażony na każdym kroku. Strona emanuje ciepłem dzięki dominującym barwom czerwieni, a każde zdjęcie zaakcentowane jest filtrem w tym kolorze, tworząc atmosferę pasującą do charakteru marki.

Strona główna strony z katalogiem produktów heatking

Przejrzystość i intuicyjność to kluczowe cechy strony, co widać już w sekcji hero głównej strony, gdzie przyciski call to action są wyraźnie widoczne na tle i kierują użytkownika do zaimplementowanego przez nas formularza kontaktowego lub bezpośrednio do katalogu produktów. Już od pierwszej chwili użytkownik jest kierowany do odpowiednich sekcji, a dostęp do różnych kategorii produktów ułatwiają odpowiednio dopasowane ikony. Istotne informacje takie jak numer telefonu czy godziny otwarcia są łatwo dostępne i widoczne na samej górze strony, co znacznie ułatwia znalezienie najważniejszych informacji.

Opisy kategorii na stronie głównej są przedstawione w sposób angażujący i skondensowany, unikając nadmiaru tekstu i przekazując tylko najistotniejsze informacje. 

Katalog jest bardzo przejrzysty, z produktami podzielonymi na kategorie, które można wybrać za pomocą filtrów, co ułatwia również selekcję według nazwy producenta. Każdy produkt jest szczegółowo opisany, z możliwością zapoznania się ze specyfikacją przed wysłaniem zapytania o dostępność.

Strona, poza samym katalogiem, oferuje również bogatą zawartość dodatkową, taką jak poradniki w formie bloga oraz galerię realizacji, co jest niezwykle cenne dla potencjalnych klientów zainteresowanych usługami firmy. 

Podstrona „o firmie” przedstawia markę i jej zalety, a także autentyczne twarze osób stojących za nią, co buduje zaufanie i zachęca do skorzystania z oferty. 

Implementacja

Zakodowanie strony

Wdrożenie strony internetowej z katalogiem produktowym było kluczowe w procesie jej powstawania. Do implementacji użyliśmy Elementora, który wyróżnia się prostotą użytkowania oraz intuicyjnością, dając tym samym naszym klientom możliwość samodzielnego dokonywania zmian w treściach, bez potrzeby angażowania ekspertów.

Możliwość, którą klient otrzymuje dzięki samodzielnej edycji zawartości strony, pozwala na szybką adaptację do ewoluujących wymagań rynku oraz zmieniających się gustów użytkowników. 

W trakcie tworzenia witryny wdrożyliśmy szereg funkcjonalności, aby uczynić ją jeszcze bardziej dostępną dla odbiorców oraz aby sprostać jej celom biznesowym.

Formularz kontaktowy

Wdrożyliśmy dwa rodzaje formularzy. Pierwszy z nich pozwala zainteresowanym klientom na złożenie zapytania o bezpłatną wycenę montażu. Drugi formularz został umieszczony przy każdym produkcie i służy do szybkiego zapytania o jego dostępność.

Formularz kontaktowy na stronie internetowe z katalogiem produktów

Gorąco zachęcamy do sprawdzenia tego projektu w całości na naszym profilu na Behance. Nie zapomnij też rzucić okiem na nasze inne realizacje – może znajdziesz coś, co Cię zainspiruje.

Marzysz o profesjonalnej stronie internetowej dla Twojej firmy? Umów się na bezpłatną konsultację i porozmawiajmy o tym, jak możemy wspomóc rozwój Twojego biznesu!

Porozmawiajmy i ustalmy plan działania!

Krótki formularz Wypełnij pełny brief

Twoje dane są bezpieczne Więcej o ochronie danych osobowych
Jak Ci się to podoba?
``