UX Design | Style Guide for NNI
The Nestle Nutrition Institute website was designed around a responsive grid pattern
The Umbraco platform was chosen for the Nestle Nutrition Institute (NNI) website, with me serving as the lead art director. I devised a grid-based design that was both flexible and dynamic, facilitating the delivery of personalised content to users. It provides UK healthcare professionals access to a wealth of archived content.
Designing for CMS
We made full use of the brand colours to reflect nutritional theme and used striking background images to support the content topics. We also set out a consistent typographic styles to accommodate for the lengthy article titles and content hierarchy.
Content Placement
Initial page templates were designed and developed with flexibility in mind. We were then able to set out the various components and create a style guide for all the permutations of image and text content containers.
My team and I crafted a responsive grid-based interface, collaborating closely with the internal development team to ensure technical feasibility throughout the project's duration.
I created a comprehensive style guide for Nestle affiliates, enabling them to create and translate website content in their native languages. The guide included recommendations on appropriate image selections, character counts, and the correct utilisation of the components from the asset library to construct page templates.
Would you like to know more about me or this project?
CONTACT ME
Email: mai@5thirty.com | Mobile: +44 (0)7703 487077
