Menu
When it comes to website design, the task of translating your business into the digital space can be daunting. For all cosmetic brands, whether a start-up or established international brand, the website is often the first and most important impression. For cosmetic brands, primarily e-commerce based companies, their website acts as the sole communicator of brand experience. According to a behavioral information tech enology study, it only takes roughly 50 milliseconds for someone to form an opinion about a business by their website. Fo Industries, such as the cosmetic space their website can define the success of the company. Therefore, in this article, you will find three fundamental principles that every brand should follow when designing a website in 2020.
When designing a website for this new era, every business should build their website using progressive mobile-first design. According to a 2019 study conducted by the World Advertising Research Center (WARC), 72.% of the world’s internet users access the web via only their smartphones. Therefore, you should expect that the majority of customers visiting your site will only interact with it via a mobile device. By this understanding, every design element on your website should be designed to support touch interactions on small screens.
A perfect example of a mobile-first website is that of skincare brand Kinship. As soon as you load up Kinship’s website on mobile, it is immediately apparent that the site was designed for touch interaction. On the homepage, the icons and type are large and spaced out, allowing improved legibility and accessibility. Additionally, rather than having the website be an endlessly scrolling page, Kinship used information cards that users can swipe through. Throughout the entire site, these interaction elements are defined by clear separation and contrasting colors.
When viewing the product assortment page, Kinship continues the same design language adding clearly defined cards to feature each product. Using a combination of contextual swipe interactions and vertical scrolling Kinship makes the product page easy to navigate. On this page, each product is defined by the high-resolution image as well as clear product title and description. All of these design choices make Kinship a simple and easy to use e-commerce website on a mobile device.
Just like the first principle, “Less is More” is all about making websites easy to use and to experience. Therefore, when designing a website, it is crucial to make sure the design has an unintrusive and straightforward design. For cosmetic brands, this translates into strategically using graphic elements to ensure the retainment of information hierarchy. When customers use your website, they should be able to quickly find the product they’re searching for or retrieve the information they need. In no way should any design element hinder the experience or make the task challenging.
A perfect example of a website that follows this principle to the core is blissworld.com. Bliss, which is also a skincare brand, has built its website around this principle of “Less is More.” On the homepage, Bliss uses defined geometric areas to indicate important information and sections within the page. On the top, the simple menu and quick-links are defined by the blue bar across. Moving further down the page, Bliss lists a featured product clearly defined by the image that places a light blue rectangle. This layering of elements communicates to the user what elements are essential in the website.
When on individual product pages, Bliss continues this defined information hierarchy through layering design elements. Also, throughout Bliss’s website, interaction points are clearly defined by changes in the graphical representation. For example, on the buttons below products, when hovering over the blue button, it turns into a pink and blue gradient. Additionally, when using the page jump or image carousel arrows, they become highlighted in yellow. These simple details allow users to recognize what can be interacted with easily.
Between all three principles establishing cohesive brand design truly translates across all aspects of website design. For cosmetic companies, it is crucial to maintain brand identity across all digital mediums. Therefore, when designing a website, it is always beneficial to incorporate design elements from the logo, product packaging, and other physical branded materials. The small continuity details from translating these brand touch-points into the core design of the website can help establish the brand cohesion.
One of the best examples of this translation is the website for skincare brand VERSED. For VERSED, the style of their product packaging is what defines the brand aesthetic. Therefore, when VERSED designed the site, they incorporated all the graphical elements of their iconic packaging. Beginning on the homepage, VERSED used the bold black lines and rectangular elements to anchor the page layout. On the top of the homepage, VERSED places a window-width header image with a bold call-to-action button.
Below the header image, VERSED defines a featured “Best Sellers” carrousel using a black line element transplanted from the logo. On the about page, VERSED uses bold aesthetically composed images that match their pastel brand colors. Additionally, each of the information sections uses the same drastic hierarchy of type present on their packaging. This graphical hierarchy adds to the contrast of the black type, bringing forward VERSED’s valued brand messaging.
Link up with me below, fill out the form, or reach out to me directly. I am always open to new and great opportunities.
