Sunny family

Przekąski oferowane przez naszego klienta są zdrową propozycją na szybkie zaspokojenie apetytu. Naturalność produktów została odzwierciedlona w lekkości i prostocie strony wprowadzonej poprzez czytelną strukturę oraz białe tło z pastelowymi akcentami na głównych podstronach takich jak strona główna, lista produktów oraz o nas.

Etap UI i decyzje projektowe

Informacje i treści pokazywane na stronie są rzeczowe i jasne. Ważne było pokazanie najważniejszej treści związanej z produktami w sposób zrozumiały i czytelny dla odbiorców. Każdy rodzaj produktu ma wydzieloną sekcję, gdzie pokazywane są produkty. Ponieważ produktów jest stosunkowo niedużo, Zdecydowaliśmy się na pokazanie ich wszystkich na jednej stronie co ułatwia porównanie i przeglądanie całego asortymentu.

Podczas projektowania strony produktu zwróciliśmy także uwagę na czytelność przekazu, co przełożyło się na prosty tekst oraz tabelę z wartościami odżywczymi. Ważne także było zastosowanie bardziej dynamicznego i nowoczesnego wyglądu tej strony. Przekąski klienta stanowią świetny dodatek do spotkań z rodziną czy znajomymi. Chwile spędzane z najbliższymi są żywe i pełne emocji. Aby odzwierciedlić charakter spotkań z najbliższymi w wyglądzie strony zostały wprowadzone bardziej wyraziste kolory. Zostały one dobrane indywidualnie do każdego produktu, tak aby były zgodne z opakowaniem. Dzięki temu strona każdego produktu jest spójna jednocześnie podkreślając charakter każdego produktu z osobna. 

Logotyp marki został wykorzystany do stworzenia wzoru wykorzystywanego jako tło w ważnych miejscach na danej stronie. Zabieg ten pozwolił na dodatkowe wyróżnienie najważniejszych części w strukturze każdej z podstron. Dodatkowo przestrzeń na której znajduje się wzór jest bardziej wypełniona w subtelny sposób. Nie odciąga uwagi od treści a jednocześnie dodaje energii.

Development

Ze względu na nieduże skomplikowanie struktury strony, etap developmentu został przeprowadzony na Webflow. Narzędzie to pozwala na pełną kontrolę nad projektem wizualnym, jednocześnie umożliwiając wdrożenie funkcjonalności, które są intuicyjne w obsłudze dla klienta. Głównym zadaniem tej części było wprowadzenie makiet do życia, dodanie interakcji jak, np. slider na stronie głównej czy mikrointerakcji odbywających się po najechaniu na element możliwy do kliknięcia.

Ważnym elementem każdej strony jest jej responsywność. Największe wyzwanie w tej kwestii stanowiła tabela z wartościami odżywczymi. Wymagała ona pomniejszenia aby była dopasowana do aktualnego rozmiaru urządzenia użytkownika, a jednocześnie zachowania czytelność.

Kolejnym aspektem było stworzenie systemu CMS, który odpowiada treściom przekazywanym na stronie oraz potrzebom klienta, tak aby mógł on zarządzać treścią dotyczącą produktów. CMS automatyzuje proces wyświetlania treści w zaprojektowanym szablonie. Każda strona produktu korzysta z tego samego układu, dzięki czemu strona pozostaje spójna wizualnie, niezależnie od tego, ile produktów zostanie dodanych.