eCommerce Website Design for Male Grooming Products

A brand new online Male Grooming Products Store is about to hit your displays and I am delighted that Rabbitdigital Design has been awarded the project to develop the website.


tangerine ecommerce design for male grooming website
elegant tan colour ecommerce design
lime green male grooming ecommerce website

Following several meetings to discuss the general requirements of the site I began researching competitor website design and layouts. A key function will be to attract the right kind of visitors to the site and retain their attention. The target audience is expected to be quite evenly balanced between male & female. The majority of men buying grooming products online will be doing so for themselves while most women will be purchasing gifts. Overall the design of this eCommerce website will need to be clean and fresh to reflect the top end brands on sale throughout.

As you can see below I’ve created three designs for you to peruse as I usually do for large online projects. Traffic to the site will gradually build over time eventually peaking at high levels as a result of a variety of ad campaigns that are planned. You can therefore imagine whenever a spike in visitor traffic to the site occurs it needs to be able to handle large amounts of requests. Latency response times are becoming more & more important with the ever increasing use of mobile devices. In anticipation of this I’ve tried to keep the styling very clean and plan to use CSS wherever possible.

Keeping graphic files to minimum will help reduce server requests and hopefully speed up page load. I’ve tried to use images only when needed to promote the products and services with the exception of a few logo graphics and buttons so as you can see the designs above are clean and minimalistic!

Are you still with me? If so here are the three designs in a nutshell :
  1. First Design – I began with the logotype in the header, a crisp sans serif font in two weights and a slogan beneath. Your eye should first be drawn to the banner image in the slider just under the main navigation which at a glance shows the top level categories of the site. Once you’ve glanced the logo, high quality brands and lifestyle images further down the home page there should be no doubt what this website is about. I’m really pleased with the colour balance on this design. The white background, vibrant tangerine highlights and soft grey colours all work well together.
  2. Second Design – I took a different approach here and created something more elegant. I suppose the best way to describe this design is its the more serious of the three. With the logo centred in the header and made up using a delicate serif font this sets the tone for the rest of the design. Again you can see I’ve gone with two primary colours, two tones of grey and a natural almost bronze tan colour. Extensive use of white in the background and plenty of space in between the main elements gives this design a sophisticated flavor.
  3. Third Design – Modern and contemporary is the direction I wanted to take with this one. I hope you can make out the light key lines I’ve used around this concept which I’m sure you’ll agree keeps everything in order in a subtle way. Lime green for the highlighted elements, slate grey for the main panels and plenty of white space in the content area creates some nice contrast on this design. Occupying only two thirds of the page top the slider leaves room to locate three boxes to promote important and useful resources for visitors to the website.

Now that I’ve given you a brief overview of all three designs and the project in general I would love to here your thoughts. Any feedback, whether a couple of words to say “I like number?” or a little bit more, will be most welcome by myself and the client. Its always great to here what you all think as I’ve put so much effort into all three designs I really can’t choose between them by the time I’m finished!

So please please leave a comment no matter how small, oh and don’t forget you’re email address is never published! You could use a dummy address but this just means I can’t say “thanks for your comments”.

eCommerce Website Design for Male Grooming Products was last modified: March 23rd, 2012 by Warren O'Donoghue
Please share this article on :

