Jak powinny prezentować się strony internetowe z jedzeniem? 8 przykładów

Istnieje wiele typów stron z jedzeniem i każda ma charakterystyczne dla siebie funkcjonalności. Często to właśnie one w pewnym stopniu kształtują design takiej strony. Mimo różnych funkcjonalnych ograniczeń niektórzy twórcy potrafią jednak zwinnie przeskoczyć barierę utartych rozwiązań i zbudować naprawdę unikalne witryny. Zapoznaj się z interesującymi przykładami.

Strony internetowe z jedzeniem — charakterystyka

Dzisiaj praktycznie każda firma potrzebuje strony internetowej. Jest to jedno z podstawowych narzędzi komunikacji z klientami (obok mediów społecznościowych). Witryna przyda się także markom zajmującym się jedzeniem. Mowa tu nie tylko o restauracjach czy aplikacjach do składania zamówień. Poza gastronomią są jeszcze branże takie jak FMCG (Fast Moving Consumer Good — dobra szybkozbywalne, takie jak np. produkty spożywcze), strony z przepisami czy katalogi lokali gastronomicznych. Wspominając o jedzeniu, trudno zapomnieć także o napojach, więc do omawianej grupy witryn można by też zaliczyć firmowe strony producentów napojów alkoholowych i bezalkoholowych.

Strony internetowe z jedzeniem to, jak widać, całkiem spory i różnorodny zbiór witryn. Różnią się one nie tylko stylem elementów graficznych, ale także obecnością praktycznych narzędzi np. wyszukiwarek, aplikacji do rezerwowania stolików czy paneli do zarządzania swoimi zamówieniami i profilem po zalogowaniu.

Czym powinien się wyróżniać design witryn dotyczących jedzenia

Wśród interesujących witryn dotyczących jedzenia znajdziemy nie tylko takie należące do małych i średnich marek, ale także strony internetowe korporacji. Różni je wiele, ale mają także pewne cechy wspólne, do których należą:

• Responsywność — klienci restauracji często szukają lokalu w swojej okolicy na szybko, przy użyciu smartfona. Osoba, która nie będzie w stanie wygodnie przeglądać treści na telefonie, szybko opuści witrynę. Pamiętaj, aby zadbać o dostosowanie jej do urządzeń mobilnych.
• Właściwy sposób przedstawienia treści — dotarcie do najważniejszych informacji powinno być tak proste, jak to możliwe. Jednym z błędów popełnianych przez restauracje jest umieszczanie menu w formacie PDF. Takie rozwiązanie jest szczególnie złym pomysłem, jeżeli zakładasz, że klienci będą otwierać Twoją stronę na smartfonach, ponieważ oznacza konieczność przełączania się między dokumentem a przeglądarką.
• Estetyczne fotografie — dobre zdjęcia mogą sprawić, że ślinka nagle napłynie nam do ust, nawet jeżeli nie jesteśmy specjalnie głodni. Warto zainwestować w profesjonalne zdjęcia, ponieważ niskiej jakości fotografie mogą skutecznie odstraszyć gości restauracji lub sprawić, że ludzie nie będą zamawiać Twoich dań.

Co powinno znaleźć się na stronie internetowej z jedzeniem?

Odpowiedni projekt strony to tylko szkielet, który trzeba odpowiednio wypełnić, aby stworzyć jedyną w swoim rodzaju stronę. Smakowita historia to podstawa. Kupując usługi i produkty, konsumenci chcą wspierać pewne idee, które są dla nich bliskie. Na stronie dotyczącej jedzenia możesz pozwolić sobie na podzielenie się z użytkownikami bardziej szczegółową historią Twojej marki. Opowiedz coś wyjątkowego i wyróżnij się spośród innych firm. Możesz wspomnieć o wielopokoleniowej tradycji, ekologicznych procesach, lokalnych produktach czy wyjątkowym nastroju.

Inna ważna kwestia to widoczne dane firmy — jest to mniej istotne w przypadku portali nastawionych ściśle na składanie zamówień, ale kluczowe, na przykład, w przypadku restauracji. Jeżeli klienci nie będą wiedzieli, gdzie Cię znaleźć lub jak się z Tobą skontaktować, najprawdopodobniej poszukają innego lokalu.

Nie możesz również zapomnieć o referencjach od klientów. Nie pozwól, aby Twoi odbiorcy tracili czas na poszukiwanie opinii o Twojej restauracji w rankingach. Umieść referencje i komentarze klientów na temat Twojej strony i obsługi na witrynie tak, żeby pozytywne opinie od razu rzucały się w oczy odwiedzającym.

