Designing a basic landing page

Written by
Chetana K.

I love working on my design skills and apply them to my digital content. Recently, I have decided to make my practice more organized (or categorized, I guess) and started my own design challenge. Let's get started!

Let's begin with landing pages. Landing pages are designed for specific goals. For example, in this article, I will be designing a landing page for a hair salon called The Hair Gallery.

Hero section for The Hair Gallery

The goal is to get more appointment bookings.

Since the goals have been finalized, I begin the work of laying out the framework. I usually do this with simple sketching on my iPad, or paper and pen.

I put down all the copy and forms for the page in the following order:

  1. Header
  2. Hero section
  3. Reason-to-execute-the-CTA section
  4. Reminder section
  5. Footer

Once I have the text, I reduce it to half. And I reduce it half again! Just how Steve Krug mentions in his book 'Don't Make Me Think'.

I gather the images that align with the brand identity, but I do not finalize the website images until I have all the copy available. The reason being, I get so distracted and lost in the image hunt, that my focus on other valuable information gathering is minimized.

Great! I have all my details and I have a rough idea of how the direction is going to be, since it's already been defined at the brand identity development stage. Let's put it all together in the wireframe.

Lo-Fi wireframe

It's important to remember that you can revisit the wireframe anytime you want and make changes accordingly. For example, I decided to show an image of happy woman instead of the carousel of the testimonials. The first time I created the wireframe, I did not realize how distracting it would be for the user to read those testimonials in the small carousel.

Having said that, since I had already created the brand identity for The Hair Gallery, the experience had to align with the theme that incorporated luxurious, minimal and feminine vibe.

Final design

And there you have it, a beautiful landing page for the hair salon business.