01. designing the page on Figma

The goal of this project was to design a landing page of a website of our choice on Figma. I thought it would be a nice challenge to design the landing page of an e-com website. I took inspiration from the Plantsome website, refining its design a little to give all the spotlight to the plants.

01. designing the page on Figma

In my Figma file, I designed the plant tiles so they would be responsive using auto-layout, which you can see below.

02. wireframing the landing page

Designing the landing page on Figma first was very helpful in understanding how I needed to code each element. I had never coded anything before so stripping the design to highlight the skeleton to code in HTML and CSS helped identify the structure of my code.