Demystifying Landing Page Creation — A Step-by-Step Guide for Beginners

Innovation is not random, there’s a process to it. What goes into designing an impactful landing page, the layout, the nitty-gritty — it’s all here; waiting for you discover.

Today, I share with you the process I used in designing a a landing page for Planterie. Let me be clear that I have no ties with Planterie other than being a frequent customer. I looked them up online and realised their website wasn’t doing them justice. They were underselling their value, not communicating their USP upfront amongst other things; and as a result missing out on the huge online customer base.

📍 Planterie, Aurobindo Market, South Delhi

So I decided to audit their current website and redesign it — give it a proper structure, make it more visually appealing and communicate its true value to the online visitors.

Process Overview:

1. Understand the Project
2. Don’t Reinvent the Wheel
3. Seek Inspiration & Feedback
4. Design Deliberately
5. Articulate Design Decisions

Understand the Project

Take proper time to understand the business/project, it’s target audience, brand guidelines, competitors and its objective. Doing so will help you set expectations, get clarity and direction.

Start with the project brief

Set the design system early on

Don’t Reinvent the Wheel

You could re-invent the wheel if you want to but first answer is it worth it? In most cases, its not. There is always a better way to do things, it’s mostly likely that others have broken down the process for you. Find those books, video and figure out the anatomy of a website. It generally consist of the following: header, navigation, content area and footer.

Here are some helpful resources for landing page design:

• Flux Academy’s (Video & Template): Perfect Landing Page Design
• Figma (Video on Yt): Introduction To Design System
• UI Fundamentals: Website —Refactoring UI

Examples of a basic website structure

Seek Inspiration & Feedback

This is a crucial and fun part of the creative process. Be liberal in your search for inspiration but mindful while incorporating the feedback in your designs.

1. Get Inspired
Please note that dribbble posts are made to “look cool” in hopes to get viral and may not focus much on usability. A good rule of thumb is to always take inspiration from multiple sources; such as —

• Website of competitors
• Real sites related to the project
• Figma community

Dribbble references for each section of the website

2. Actively seek feedback
Hold a designer’s critique and include people with different design philosophies or from different fields altogether. It’s also a good idea to test your designs with the target audience — could be your mom, friend, co-worker or a total stranger.

Iterate like your life depends on it. Because let’s be real, your design’s life does depend on it.

Design Deliberately

If something exists, there must be a reason for it. Creativity and logic are not mutually exclusive and must work together to create a holistic experience. See below how everything is designed to serve a purpose.

A firm believer in designing with intent.

Articulate your Design Decisions

The methods listed below are taken from a book named “Articulating Design Decision” by Tom Greever. It’s an amazing read which helps designers better communicate their reasonings, collaborate more effectively and truly understand the needs of their stakeholders.

“Great designers are great communicators” — Tom Greever

1. See their perspective
Once you acknowledge that stakeholders are people too; often with competing priorities, it will ease your job. Learn to listen to what they’re not saying, practice implicit and explicit listening techniques to understand what matters most to them.

2. Write down objections
Designing experiences goes beyond just pushing pixels. It’s common to have differences when collaborating with developers, marketers and managers. A good way to tackle these differences is to anticipate and list down the probable objections in advance. For example:

a. Homepage Syndrome — Header does not have all the menu options, why?
b. Hero Section — Why was the copy changed & carousel removed?
c. Bento Grids — Why are we using these grids?

Writing down objections not only helps in getting everyone on the same page but it also forces you to consider different alternatives and have strong reasoning for your design decisions.

3. Too many cooks
Everyone is going to have an opinion about your design. Learn to distinguish between feedback that truly adds value to your project versus the ones that adds just more work. A good way to determine whether the feedback can be incorporated is to consider the following factors:
- Project’s objective
- UX laws and design principles
- Person’s level of involvement and influence over the project

Here’s a bird eye’s view of the final redesign.

Before & After

Bonus Tip

The devil is in the details. Don’t get stuck with details early on — don’t focus on the UI before your structure and copy is sorted. I suggest start creating your designs in grayscale because it forces your fonts to do all the heavy lifting. Most importantly, make sure your design is actually solving the problem it’s meant to.

Hope you enjoyed the read!
I’m always looking forward to connecting with fellow designers, developers, storytellers and moon shooters. If you’re interested in more of my work, visit my portfolio. If you want to collaborate, hire or just want to grab some coffee, feel free to reach out via linkedin or email.