Case Study: Product Landing


As an exercise to learn CSS Grid Layout, I wanted to create a one-page landing page for a brand I grew up with in the West Indies. I chose NIDO, a powdered milk product that Iused in everything from cereal to cakes. Since the dairy industry on my island was not developed, it was easier to procure mild in a perishable form and NIDO was the premier brand.


I planned a page promoting NIDO's line of fortified milk for kids. For the concept, I wanted to use the flow of liquid as a visual cue guiding the user down the page. The keys for making this seem effortless were simplifying important chunks of information and adding transitions that complemented the liquid "flow. For the UI, it needed to reflect pastels associated with infants, but I also wanted to tap into the warmth of the Caribbean sun.



Using some of NIDO's existing content, I arranged it into a logical flow in a bulleted list.

First Mockup

In the first mockup, I designed a page using color values sampled from the milk can and applying various gradients. For typography, I initially went with a geometrics sans font, but keeping the type lowercase to maintain a youthful theme. The font colors were green and blue to provide a nice contrast against the yellow.

Initial Mockup

Final Mockup

I then simplified and refined the concept. I removed a few sections that seemed unnecessary and changed to a rounded sans-serif typeface that was more overtly playful.

Final Mockup

Prototype & Animations

Starting with boilerplate HTML and SASS templates, I coded the page using CSS Grid Layout. Once the basic prototype was built I used a lightweight Javascript animation library to prototype the transitions for the intro and page scrolls.


The end product was a nice simple landing page with strong art-direction and clean content presentation. Using CSS Grid Layout, I was able to position elements more precisely than ever before. This opened my eyes to the possibilities of CSS Grid and my interface design skills have improved because of it.