This project is a website based on a mocked fragrances company called Chaleur. The company is focused on a luxury and elegant brand direction. In this project, I was responsible for interface and experience design and coding.
In order to create a luxury brand direction, we used a simple colour scheme which are the combination of monochromatic brown colours, black and white. To create contrast between the title and the body text, for headers, we used a serif font - Times and for the content, we used Lato which is a sans-serif font to make users comfortable to read the text.
For the user interface, I was responsible for product information, navigation, footer and about company pages. To continue the delicate brand direction, we used the atomic design to created simple and clean structure for each section. Atomic design also helped us to build a responsive website. When the size of the screen shrieked, we reduced the size of the elements or combine the content into one symbolic icon.
For the navigation, I placed functions which are frequently used by users. For example, product categories, search and profile functions. By placing those elements on the navigation, user can access to those pages anywhere.
For the footer, I provided content that are less important, but users can still access if they needed it. Content like store locations, company descriptions and policies can be found in the footer. Also, To help the user find the content quickly, the product description pages also separated to sections and ordered by the importance of the information.
There are multiple challenges I encountered during the coding process. One of the biggest challenges is to create a responsive navigation. When the navigation reduce to the mobile screen size, in order to provide the functions as the desktop screen, the icon need to be clickable. By just using css and html, it needs a complicated code in order to be usable. Therefore, I reach out to javascript to create the function.
If I could develop this project in the future, I would develop the back-end system in order to create a completely functional website. Also, I would add animations to enhance the interactions cue for interactive elements. Also, add animations to enhance the interactions cue for interactive elements.