41 Comments about “eCommerce Website Design for Male Grooming Products

  1. Hey woz
    For me its a toss up between 1 and 2. I think if there looking for a design that will attract both men and women then 1 is a strong contender, but that said….if they also want a professional, strong look then it has to be 2.

    1: great colour scheme and modern layout. Not overly masculine, clean design and easy to navigate.

    2: love the high quality feel of this design. Looks really professional and slick. Subtle colours….no clutter…really really nice.

    3: nice design but for me does not stand out like the other 2.

    Another set of amazing designs once again……xx

  2. Number 1 looks more natural and is the best of the bunch number 2 doesn’t appeal to a broad market and number 3 is a bit Ebayish if you know what i mean

  3. I love 1 & 2, I prefer 2 as it looks very crisp, clean and high quality. What is the company like on price? If expensive I’d go for 2 if mid range 1 and if lower priced 3 – though I think 3 looks the friendliest.

    I like the Orange on 1 reminds me of another large male grooming/aftershave brand 😉

  4. I think I prefer No 2 it looks clean cut and sophisticated. It shows, what looks like ,easy access to all grooming products. Not fussy on No 1 as I don’t like the orange and also it all looks a bit cluttered, although if it was less cluttered it may appeal to the younger customer. No 3 doesnt tell me enough about the web site, needs more information

  5. The second is by far the best. Good colour scheme and an uncluttered feel. I like that there are a smaller number of featured items with larger images and sub menus discreetly listed below. The other two look too busy in comparison. The main banner also has high impact and looks as if it scrolls. The other two banners have too much packed in. I didn’t read your rationale/methodology just went on my first impression and whether design would encourage me to explore the website. Hope comments are useful!

    1. Thanks Tom, still in the design phase at the mo so the centred logo may change… have a great weekend 🙂

  6. In my opinion No.1 and No.3 are very busy. There is a lot going on, and I feel it is easy to lose what is going on on the page.
    The balance on N.2 of both image and text works very well for me. The 3 dark images, 1 on the top, and the 2 on the sides hold the lighter images very nicely.
    Elegant and simple. But simple in a good way.
    Good luck.

  7. Hi,

    It’s between I and 2 for me. I think 1 is Definately he most neutral, 2 to me looks a bit more male, like a Gillette page (but then that could be images used.)

    I do like the location of the title and search bar on 2 though and prefer them to their location on 1.

    All very nice websites though. 🙂

  8. 2 is my fave Warren, I like 1 but just seems a tad too busy and the colour reminds me of L’Oreal’s mens range – would be a good thing if you weren’t trying to capture us females too?!?!

    I like the colours, font and white space of 2.

    Hope that helps! 🙂

  9. Not number 2 — Downton Abbey meets Zoolander and Cruella Deville. Number 3 — Like it, but not a chap with looks many would aspire to. Number 1 — like it, that’s the one for me.
    Haywood ( a Moulton Brown kind of guy ).

  10. For me, it’s number two … and by a long chalk.
    That said, it may be an age thing, as one and three would appear to be aimed at a younger demographic than 40-something me.
    To get more under the bonnet, the easiest way to sum up is what I don’t like about the others.

    NUMBER ONE
    A – The pictures. Shutterstock at its worst. Nobody has ever shared an apple like that and the bloke in the bull image is too painfully TV handsome.
    B – the orange colouring, when tied with the orange branding, makes this look like a site dedicated to Billy Jealousy rather than male grooming generally.
    C – A bit too much going on in the page for me. It’s much busier than the other two.

    NUMBER THREE
    A – Also the picture here. A bit too ‘nod and wink, nudge-nudge’ which makes me think of Zoo or Nuts (a definite switch off)

    Hope that helps.

  11. I like the colours in 1 as it reminds me of L’oreal but number 2 looks sophisticated and classy. Hope this helps.

  12. Love number 2 – has an upmarket feel and subtle colouring helps. I think the 1st design would be fine if you were an ebay shop where clients are focused on the product and not the image…. number 3 however does seem to have clearer / prominent product links whereas 2 looks a little like an e-magazine? If going for 3, I’d change the picture. Hope this helps

  13. I like number 1. it looks like the products are organic just from the colours of the website. They are all clear and look straight forward to use 🙂

  14. From some happy Tweeters :

    Kerry Campbell @artbykerrynyc
    I totally dig #2. It’s modern, clean and sleek!

    Nick Burridge ‏ @NJB2000
    My preference would be Middle, third then first! Thanks for asking!

    Brian Howe ‏ @BrianTheHowe
    @brianthehowe 2

    Andrew Soames ‏ @AndrewSoames
    Hi there – all three look pretty good but I’d go for the 2nd one with a main image more like the 3rd one, 2nd looks best nav.

    Andrew Soames ‏ @AndrewSoames
    don’t really like the orange on the 1st or the dark footer on the 3rd – offputting- having seductive girl in background good!

    Alan Houser ‏ @alanhouser
    Not that I studied them a ling time, but I prefer design 2. It’s striking without the clutter that I felt with the others.

    Rory Gilchrist ‏ @RoryGilchrist
    number 2 obvs. So pretty, very Mr Porter.

    Kevin164 ‏ @Dezarath
    the one with the couple eating the apple together. That image alone manages to retain or lock the page to memory.

    Dan George ‏ @lookatdan
    Hey! All designs look great. Love the colour combo in the first design best, with the orange, black and white. Looks nice!

    Farrell Spence ‏ @farrellspence
    Sorry if I’m late on this, it’s been a mad weekend. Number 2, by far.

    FelicityRussellJones ‏ @CherryDare
    I like the third design the best 🙂

    James Williams ‏ @SpaceFlightO
    sorry for the delay. All 3 are really good but my fav is no.2 seems cleaner, less busy

  15. Wow…difficult one this Warren…they all look great…but for me it’s number 3, I like the layout and the colour scheme. They all seem easily navigable but number 3 gets my vote!

Comments are closed.