Mały producent żywności ma jedną szansę, żeby zrobić dobre pierwsze wrażenie: kilka sekund po wejściu na stronę klient widzi, czy marka jest wiarygodna i czy chce spróbować produktu. Dla Sokoniady, marki naturalnych soków tłoczonych, przygotowaliśmy lekką stronę internetową, która pokazuje soki, opowiada historię marki i prowadzi do kontaktu: sokoniada.pl. W tym case study opisujemy, jak podeszliśmy do strony producenta soków tłoczonych i co dokładnie na niej działa.
W skrócie: strona producenta soków tłoczonych
- Klient: Sokoniada, producent naturalnych soków tłoczonych
- Branża: produkcja i sprzedaż żywności, soki owocowe i warzywne
- Zakres: projekt strony, układ w Blocs, podstrony produktów, formularz kontaktowy, baner cookies, mapa witryny
- Technologie: HTML, CSS, Bootstrap, JavaScript, Blocs, lazysizes, obrazy WebP
- Adres strony: sokoniada.pl
Wyzwanie: sprawić, żeby soki wyglądały apetycznie, a marka wiarygodnie
Według strony Sokoniada tłoczy soki ze świeżych owoców i warzyw, między innymi z jabłek, rabarbaru, pigwowca japońskiego, buraka i czarnej porzeczki, bez sztucznych dodatków. Takim produktom nie służy przeładowana strona. Potrzebna jest czysta forma, dobre zdjęcia i zrozumiały opis tego, czym jest sok tłoczony.
Producent potrzebował strony, która:
- pokazuje ofertę soków w kilku sekundach,
- opowiada o marce prostym językiem, w sekcjach, które da się czytać na telefonie,
- zawiera rzeczowe informacje o produkcie: skład, pojemność, przechowywanie,
- jest szybka i tania w utrzymaniu, bo nie ma sklepu ani rozbudowanego panelu,
- daje jasną ścieżkę do kontaktu telefonicznego, mailowego i przez formularz.
Jak pracowaliśmy nad projektem
- Ustalenie roli strony: informacyjna wizytówka marki, bez sprzedaży online.
- Projekt wizualny: jasne, zielone barwy kojarzące się z owocami i ogrodem, dużo światła i duże zdjęcia.
- Wdrożenie: strona zbudowana w Blocs, z optymalizacją obrazów i leniwym ładowaniem.
- Testy: kontrola widoku na telefonie, formularza i podstron produktów.
W takich projektach największym ryzykiem jest nadmiar. Producent chce powiedzieć o sobie wszystko, a klient szuka trzech informacji: co to za soki, z czego są zrobione i jak się skontaktować. Dlatego już na etapie rozmowy ustaliliśmy hierarchię treści i odłożyliśmy na bok to, co mogłoby odciągać uwagę, jak rozbudowane galerie czy długie historie firmy. Każdą dodatkową sekcję można dołożyć później, gdy pojawi się taka potrzeba.
Rozwiązanie: lekka strona zamiast ciężkiego sklepu
Zdecydowaliśmy się na statyczną stronę zbudowaną w narzędziu Blocs na Bootstrapie. Nie ma tu bazy danych ani panelu CMS, który trzeba aktualizować, więc strona ładuje się szybko, jest prosta w hostingu i ma mniej elementów podatnych na ataki niż rozbudowany system. Dla producenta, który zmienia ofertę kilka razy w roku, to rozsądny kompromis między kosztem a jakością.
Stronę zaprojektowaliśmy wokół kilku prostych zasad. Po pierwsze, zdjęcia mają pierwszeństwo przed tekstem, bo soki kupuje się oczami. Po drugie, paleta opiera się na jasnej zieleni i bieli, z ciemniejszym zielonym kolorem w nagłówkach i przyciskach, dzięki czemu tekst pozostaje czytelny. Po trzecie, każda podstrona ma ten sam pasek z adresem e-mail i telefonami, więc klient nigdy nie musi szukać kontaktu. Do tego dochodzi font Open Sans, neutralny i dobrze znany z czytania na ekranach.
Karuzela, historia marki i apetyczne zdjęcia
Pierwszy ekran to karuzela z trzema dużymi zdjęciami owoców, a pod nią nagłówek „Naturalna esencja smaku” i opis marki. Obrazy są przygotowane w formacie WebP i ładowane leniwie, więc nie spowalniają wejścia na stronę. Niżej na stronie głównej widać znak „Produkt Polski” oraz zdjęcia butelek i owoców.
Lista soków i podstrony produktów
Zakładka Soki pokazuje wszystkie soki w układzie dwóch kolumn: sok z czarnej porzeczki, jabłek, pigwowca, rabarbaru i buraka. Każdy ma etykietę z ilustracją i krótkim opisem. Osobne podstrony produktów, na przykład sok z pigwowca czy sok z buraka, podają pojemność 300 ml, skład (100% soku z danego owocu), informację o pasteryzacji i wskazówki dotyczące przechowywania: po otwarciu trzymać w lodówce i spożyć w ciągu 7 dni, a osad uznać za zjawisko naturalne.
Sekcje opowiadające o marce
Na stronach jest też kilka krótkich sekcji, które budują markę: „Blisko Ciebie”, „Jakość na pierwszym miejscu”, „Od uprawy po gotowy produkt” i „Czysty smak, zero kompromisów”. To deklaracje producenta, według którego soki powstają bez sztucznych dodatków, konserwantów i barwników. Tekst o właściwościach owoców również pochodzi od klienta. Naszą rolą było nadanie mu przejrzystej formy: krótkie akapity, nagłówki i dużo białej przestrzeni, żeby czytelnik nie gubił się w gęstym tekście.
Taki podział ma też wymiar praktyczny. Lista soków pełni rolę katalogu, w którym klient porównuje smaki, a podstrony produktów pozwalają podać szczegóły, których nie chcemy upychać na liście. Jeśli producent doda nowy smak, powstaje po prostu kolejna podstrona o tej samej budowie, więc rozbudowa oferty nie wymaga przebudowy całej strony.
Kontakt i formularz
W nagłówku każdej podstrony znajdują się adres e-mail i dwa numery telefonu, a podstrona Kontakt zawiera dane firmy i formularz z polami na imię, adres e-mail i wiadomość. Dzięki temu klient szybko znajdzie sposób, żeby zapytać o soki.
SEO, RODO i bezpieczeństwo
- Mapa witryny: plik sitemap.xml wymienia stronę główną, listę soków, kontakt, regulamin, politykę prywatności i pięć podstron produktów, a także obrazy.
- Osobne adresy produktów: każdy sok ma własny adres, na przykład /sok-z-jablek/, co ułatwia wyszukiwarkom rozpoznanie tematu.
- Wydajność: lazy load obrazów (lazysizes) i grafiki WebP.
- Cookies i prywatność: komunikat o plikach cookie oraz podstrony z regulaminem serwisu i polityką prywatności.
- Bezpieczeństwo: strona bez bazy danych i panelu CMS ma mniej elementów, które trzeba aktualizować i zabezpieczać.
Uczciwie zaznaczmy, że to wciąż prosta strona. Nie prowadzi bloga ani sklepu, a dalsze działania SEO, takie jak opisy meta czy treści o procesie tłoczenia, są naturalnym kolejnym krokiem, jeśli producent zechce zwiększyć widoczność w Google.
W praktyce dalszy rozwój mógłby pójść w kilku kierunkach. Można dodać krótkie opisy meta i dane strukturalne dla produktów, galerię z procesu tłoczenia, sekcję z miejscami sprzedaży albo przejść na CMS, jeśli producent zechce prowadzić bloga z przepisami. Każdy z tych kroków da się wprowadzić na istniejącej stronie, bo jej struktura jest prosta i uporządkowana.
Technologie użyte w projekcie
- Blocs do budowy układu i eksportu stron,
- Bootstrap, HTML5, CSS i JavaScript dla responsywności,
- lazysizes i obrazy WebP dla szybkości,
- cookieconsent do komunikatu cookies,
- sitemap.xml dla wyszukiwarek.
Efekt: spójna wizytówka marki i prosty kontakt
Sokoniada ma stronę, która pokazuje soki, opowiada o marce i ułatwia kontakt, bez kosztów utrzymania sklepu czy panelu. Nie mamy danych o ruchu ani sprzedaży, więc nie podajemy liczb. Wartością jest to, że producent może przedstawić się klientom w profesjonalny sposób i w każdej chwili dodać kolejny smak jako nową podstronę. Strona jest szybka, czytelna na telefonie i spójna z tym, co marka komunikuje: prostotą, naturalnością i smakiem owoców, a nie ozdobnikami. Dzięki temu kolejne zmiany, od nowego zdjęcia po dodatkowy smak, wprowadza się szybko i bez ryzyka dla reszty serwisu.
Z perspektywy agencji to dobry przykład dopasowania narzędzia do potrzeb. Gdybyśmy zaproponowali sklep internetowy, producent płaciłby za funkcje, których nie używa, i musiałby zajmować się zamówieniami, których nie chce obsługiwać. Zamiast tego dostał stronę, która robi to, czego od niej oczekuje: buduje zaufanie, pokazuje produkty i prowadzi do rozmowy.
Dla kogo takie rozwiązanie
Taka strona sprawdzi się u małych producentów żywności, w gospodarstwach, wytwórniach lokalnych przetworów, piekarniach, winnicach i pasiekach oraz wszędzie tam, gdzie liczy się wiarygodny wygląd marki, a sprzedaż odbywa się poza internetem. Jeśli potrzebujesz rezerwacji lub sklepu, zobacz nasze realizacje: system rezerwacji łodzi, opisany w osobnym case study.
Najczęstsze pytania o stronę producenta żywności
Czy mały producent soków potrzebuje sklepu internetowego?
Nie od razu. Jeśli produkty sprzedaje się głównie bezpośrednio lub przez odbiorców, wystarczy dobra strona wizytówkowa z opisem marki, listą soków i szybkim kontaktem. Sklep warto dodać wtedy, gdy producent jest gotowy obsługiwać zamówienia, pakowanie i wysyłkę żywności. Stronę Sokoniady zaprojektowano jako informacyjną, co potwierdza jej własny regulamin.
Czym różni się statyczna strona od WordPressa?
Strona statyczna to gotowe pliki HTML, CSS i JavaScript bez bazy danych, więc działa szybko i jest prosta w utrzymaniu. WordPress daje wygodny panel do edycji treści, bloga czy sklepu. Przy kilku podstronach i rzadkich zmianach prostsza strona statyczna bywa wystarczająca, przy częstych aktualizacjach lepszy jest CMS.
Co powinna zawierać strona produktu spożywczego?
Nazwę i pojemność, skład, informacje o pasteryzacji, wskazówki dotyczące przechowywania i spożycia po otwarciu oraz dane kontaktowe producenta. Tak są zbudowane podstrony soków Sokoniady. Obowiązki informacyjne wobec konsumenta zależą od sposobu sprzedaży, dlatego zawsze warto je potwierdzić z doradcą od prawa żywnościowego.
Czy na stronie producenta żywności można opisywać właściwości zdrowotne?
Z dużą ostrożnością. Oświadczenia zdrowotne dotyczące żywności reguluje rozporządzenie UE nr 1924/2006 i nie każde stwierdzenie jest dozwolone. Jako wykonawca strony odpowiadamy za jej formę, a treści zdrowotne, które producent dostarcza, powinny przejść weryfikację osoby znającej przepisy.
Jak sprawić, żeby strona producenta była widoczna w Google?
Podstawą są osobne podstrony produktów, czytelne nagłówki, opisy zdjęć, mapa witryny i szybkie ładowanie. Dla lokalnego producenta ważne są też spójne dane kontaktowe i opisy tłoczenia czy pochodzenia owoców. Efekty w wyszukiwarce wymagają jednak czasu i regularnych treści, więc nie da się obiecać konkretnej pozycji.
Prosta strona producenta żywności: kiedy statyczna wizytówka wystarcza
Sokoniada sprzedaje soki poza internetem, więc nie potrzebuje sklepu ani panelu CMS. Wybraliśmy statyczną stronę z osobnym adresem dla każdego soku, mapą witryny i obrazami WebP ładowanymi leniwie. To dobry przykład zasady, że narzędzie ma pasować do potrzeb: mniej elementów do aktualizowania to niższy koszt i mniejsza powierzchnia ataku. Kiedy producent zechce rozwijać treści, na przykład bloga z przepisami, strona może przejść na CMS, a rozbudowa o nowy smak to kolejna podstrona o tej samej budowie. Uczciwie dodajmy, że to wciąż prosta strona, a kolejnym krokiem mogłyby być opisy meta i dane strukturalne produktów.
Szybkość ładowania to jeden z czynników odbioru strony i warto ją mierzyć; zasady opisuje artykuł o optymalizacji szybkości stron WordPress. Zasady czytelnego układu i hierarchii treści znajdziesz w tekście o projektowaniu stron internetowych. Podobną ścieżkę, ale z danymi technicznymi i formularzem B2B, pokazuje strona producenta organizerów ECODDC.
Jeśli nie jesteś pewien, czy potrzebujesz wizytówki, czy sklepu, porównaj koszty w kalkulatorze lub umów darmową rozmowę.
Potrzebujesz strony dla swojej marki?
Budujemy strony wizytówkowe, sklepy i systemy rezerwacji dla firm i producentów. Zobacz nasze usługi, sprawdź inne realizacje albo od razu skontaktuj się z nami. Pierwsza rozmowa jest darmowa.
