FRESCA WEBSITE
Fresca is a dedicated resource channel for employees of the pizza and pasta industry, drawing on industry insights, world-leading research and innovation. Inspiration for a thriving industry.
I was responsible for building out the user experience and user interface for the website, along with an implementation guide to ensure consistency for future website updates.
COLOUR PALETTE
Taking inspiration from the colours of the Italian flag, but pairing those with a secondary colour palette for a contemporary update. The top half of the circle is the primary colour palette, and the bottom half is the secondary.
TYPOGRAPHY
Using a combination of Serif and Sans Serif typefaces throughout to give a sophisticated and modern feel. Both fonts are Google Fonts and suitable for web usage.
ILLUSTRATIONS
Use of icons and illustrations are a great way to introduce consistency and replace the need for stock photography for non-food related topics eg. innovation and business insights. We see how our colour palette can be implemented and use a mixture of muted variations of the colour palette to add more depth.
WEBSITE UI ELEMENTS
To ensure a consistent styling and build across the website.
VISUAL STYLE & PHOTOGRAPHY
A mix of rustic photography with a clean and modern editorial style. To bring cohesion and consistency we established a style that focuses on beautiful close-ups of food, and the pizza and pasta making process using a warm, Instagram-like filter to create a natural tone. Shots aren’t highly stylised, so they feel like they’ve been taken in their natural cooking environment and we’ll incorporate people when it feels relevant.
USER EXPERIENCE
Prior to designing the UI, I was responsible for wireframing the user experience and experimenting with elements such as sticky navigation, full-width banners and different module formats to cater for the editorial style. It was important that the site encourages explorability and that the results are easy for the user to follow.
WEBSITE GRID
The use of a 12-column grid on desktop creates a responsive design when downsizing to smaller devices such as tablet and mobile. All modules follow this grid, with the exception of full-width modules. On mobile it is then simplified to a 6-column grid to work with the smaller device size.
