Web Design Guide

Written by Aliena Cai | Youtube | Linkedin | Instagram | FastTrackUX

Last updated: September 13, 2024

At a Glance
If you ever need to design a website for a client, this guide will come in handy. Here, I
summarize my step-by-step process for designing and delivering a website using Figma and
Wix Studio. I believe web design is one of the most underrated tasks in the world – it's not
easy. So, I hope this guide makes your life a bit easier. Here's the process at a glance:

Discovery → Wireframe → Hi-Fi Design → Development → Delivery

Design is not a linear process; it's iterative. At every step, you may nd yourself in rounds of
iterations and testing. Let's get started. When you're lost, refer to my tutorial video on Web
Design.

If you own a business and would like me to help elevate its design to the next level, check out
my agency.

The Discovery Phase

Before you even start a Figma le, have at least two calls with your clients to clarify the project.
Some projects may be too early or too vague to begin the web design stage. You can run into
trouble diving into design too soon without a clear discovery phase.

During the discovery meeting with your client, clarify the following questions:
1. What’s the product, and what problem does it solve?
2. Who’s the target buyer and user of this product?
3. What’s the sales funnel for this product, and when does the website come into play?
4. What’s the goal of this website? Is it to generate leads or sales?
5. How frequently can your client communicate with you, and through what method?

1 Sold to
[email protected]
fi
fi
6. How much does your client want to be involved?
7. What’s their budget?
8. What’s the timeline?

If, after the discovery call, you realize your client cannot answer some of these questions and
the project is too vague, it's best not to move forward at that moment. Ask the client to narrow
their focus and schedule another meeting next month.

Pricing Strategy
If you're new to the eld, avoid competing on price. Competing on price can attract cheaper,
lower-quality clients. Even if you're still building a portfolio, avoid saying, "I’ll work for free" or
"I’ll lower my price." These statements may lead clients to think your service lacks value.
Instead, estimate the business impact of your design, such as an increase in conversion rates.
If you can demonstrate how your design will help the client make more money, they will likely
be willing to pay for the impact you create.

In the long run, aim to be “oversubscribed.” Check out the book Oversubscribed: How to Get
People Lining Up to Do Business with You by Daniel Priestley.

Timeline Management
Deadlines for any design project are usually ASAP. I've seen web design projects take
anywhere from 1 week to 9 months. My projects typically last about 2 months. I highly suggest
you plan for a bu er in your timeline. It’s not just about how hard you work; it's also about how
quickly your client can provide necessary assets and respond to your messages. Since
business owners often make quick decisions, plan for unexpected issues or changes – you
never know.

Wireframe
A wireframe is a basic outline of a design. It doesn’t need to be pretty or colorful. At this stage,
your goal is to establish the structure of the website.

2 Sold to
[email protected]
ff
fi
 I like to create 5 frames in Figma to set creative constraints. A good website is not necessarily
like an essay. Constraints help communicate the product faster and more clearly. I design for
mobile rst for B2C products and desktop rst for B2B products.

In Figma, you only need to master two tools for wireframing: rectangles [R] and text [T]. Use
rectangles to create shapes and text to write content. I avoid using Lorem Ipsum; if the client
doesn’t provide text, I use straightforward text in the wireframe and iterate later.

Feel free to use this Wix Studio wireframe template.

Your site should also pass the "5-second test." In 5 seconds, a viewer should be able to:
1. Understand what you sell
2. Trust that you are legitimate
3. Know what to do next

To achieve this, your hero section (the top part of your site) should include:
1. A strong and clear headline and subheadline that explain your product clearly
2. Strong and relevant visual design elements
3. Call-to-Action button

The rest of the sections should further explain the product and be written in a way that is easy
for both humans and search engines to understand. Write in paragraph form with headers
summarizing each key point.

Rarely is the rst wireframe the nal one. Present the wireframe to your client and iterate until
they like the structure. Then, move to the next section. If your client doesn’t know what a
wireframe is, explain it rst; otherwise, they might think the black-and-white layout represents
your hi- design skill level.

3 Sold to
[email protected]
fi
fi
fi
fi
fi
fi
The following image shows how I document design iterations, which helps communicate the
design process and makes building a portfolio easier.

Hi-Fi Design.
The Hi-Fi Design stage is about making the design pixel-perfect. I like to start with a discovery
page, gathering all the websites that inspire me for a speci c project.

4 Sold to
[email protected]
fi
Next, I explore multiple styles for the website. The idea is to present multiple options to the
client so you don’t waste time working on an aesthetic they don’t like. This includes font, size,
color, and illustrations.

Once the client approves a style, I move forward and create the entire page and all
breakpoints. The following screenshot includes the screen sizes and grid setup I use for
Desktop, Tablet, and Mobile.

If you’re unfamiliar with Figma, I have a free playlist for you.

5 Sold to
[email protected]
 Here are a few common mistakes people often make in Hi-Fi Design and how to avoid them:
1. Supersizing your page: To avoid this, open a prototype on the side and regularly check it
to get a sense of the real size. Figma's canvas makes everything look smaller. As a rule of
thumb, if your paragraph font is bigger than 18 pixels, everything on your site is too large.
2. Random layout: Align everything using an 8-point grid system. This means that all the
gaps between elements should be multiples of 8.

Since we will export everything from Figma to Wix Studio in the next step, it’s also helpful to
set up most elements using auto layout. This way, they will be exported as stacks in Wix
Studio, making front-end engineering easier.

Development
There are many tools you can use for development. Here’s a tutorial for building a site on Wix
Studio and another for building on Framer.

Regardless of the tool, the desktop will become the main breakpoint in the development stage,
so you want to get the desktop version right before moving on to Tablet and Mobile. This is
done by setting up stacks.

Kind note: Responsive design can take a long time, so be patient. Treat yourself to well-
deserved breaks in between. Enjoy the process!

Delivery
This stage usually involves publishing the site to your client’s custom domain, gathering
feedback, and getting paid. Congrats! You should be proud of yourself!

A Gift for You

I hope you nd this guide helpful! If you’d like to learn design more systematically from me, I
invite you to join my course Fast Track UX. Here’s a code for 20% o : DESIGNGUIDE, available
today! This course is designed for those who want to become product designers in tech. In the

6 Sold to
[email protected]
fi
ff
US, you can earn $100K - $400K/yr in this career path, and it’s a high-paying career around the
world too. While it's not necessarily about web design, many of the skills are transferable. The
focus is more on designing for B2B tech products. 30 days full refund guarantee.

Join my Email List for Free!

If you like the way I teach and explain things, I have good news! I share more exclusive insights
about design, business, and career wisdom in my email list, Trillion’s Cafe. Subscribe for free!

Work with Me
If you own a business and would like me to help elevate its design to the next level, check out
my agency.

7 Sold to
[email protected]