Strona internetowa z katalogiem produktów — Heatking
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.
-
Dawid KotrysWłaściciel, dyrektor kreatywny -
MateuszProjektant UX
-
WiolettaElementor Developer
-
ArekSpecjalista ds. Wsparcia Biznesu
Prototyp — makieta strony internetowej
W pierwszej fazie tworzenia strony skupiliśmy się na zbudowaniu wstępnej makiety — prototypu. Na 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.
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.
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.
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ść.
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!
