Ismail B.

December 14, 2022

I redesigned a candle business’ homepage

Key points

An aesthetically pleasing physical product should be leveraged as an integral focal point of your composition
Before designing any type of layout you must ask yourself: "What do I want viewers to learn and do?"
You can follow the 9-step layout design protocol in this post for any visual design project
Adobe Dimension is great for recreating imagery of physical products when quality photography isn't an option

In this redesign I talk about layout purpose, the entire layout design process, repurposing copy, Adobe Dimension for creating quality mockups, and more...

This is a redesign I did for Flux Academy's Instagram stories last year. See their highlights for more.

Background

Lumecor is an Atlanta-based business that sells beautiful luxury candles designed for relaxation.

The candles are handcrafted, eco-friendly and made out of soy and coconut wax. They are paraffin-free (paraffin wax is considered harmful to the environment) and have an 85-hour burn time.

The current website was designed and built in Shopify. Check it out here.

Before

✅ Great color palette and brand assets

Simple and reliable color pair that works with the message (premium luxury candles for relaxation). Black conveys elegance and sophistication while gold creates a feeling of wealth and grandeur.

We have lots to work with.

✅ Aesthetic product

We'll be sure to leverage this by visually emphasizing the product in the hero section to create visceral appeal.

❌ Lacks mood

The composition feels dull and static in terms of balance. The type choice and color application feel unbranded. We'll be sure to add visual interest as well.

❌ Not enough info (feels sketchy)

A good product web page should tell us what we need to know about the product, why we should care, and what we should do next in a graceful step-by-step fashion.

Including about and contact links in this hero section would also be beneficial.

❌ Poor, low-res imagery

This hurts credibility greatly. Your smartphone camera + an appropriate Lightroom edit can go a long way.

❌ Text on image hurts readability

The Redesign

🎯 Goals

Make the following visually prominent: Headline & product differentiators, product shot, link to view the offer(s)
Create a mood (select an appropriate layout style, typeface, color application and visual treatments)
Re-create the product in Adobe Dimension for imagery

⚙️ Process

STEP 1: Identify goals

STEP 2: Research

STEP 3: Prepare the content

STEP 4: Rough layouts / sketching

END OF PHASE 1 -> Get feedback

STEP 5: Define the mood

STEP 6: Collect visual ideas (moodboard)

STEP 7: Apply visual ideas

I like this black background being lit by candles.

I love the classical proportions of this typeface (while also slightly contemporary)

The gold text emphasis adds visual interest + makes use of brand colors

We could just separate the navigation with white space but I think a white divider adds a touch of flair ;)

Other ideas I tried:

END OF PHASE 2 -> Get feedback

STEP 8: Pick a spatial system and setup grid

A spatial system = your layout's rules

It all starts by picking a base number and letting all sizing and spacing be multiples of that base number. The layout below follows an 8pt system (I picked 8 as my base unit).

Notice how all the sizing and spacing numbers are multiples of 8?

32, 64, 224 are all divisible by 8.

This creates visual rhythm, creates consistency within the layout and removes any guessing on your end as a creator.

STEP 9: Layout efficacy checklist

END OF PHASE 3 -> Get feedback

^{Create product shot in Adobe Dimension}

Couldn't find a good product shot on the current site so I jumped into AD and tried to reproduce it with some dim lighting.

^{Setup logo}

I took a screenshot of their IG profile picture (their logo) and used the “Image Tracer” Figma plugin to convert it into a an SVG that I can manipulate.