E-mail marketing, personalizacja i retargeting są ważnymi elementami strategii marketingowej w niemal każdej branży, ponieważ, dobrze wykorzystane, mogą ułatwić Ci utrzymanie klienta lub zdobycie nowego. Aby wykorzystać te rozwiązania marketingowe, musisz pozyskać dane odbiorców. Formularze do zbierania informacji należy umieścić w widocznych miejscach witryny (np. na stronie głównej czy kontaktowej). Możesz zachęcić kupujących do rejestracji, np. proponując 20% zniżki na następne zamówienie.

Narzędzia do robienia rezerwacji lub składania zamówień powinny znaleźć się na stronie praktycznie każdego lokalu gastronomicznego. Witryna powinna być zintegrowana z systemem do składania zamówień lub dokonywania rezerwacji — ułatwi to nie tylko pracę zespołu danej firmy, ale także samo zamawianie jedzenia.

1. Strona restauracji FIG

Prosta, ale elegancka strona restauracji FIG nawiązuje do stylu, w jakim utrzymany jest lokal. Na stronie The Restaurant opisana jest misja marki, dzięki czemu poznajemy ją lepiej, zanim przejdziemy do menu czy rezerwacji. Treści towarzyszą zdjęcia zespołu (którego członkowie są niżej przedstawieni), kuchni, restauracji oraz pracowników podczas pracy.

 

Twórcy strony przygotowali galerię ze zdjęciami, żeby klient mógł lepiej poczuć atmosferę tego miejsca i zobaczyć, jak prezentują się przykładowe dania. Stworzono także dział poświęcony publikacjom na temat FIG, co pozwala klientom lepiej poznać markę.

Rezerwacji można dokonać, zaznaczając w specjalnym kalendarzu ilość gości oraz datę, a następnie wybierając jedną z wolnych godzin w oknie pochodzącym ze zintegrowanego ze stroną, zewnętrznego systemu. Na dole strony umieszczona jest artystycznie wykonana mapka z danymi adresowymi i sekcja z ofertami pracy, a także link umożliwiający zapis do newslettera i przyciski mediów społecznościowych.

2. Estetyczne jedzenie - Black Star Pastry

Na pierwszy rzut oka nikt raczej nie zgadłby, że to strona internetowa cukierni. Jest to zdecydowanie powiew świeżości w tej branży. Na stronie Black Star Pastry widać ciekawe animacje, a projekt jest przeciwieństwem prostoty, mimo że utrzymany jest w dwóch klasycznych kolorach (czerni i bieli).

Produkty są podzielone na grupy — każdy produkt jest opisany, a opis opatrzony estetycznym zdjęciem. Warto zwrócić uwagę na sposób prezentacji każdego z produktów. Ładne zdjęcia wyróżniają się na białym tle i przykuwają uwagę internauty. Na tej stronie uporządkowanie elementów w kategorii produktów ciekawie łączy się z nietypowymi projektami graficznymi, tworząc wyjątkową, a zarazem praktyczną witrynę z jedzeniem.

 

Poprzez stronę można dokonać zakupu ciast. Natomiast w osobnym sklepie można nabyć kawę, ubrania, ceramikę, a także karty podarunkowe. Użytkownik może skonfigurować je samodzielnie, po przejściu do zewnętrznego systemu.

Strona Locations przejrzyście prezentuje adresy wszystkich sklepów marki i ich godziny otwarcia, a informacje te są przedstawione w nietypowy sposób — na „karteczkach” przypominających notatki.

3. Strona internetowa firmy spożywczej Field&Flower

Strona firmy sprzedającej żywność Field&Flower to przykład sklepu z jedzeniem z naprawdę szeroką ofertą. Problem przedstawienia wszystkich produktów i zachowania porządku na stronie marka rozwiązuje, tworząc podstrony dla każdego produktu i nawigację opartą o listy rozwijalne. W menu głównym znajdziemy też oferty specjalne.

Ciekawym rozwiązaniem dla osób, które nie mają czasu na robienie zakupów, jest zamówienie pudełka z większą ilością produktów. Obok oferty sprzedawca podpowiada, na jak długo i na ile osób powinna starczyć zamówiona ilość jedzenia. Można zdecydować się na subskrypcję, podobnie jak w przypadku popularnych diet pudełkowych, co jest niezwykle wygodne, ponieważ nie trzeba pamiętać o ponowieniu zamówienia każdego miesiąca. Z wszystkich sprzedanych pudełek firma przekazuje określoną kwotę fundacji FareShare South West walczącej z głodem na świecie.

 

