Serene Mauve: Skincare Website Design

Type
Brand and website concept
Brand
Serene
Year
2022

Serene Mauve is a skincare website design for beauty brands that make as well as sell. It includes nine desktop pages: home, about, custom cosmetics, a skincare shop, a product page, a three step checkout and a contact page, all in soft mauve and cream with a refined serif voice.

Serene Mauve skincare website showcase: the home page large in front of the skincare shop and custom cosmetics pages on a soft mauve gradient.

The brief

A skincare website design with a calm, premium voice

Skincare buyers read a website the way they read a label: quickly, and with suspicion of anything loud. Serene Mauve answers with restraint. A dusty mauve, warm cream pages and a light serif give a custom cosmetics maker the quiet authority of a brand people trust with their skin.

The brief was to hold two audiences in one design: brands who want a product made for them, and shoppers who want to buy a product now. One structure serves both, with a manufacturing story up front and a shop one click away.

What we built

How the Serene Mauve website is built

The home page opens on a mauve header bar, a large serif headline and a beauty portrait. An about section sets a jar and white roses beside a ring motif, followed by reasons to choose the brand, services for custom and private label work, six round category photographs, a testimonial slider, a FAQ accordion and a blog band.

The about and custom cosmetics pages carry the manufacturing story: a dermatologist hero, team portraits, a vision and mission, brand values and a departments grid, then a custom manufacturing timeline that walks a brand from requirements through formula development to packaging.

The shop side opens on a flagship hero, concern icons and a grid of product cards on mauve tiles. A product page adds a photo, size and quantity controls, add to cart and buy buttons and related products. Address, shipping and payment pages share a white order summary panel, and a contact page closes the set.

Outcome

A cosmetics site that explains and sells

A beauty brand that adopts Serene Mauve starts with a complete, ready-to-brand structure for a cosmetics website: nine page designs, a manufacturing story, a shop and a checkout, plus a colour and type system defined once. It is ready to take your own products, photography and formulas.

Nine skincare pages from home to checkout

  • Nine desktop page designs from home to contact
  • Mauve header bar, cream pages and a refined serif heading style
  • Custom manufacturing timeline for private label and custom cosmetics
  • Six round category photographs and a testimonial slider
  • Skincare shop with concern icons and mauve product tiles
  • Product page with size, quantity, add to cart and related products
  • Three step checkout with a white order summary panel

Serene Mauve, home to checkout

Nine pages, scroll to move through each one.

Home

Full-length Serene Mauve skincare website home page design with a mauve header bar, a model hero, a jar and white roses about section, six round category photos, testimonials, a FAQ accordion and a blog band.

About

Full-length Serene Mauve skincare website about page design with a dermatologist hero, team portraits, a photo strip, vision and mission, commitments, brand values and a departments grid.

Custom Cosmetics

Full-length Serene Mauve skincare website custom cosmetics page design with a pink powder brush hero, a benefits section, a custom manufacturing process timeline and category photos.

Skincare Shop

Full-length Serene Mauve skincare website skincare shop page design with a flagship hero, round concern icons, a grid of product cards on mauve tiles and a blog band.

Product

Full-length Serene Mauve skincare website product page design with a product photograph, size and quantity controls, add to cart and buy buttons and a related products row.

Address

Full-length Serene Mauve skincare website address page design with address cards and a white order summary panel.

Shipping

Full-length Serene Mauve skincare website shipping page design with shipping method choices beside the order summary.

Payment

Full-length Serene Mauve skincare website payment page design with payment method choices beside the order summary.

Contact

Full-length Serene Mauve skincare website contact page design with a contact form on a white card and a mauve footer.

Want a site like this?

Tell us what you are building and we will come back with a written scope.
Get a Quote

Questions about Serene, Mauve

  • Serene Mauve includes nine desktop page designs: Home, About, Custom Cosmetics, Skincare Shop, Product, Address, Shipping, Payment and Contact. Each shares the mauve header, cream background and serif headings, and the longer pages add a FAQ accordion, a blog band and a footer with a newsletter field.
  • It suits cosmetics makers, private label brands and skincare businesses that want to explain how they work and sell products from one site. The manufacturing pages can be dropped for a pure shop, or the shop can be removed for a brand that only takes custom orders.
  • Serene Mauve can be rebuilt around your brand, products and photography as part of Websites & Ecommerce and Brand Identity work. Colour, logo, type, the page list and the checkout steps are all adjustable, and sections can be added or removed.
Next projectSerene, ScarletSerene

Let's put this in writing.

Tell us what you need. A reply comes within one business day, the written scope with dates follows the call within one business day, and you own every file, login and domain from the day it ships.