top of page


This project was for a web design class. We were asked to build a fully responsive e-commercial website from scratch using Html, CSS, javascript and implement all the elements we learned during this semester; Animated elements, checkout from, embedded video, embedded location map, contact form with bootstrap assisted validation, and Jquery-manipulation. I got inspired by the brand identity of a skincare brand Curology and wanted to challenge myself in developing a website that would create a cohesive look that would fit their product line and creatively meet the project's requirements.

Screen Shot 2021-12-27 at 3.38.35 PM.png
Screen Shot 2021-12-27 at 3.35.53 PM.png
Screen Shot 2021-12-27 at 3.37.43 PM.png
Screen Shot 2021-12-28 at 5.20.24 PM.png

Table of Content

Mood Board


  • Nude 

  • Modern 

  • Minimalist design with a color touch. 

  • Clean

  • Interactive elements.


Competetive Anlysis

I searched the web to get inspiration and observe recent website development trends out there and in that particular field. Then I did a comparative analysis on two of the websites I discovered.

Site Map

Based on the content required for the website and research done when comparing other skin brands, I created a sitemap, which helped me get a more subtle overall picture of the necessary content to sketch out all the pages. 

Sitemap- Web3-Final-1_edited.png


As I had mapped out the website's structure in my previous sitemap, I was now able to move forward to the visual design and layout on each page, starting with the rough sketches for both web and responsive screens.



Sticky Navbar

Small Screens

Screen Shot 2021-02-24 at 1.51.43 AM.png
Screen Shot 2021-02-24 at 1.52.14 AM.png
Screen Shot 2021-02-24 at 1.51.57 AM.png
Screen Shot 2021-02-24 at 1.52.06 AM.png

Style Guide 

Screen Shot 2022-01-26 at 9.46.56 PM.png

Stakeholder feedback

As I received the stakeholder's feedback, I gathered valuable feedback that helped me in my revise phase and changed a few details for a more successful final result.

  • Having the navbar the same color in all the pages would  help to emphasize the cohesive look of the website.


  • Sticky navbar that change color while scrolling.

Final Outcome

Check it out!

Mock up Web-3-2-1_edited_edited.png
bottom of page