Sunny family

The snacks offered by our client are a healthy option for satisfying appetites quickly. The naturalness of the products is reflected in the lightness and simplicity of the site introduced through a clear structure and a white background with pastel accents on the main sub-pages such as the home page, product list and about us.

UI stage and design decisions

The information and content shown on the site is factual and clear. It was important to show the most significant content related to the products in a way that is easy to understand and clear to the audience. Each type of product has a separate section where products are shown. Since there are relatively few products, we decided to show them all on one page which makes it easier to compare and browse the entire range.

When designing the product page, we also paid attention to the readability of the message, which resulted in simple text and a table with nutritional values. It was also important to use a more dynamic and modern look for this page. The client's snacks are a great addition to gatherings with family or friends. Moments spent with loved ones are lively and full of emotion. To reflect the nature of meetings with loved ones in the appearance of the site, more vivid colors were inserted. They have been selected individually for each product to be consistent with the packaging. This makes the page of each product consistent while highlighting the character of each individual product.

The brand's logo was used to create a pattern used as a background in important places on a given page. This action made it possible to further distinguish the most important parts in the structure of each sub-page. Additionally, the space on which the pattern is located is more filled in a subtle way. It does not draw attention away from the content and at the same time brings energy.

Development

Due to the low complexity of the site's structure, the development stage was carried out on Webflow. This tool allows full control over the visual design, while allowing the implementation of functionalities that are intuitive for the client to use. The main task of this part was to bring the mockups into reality, adding interactions like, for example, a slider on the home page or micro-interactions that take place when you hover over a clickable element.

An important element of any website is its responsiveness. The biggest challenge in this regard was the table with nutritional values. It needed to be reduced in size to fit the current size of the user's device, while maintaining readability.

Another aspect was to create a CMS that suits the content conveyed on the site and the client's needs, so that the client can manage the content regarding the products. The CMS automates the process of displaying content in a designed template. Each product page uses the same layout, so the site remains visually consistent no matter how many products are added.