Strona swoim designem i grafikami nawiązuje do motywów rustykalnych, wiejskich — ściśle powiązanych z oferowanymi produktami (wędlinami, serami itd.). Bardzo ładnie prezentują się strony About us i Our farmers, które pozwalają lepiej poznać i zrozumieć misję firmy, jej historię i jakość, którą oferuje. Witryna zawiera dużo przycisków CTA, umieszczonych w strategicznych miejscach - Shop Now, Get Started - które zwiększają prawdopodobieństwo dokonania zakupu. Pojawia się także obietnica przyznania zniżki za polecenie znajomym tej firmy.

4. Witryna producenta napojów proteinowych Slate Milk

Niemal natychmiast po wejściu na stronę Slate Milk internauta dowiaduje się, że w tajemniczych, designerskich puszkach, typowych bardziej dla napojów gazowanych, kryje się mleko czekoladowe Uwagę zwraca minimalistyczna, graficzna prezentacja zalet i właściwości produktu, znajdująca się zaraz pod sekcją Hero. W prosty sposób, bez mnożenia treści, marka przekazuje najważniejsze informacje o produkcie.

 

Treść stworzoną przez Slate Milk wzmacniają umieszczone, także na stronie głównej, referencje od zadowolonych klientów, którzy tłumaczą, w jaki sposób produkt wpływa na jakość ich życia.

Z witryny marki możesz przejść do sklepu internetowego. Przy każdym produkcie znajdziesz szczegółowe informacje na temat jego składu, a także porady wskazujące, o jakiej porze dnia najlepiej go spożyć. Pod opisem znajdują się referencje od klientów. W razie wątpliwości użytkownik może szybko uzyskać dodatkowe informacje przy użyciu chatbota — rozwiązanie to nie tylko pasuje do nowoczesnego stylu marki, ale także jest bardzo wygodne dla potencjalnych klientów. Poza zakupem jednorazowym można skorzystać także z subskrypcji.

5. Strona ze zdrową żywnością JUST Egg

Marka JUST Egg świetnie wykorzystuje gry słowne. Mocną zaletą strony jest oszczędna, ale chwytliwa treść. Nagłówek nie tylko informuje, ale i intryguje, obiecując potencjalnym klientom bardzo dobre jajka… robione z roślin.

Przewijając stronę, widzimy coraz to nowe zdjęcia i CTA sygnalizujące wyjątkowe właściwości produktu (np. możliwość odgrzewania jajka w tosterze). Klikając przycisk CTA, możemy przenieść się do podstron szerzej omawiających każde zagadnienie (porady są w formie filmików i wysokiej jakości zdjęć). Na stronie znajdziemy także listę przepisów (na różne pory dnia), uwzględniających wykorzystanie produktu firmy.

Na stronie Learn znajdują się fantastyczne animacje. Tutaj można dowiedzieć się więcej na temat idei marki i procesu produkcyjnego. Po przejrzeniu treści na tej stronie potencjalny klient dowiaduje się, w jaki sposób wybór tego konkretnego produktu, czyli alternatywy dla tradycyjnych jajek kurzych, pomaga poprawiać kondycję środowiska naturalnego.

 

Na samym dole strony znajduje się formularz zapisu do newslettera (bardzo prosty — wystarczy podać adres e-mail) z obietnicą w nagłówku We send really good emails, nawiązującą do głównego nagłówka strony. Nietrudno w to uwierzyć po przeglądnięciu tak niesamowitej strony z jedzeniem.

6. Strona z przepisami NYT Cooking

Witryna z przepisami NYT Cooking może z powodzeniem zastąpić Twoją ulubioną książkę kucharską. Na samej górze znajdziesz wyszukiwarkę przepisów, dzięki której szybko znajdziesz dania, na które akurat masz ochotę. Możesz także stworzyć własne konto i zapisywać ulubione przepisy oraz tworzyć własne listy zakupów po zalogowaniu.

Strona ma sekcję z polecanymi w danym tygodniu recepturami. Miniaturki składają się ze zdjęcia, nazwy dania i orientacyjnego czasu przygotowania, co ułatwia znalezienie odpowiedniego dla nas przepisu. Przepisy są podzielone na różne kategorie tematyczne np. najlepsze przepisy na chili lub gorącą czekoladę. Na samym dole strony znajdziemy wpisy z poradami na temat podstaw gotowania z zachętą w nagłówku - Master the basics (opanuj podstawy).

 

7. Dobrze wyglądające jedzenie - Lou Malnati's Pizzeria

Stronę restauracji Lou Malnati's cechują wysokiej jakości zdjęcia, prezentujące apetyczne dania ze świeżych składników, wyraziste kolory, duże nagłówki i widoczne CTA. Sekcja Hero składa się z różnych fotografii ii komunikatów przedstawionych w karuzeli — przypominają one trochę sezonowe wkładki do menu.

