Green House
Team
Chelsea Jennifer Irawan, Yerim Doo
Contribution
Integrate UI/UX from Figma to HTML, CSS, & JavaScript, Developer
This website is designed to promote and sell succulent plants, boasting scalability across various devices. Developed using HTML, CSS, and JavaScript, it offers a seamless experience for users on different platforms.
Color Palette and Typography
Initial Development
Initially, we developed the prototype using Figma. We decided on the typography and the color palettes. Because our website is designed to sell succulents, our color palettes are adjusted accordingly. Aside from the website, we also created a mobile layout as well. In this project, I was responsible for integrating the website from Figma to HTML, CSS, and JavaScript.
Website Layout Draft developed in Figma
Issues & Solutions
Website Layout
One of our main issues is implementing the navigation bar. Initially, it was difficult to align it properly with the header of the page. On one occasion, the navigation bar was stuck to the top of the website. To solve this, I had to readjust the JavaScript in order to detach it.
Mobile Layout
For our mobile implementation, we had issues implementing the layout as we did not have any experiences creating a mobile layout for a website. Initially we were not able to condense and readjust the content in the website. I decided to apply the standard breakpoints for each platform such as mobile, tablet, and computer.
Home page & Product listing website layout final draft in Figma
Checkout & Payment form final draft in Figma
Results
At the end of this project, we managed to create a homepage, checkout page, contact page, and a product display page that is linked to the corresponding products. I have also gained the experience of developing a multi-platform website by using HTML, CSS, and JavaScript. In the case of future implementation, we would like to apply animation on the sections such as the text and images to make them more dynamic.
Integrated mobile layout
Integrated website layout