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.
Table of Content
Mood Board
Keywords
-
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.
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.
Wireframes
Sticky Navbar
Header
Small Screens
Style Guide
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!
