Introduction

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
smartmockups_kl410fg1.png
Screen Shot 2021-12-28 at 5.20.24 PM.png

Table of Content

Mood Board

Keywords

  • Nude 

  • Modern 

  • Minimalist design with a color touch. 

  • Clean

  • Interactive elements.

unnamed-5.png

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

Sketches

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.

unnamed_edited.jpg
unnamed-2_edited.jpg
unnamed-3_edited_edited.jpg

Wireframes

Sticky Navbar
Header
Wireframe-web-3-1.png
Wireframe-web-3-4.png
Wireframe-web-3-5.png
Wireframe-web-3-3.png
Wireframe-web-3-2.png

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