Nawigacja prowadzi do strony o historii marki, która istnieje i działa już od 1970 roku. Twórcy witryny podkreślają długoletnią tradycję restauracji i rodzinny charakter biznesu. Przede wszystkim jednak odkrywamy pasję jego twórcy i jego drogę do sukcesu. Dodatkowe podstrony pozwalają na śledzenie losów pizzerii dekada po dekadzie, od początku jej działalności.

Strona oferuje klientom pizzerii wiele ciekawych funkcjonalności, które ułatwiają dokonywanie zamówienia. Przydatna funkcja Join a waitlist (dołącz do listy oczekujących) pozwala na zarezerwowanie miejsca w restauracji i złożenie zamówienia przed przybyciem, dzięki czemu zespół restauracji może zacząć przygotowywać dania, przed przyjściem klienta do restauracji. Osoby, które często zamawiają pizzę (i inne dania) z dowozem, z pewnością docenią opcję Reorder (zamów ponownie), która pozwala zalogowanym użytkownikom szybko zamówić te dania, które zamawiali wcześniej.

 

Można również skorzystać z opcji Ship a pizza, która pozwala na zamówienie dania nawet do innego stanu. Na jednej ze stron można znaleźć porady na temat poprawnego odgrzewania tych potraw.

8. Strona sklepu z przetworami Granny’s Secret

Marka Granny’s Secret wykorzystuje w swoim brandingu popularne skojarzenie pysznych przetworów z talentem kulinarnym naszych babć. Spójny projekt wykorzystuje ciekawe style nagłówków i wysokiej jakości zdjęcia. Design dopełniają subtelne animacje podczas przechodzenia między stronami i specjalna animacja sygnalizująca ładowanie zawartości podstron.

Strona firmy jest dowodem na świetny storytelling z wykorzystaniem różnych form przekazu — treści pisanej, wideo i zdjęć. Niesamowite wrażenie robi wideo przedstawiające historię marki.

Ciekawym elementem, który może wpłynąć na sprzedaż, jest umieszczenie porad na temat wykorzystywania poszczególnych produktów zaraz obok ich opisów. To sposób na pokazanie klientowi, dlaczego może potrzebować tego konkretnego produktu.

 

Wyzwania w tworzeniu stron internetowych z jedzeniem

Podstawowym wyzwaniem jest ustalić, jakie funkcjonalności i elementy powinna mieć strona z jedzeniem, aby spełniać cele marki związane z obsługiwaniem klientów, dostarczać rozrywki, ale przy tym nie dawać wrażenia przesytu. Wybór odpowiednich rozwiązań może okazać się niełatwy. Ponadto, strony z jedzeniem mają dużo aktywnych użytkowników, co oznacza, że wszelkie zmiany i utrudnienia w korzystaniu z witryny zostaną od razu zauważone. Zespół pracujący nad portalem musi działać szybko i opracować dobry plan usprawnienia witryny.

Opracowanie odpowiedniego systemu do robienia rezerwacji lub dokonywania zamówień wymaga odpowiedniego podejścia do projektu i wykorzystania właściwych technologii. Takie narzędzie musi radzić sobie bez problemu z rosnącym ruchem, ponieważ popularność Twojej firmy będzie się zwiększać. Było to jedno z wyzwań, z którym nasz zespół musiał się zmierzyć tworząc system do rezerwacji Tablein. W celu rozwiązania problemów wydajnościowych przeprowadziliśmy dogłębną analizę systemu i zoptymalizowaliśmy kluczowe funkcjonalności. Poza poprawieniem różnych części kodu skupiliśmy się na optymalizacji baz danych. Ulepszyliśmy także interfejs i dodaliśmy nowe metody płatności. W efekcie udało nam się usprawnić działanie systemu i zagwarantować jego wysoką wydajność bez względu na rosnącą liczbę użytkowników.

Kwestia Smaku to dla odmiany jedna z najpopularniejszych wśród polskich odbiorców strona z przepisami. Jej użytkownicy potrzebowali wyszukiwarki, która szybko będzie podpowiadać trafne sugestie. Skorzystaliśmy z rozwiązań Apache Solr i modułów Search API, aby zbudować wygodne narzędzie do wyszukiwania treści po nazwach przepisów lub składników. Dla wygodny użytkowników stworzyliśmy również możliwość dodawania ulubionych przepisów do specjalnej listy, żeby łatwiej było do nich potem wrócić. Można też tworzyć własne notatki, widoczne tylko dla konkretnego użytkownika w poszczególnych częściach wybranych przepisów.

W Droptica wykorzystujemy Drupala do tworzenia wysokiej jakości stron korporacyjnych dla naszych klientów. Możemy pomóc Ci w ulepszeniu Twojej witryny lub stworzeniu strony internetowej z jedzeniem od podstaw.