Designing the UI of a cosmetics website requires designing pages that showcase the services provided by the company, different products, their ranges, and customer review pages. Several designing principles are supposed to be used while designing the UI of a cosmetics website that can attract a maximum number of customers. This article covers several design principles to style a cosmetics website with a Home page, Products page, Individual Products Page, Customer Review Page, and About us section.
Table of Content
Designing Concepts & Principles
Color Theory:
- The selection of colors for a cosmetic website should be appropriate and about the products being provided. For eg. Garnier is a cosmetic website that uses subtle colors such as white, yellow, and light grey that match up with the packaging of their products.
Negative Spaces:
- The use of white spaces is extremely important to keep the website's layout clean and easy. Negative spaces are areas of white spaces that are of no use to the users, but just help in better visibility. Garnier's website has areas of white spaces after every section.
Alignment:
- A uniform alignment is important to attract users to the website as it helps in SEO (Search Engine Optimization) and also increases readability for the users. All the sections should be properly aligned one after the other and in a uniform manner.
Typography:
- Typography is the art of designing the text subtly and concisely with simple and readable fonts. Poppins is one such font which is simple but gives an elegant look. Garnier uses fonts such as Sans Serif & Gotham.
Textures:
- A good texture is equally important to improve the visibility of the website as it enhances the typography and alignment of the website. Garnier uses a subtle nature for the entire website. It's texture is more of a light theme based website and has a background of mostly light grey or white color.
Effects:
- Effects are captivating for any website, cosmetics too. It improves user interactivity with the website and makes the website look stunning as it acts as an additional feature. Many cosmetics websites use GSAP (Greensock Animation Platform) to create animations on opening of the website. Garnier uses slide bar animations for the advertisements on the very top of the page.
Infographics:
- Infographics is use of images to enhance graphics of the website. Selection of appropriate images helps users visualize better with the products. Garnier has several images of the products it provides that helps user gain knowledge about the products being provided.
Home Page
The home page of a cosmetics website should be visually appealing and should have the potential to attract customers. It should have an appealing background image on the very start of the website with effects to search and hover around the navigation bar.
Products Page
The Products Page should be highly captivating as this is where the audience get influenced. A good range of products along with their star ratings, and their pictures of high resolution help increase the reach of the product. Same goes with the Individual Products page too. Garnier uses two sections, one to display the new products, and the other ones to display the products that are much into use by people.
Individual Products Page
The Individual Products range consists of basically newer products that have been launched, which are good to go but have no current ratings available, since they are new products.
About Us
The about us page should consist more of images and lesser amounts of text in comparison with the former as images are clearly observed by the users more than text. The about us page should consist of an introduction to the website or the product, and the mission or objective the products aims to achieve along with the commitment it has established over recent years.
Interactive Elements - Footer & Buttons
The footer basically consists of some website links, a contact us section which helps the customers in providing feedback or contacting with the products company. It also consists of social website links such as Instagram, or twitter where the user can find the product.
Conclusion
Using different design principles and keeping in mind the typography, color theory and use of infographics, the cosmetics website UI can be enhanced to a very large extent. This helps in increasing the user interactivity of a website and increases the overall proficiency of users on the website. It also makes it look visually appealing and ravishing.
