The Ultimate Guide To Web Design (Ebook)
The Ultimate Guide To Web Design (Ebook)
The Ultimate Guide To Web Design (Ebook)
a UI Professional’s
Ultimate Guide
to Web design
Sold to
cornelpetre@gmail.com
Table Of Contents
About this e-book 03
Typography in Web 98
The general concept behind this ebook is to show you the ins and
outs of being an ultimate web designer, from learning the basic web
design principles to creating your very own web design project.
Introduction 04
While this opened up doors for so many people, it also created a lot
of misconceptions around the web design industry.
Fast forward 6.5 years, and I know that behind the visuals, there’s a
myriad of other complex things that build the entire web experience,
and I’m here to talk about them with you. The real value of a website
is in good design and things you can’t really see, like the UX research
or dozens of UI guidelines and principles.
There are a few important areas of design (and not only) you need to
master to charge what other successful designers and agencies are
charging. I’ll simplify this for you as much as possible and help you
progress in your career by letting you follow my exact steps when
designing web experiences for commercial clients.
Introduction 05
What is this ebook about?
This ebook is divided into 6 main segments - The Freelance Guide,
the Design Basics, Designing for the Web, The Web Design Process,
Intro to no-code tools, and Project Wrap-up.
no-code intro
freelance guide
design basics
Introduction 06
Next, we’re going to discuss the design basics, specifically applied
techniques, and explain how to setup our Figma files and grids.
We’ll talk about responsive design, the box model, web design best
Introduction 07
After that, I’ll introduce you to no-code development tools like
And while this is not a mandatory skill to master for a designer, it can
easily double your project salary (and rates) and make you much
Lastly, we’ll finish our ebook with a short guide and checklists to
ensure you carry out a design and website handoff the right way!
Simply put, we wrote this ebook as a complete web design guide for
design process and handoff. This ebook is for you if you want to:
learn how $10k+ websites are created and what goes on behind the
scenes, from getting your first lead on a call, closing them, and
Introduction 08
What this ebook isn’t about.
This ebook is not about web development, and it’s not about no-
hosting, plugins, and website optimization, but it does not cover the
My message to you
I hope this ebook will answer all the questions you might have about
Without any further ado, jump to the next page and get immersed
Introduction 09
The Freelance Guide
Freelancing
Why should you consider freelancing
Freelancing is awesome! And it has never been this easy. It’s
become extremely and increasingly popular in recent years,
especially among designers. What has made it that way?
For one, every single aspect of our design work has been simplified
through use of an appropriate app.
The life of a freelancer is much dif ferent now. In fact, it’s much
easier in every aspect of the work. You can very easily earn $3-5-10k
experience. Designers with very poor design skills are charging $5k
and upwards from clients that simply don’t know any better. What’s
the secret you may ask? There’s no secret and we’ll talk about that in
this ebook, don’t worry. But for now, let’s get the full picture and ask
design agency, you’d most likely find only entry-level jobs. Not to
mention the fierce competition you’d have to beat to get these jobs.
work, as well as how much you can earn, is all dependent on you. You
A typical freelancer
lots of stress
clients calling you 24/7
milestone is late
See, the good thing is, once you get past that first obstacle and
reach a healthy cashflow, there are no boundaries when it comes to
freelance work, literally. I know designers who don’t speak
communicative English and earn a lot of money, a lot.
And you know what the best thing is? I live in Poland, and I’m still
able to earn a steady $10-15k/month from my design work. With my
current cost of living, it is a lot of money
Not to mention how good it feels to wake up at whatever time I want
to, work with clients I choose to work with, have enough freedom to
go to a 9 am workout when most people clock in to start their
stressful 9-5s, and have naps in the middle of the day.
Now, how should you start your career? Let’s talk about that.
Finding freelance clients is hard when you’re starting out and gets
increasingly easier as you get more experienced with more projects
to back you up.
Create concept works and case studies, post them online, be active
on platforms where your clients hang out, and let them find you first.
But here’s the catch - you need to be at least better than an average
joe designer to be chosen first. It’s not that hard, btw.
Where to show off your skills is another story - here’s my take on it:
Fiverr - the platform most beginners start from
I’ll be honest - I don’t really like Fiverr.
That’s what the name stands for - Fiverr, as in five bucks, the
starting (and very often average) price you can pay for a given
service on that platform.
I know that people in less developed countries are willing to work for
much lower prices than, let’s say, Central Europe or the better-
developed West, but if you can find people who design websites for
$10, how do you want to be competitive?
We’re not even going to discuss the quality of that kind of website
but let’s be serious, someone who wants to pay $10 for a service of
this size is simply trying to take advantage of others.
is that it’s perfectly fine if you can invest some extra time on that
platform. First, you need to work on your profile, and have something
They’re a bit more strict than Fiverr, and you have to show them at
you need to send a proposal, CV, and very often, motivational letters
to sell yourself better than the rest. For some of these projects,
I got a few replies and one or two calls, but nothing solid. Until one
day, I got an invite to apply for a website redesign gig. A German
client needed a landing page for their upcoming urban photography
ebook. We set up a 30-minute Zoom call, I asked my questions, they
replied, we decided it’s a good fit and I got the job.
I liked that project, and the client too. It took me around 30-40 hours
to design and build their website on Elementor. They were thrilled
and paid me $1800 for the job.
Pro tip: I recommend trying Upwork once you have completed at least 2-3
commercial projects. Otherwise, they might decline your application.
We all know that half of the 140 hours you spend at a job is spent on
meaningless chores, talking with your friends, having PlayStation
breaks, or drinking 5 coffees a day. This was all focused work.
In reality, the offer was based more on value, rather than time.
Whatever the design services I was doing for my clients they far
exceeded that price anyway and they were happy to pay the amount.
The alternative to that was hiring a full-time designer and that was
way pricier and carried more reponsibility. If you need to know one
thing about hiring a designer full-time it’s that it’s much easier to
find a couple of clients than onboard and retain a good designer
price was more than fair for my clients. Nowadays, I’d charge $5k for
All my clients stuck with me for 6-12 months until I switched to a full-
start over, I could have the same system running in a few weeks.
Some of them are from companies like Meta and challenger banks.
I would spend more time on Linkedin if I were you. Even if you’re not
looking for a full-time job, it’s a great place to find connections and
build your network much faster.
If you know a guy who knows a guy who happens to be looking for a
designer - you’ve increased your chances of getting new work. Don’t
underestimate the power of the network.
was full of hope and motivated to make it work, but I soon found out
profiles that were extremely active and I didn’t have time for that.
No matter how objectively good your work is, it’s hard to get through
Whenever you check out the top page, you see the same profile
names, over and over, 100 or so creators that pop up all the time.
And if you can invest a few months or a year of your life into building
During the first few weeks, I didn’t get much traction. A few
followers here and there and some likes, but not too many; I think I
even got one job inquiry in the first 2 weeks. Then, I picked it up a
little bit, posted 2-3 times a day, spent around an hour commenting
on other profiles, and started seeing results. And I’m not talking
After that I started seeing job offers appearing every 1-2 days.
All you have to do is post, post, and post your work. If you’re just
starting, your best bet is to constantly practice your design skills by
creating designs. And I mean, creating them like a maniac. That’s
pretty much the biggest secret to growing on any social platform.
Turn that concept work into a Dribbble shot and post it online. Keep
repeating the process until you build good momentum.
Remember, though, posting once a week isn’t going to cut it and get
you in the game. You need to be consistent.
See for yourself what 100 days could do for you - you’ll be
amazed what being consistent rewards you with.
And one more thing - what’s great about Dribbble is that you don’t
need to design fancy, time-consuming projects to get a few leads
per week. There’s actually much simpler and time efficient way.
If your work follows the basic design principles and visual guidelines
I’m going to share with you in this ebook, you’ll attract the right set
100% it is.
That’s exactly what I did and I’m here to confirm it for you.
It’s not enough to post one shot on Behance and expect it to blow
up. You need to spend much more time on your presentation. It’s an
amazing place to show your case studies.
But as we all know, case studies take a ton of time to prepare, and
you need good material to make a good case study. Your local yoga
instructor’s website might not be the ideal topic for a full-blown
case study, but you know what they say - fake it till you no longer
have to fake it
I landed one really cool agency partnership there and one project I
regret accepting to this day - a young Italian hostel owner who kept
So many red flags I didn’t see back then... we live to learn from our
Every time I didn’t have any new projects lined up for the next
enough exposure to find new leads, to the point where I had to stop
where you no longer have to look for clients, and you get a steady
We’ve got two more ways of getting clients to discuss, and then
we’ll go over my pricing systems and explain how to set up your new
This might surprise you, but Facebook was the platform that
changed everything for me. Let me explain.
The first year of my web design journey I haven’t made any client
website. All of the websites I created were e-commerce stores I
made for myself trying to launch my clothing merch (I used to run a
fitness channel on Youtube) and a few other businesses. I created
like 10, maybe 15 different e-com sites - all failed miserably.
And even if it wasn’t strictly design knowledge, I did learn a lot during
the process. Next year, completely by random, I had my first local
client breakthrough. The project was successful, and I created 4 or 5
more websites for them. I kept designing locally for over a year.
I remember thinking their work wasn’t even that good, and they were
still getting tons of engagement and comments from people asking
to create a website for them.
I was able to close one of these first few Facebook leads, and it was
an 8-page website for a mindblowing $5000. She (the client) didn’t
even negotiate the price down. I was shocked.
The site took me two months to design and build. The website was
successful, and my client was very happy with the result. My first
successful international project brought me not only my biggest pay
day till that day, but most importantly, it brought me much-needed
confidence. I knew I could definitely close more leads like this one!
I continued to post my work on that group which every time I did, got
me two or three new leads. And these leads were steaming hot ,
much easier to close.
I finally struck gold and found a contact that had over 40 websites in
their company portfolio, all ready to be redesigned by me! I designed
over 30 websites the following year and a half.
subscription services.
What you should do instead is post your work with a caption like:
“Hey guys! I just recently finished a new project, and I’m
looking for feedback” then add a description of whatever you’ve
designed/developed, and finish it off with something along
those lines, “I appreciate any comments, thank you!”
You need to be ready for a lot of criticism, though. The better your
work looks, the more people will criticize it. They won’t jump on
beginner designers, rather encourage them to post more. However,
they will point out mistakes (sometimes very subjectively) if they see
you’re a bit more experienced than a newbie.
Don’t get discouraged by this, and don’t try to start fights with
random people online. Some of them are waiting to troll someone.
You need fluid cash flow to run your business and have a soft pillow
to land on when your sales that month aren’t too high, and you’re
struggling to find new clients.
The biggest question lies in how should you price your services.
You don’t want to aim too high to scare off your clients, and you
don’t want to aim too low to struggle with cash flow.
You’re stressed and afraid of the outcome. “Am I going too high? I’m
probably going too high. They’ll find someone else if I say I want
$2000 for the job. Ahh, screw it. I’ll say $1500 before they turn away
and take this project to someone else.”
closed them on twice as much, and you will never know if you would.
And don’t ever negotiate the price down without negotiating the
50% - don’t bother working with them. These are trouble. Seriously,
That’s a red flag if you see a client pushing you for a much lower
price. There are clients who, no matter how low the price is going to
You should tell them - "I can bring the price down but that will come at
the cost of a reduced scope of work. When pricing all projects I always
give clients the most accurate project estimates I can give, and this
price for that scope of work is final.
If you can't afford this price I can reduce the scope of work. I’m also
more than happy to refer you to my fellow designer who's a bit less
experienced than I am but his work is much more affordable.”
That's where they usually go into full defense mode and try to justify
your budget one more time, and they might negotiate again but
much less aggressively. That's why a good idea is always to give a
price that's 30-50% over the minimum you're willing to work for.
Why minimum engagement fee (MEF) might be a good idea
Whenever I receive a new project inquiry, I always mention my
minimum engagement fee to avoid getting involved in long calls
that, in the end, lead to no work at all. After a few years in busines I
had to learn the hard way to respect my time as time is the only
resource we can’t recover.
At first, I used to charge one fixed price for everything. This works
great for larger projects or when you’re confident in your skills and
you can, from your own experience, accurately estimate the time
However, if you’re a newbie and don’t know these things (yet), you
Here’s why.
Let’s say you set a price of $1500 for a 5-page website redesign and
and realize that what you’ve just designed is not feasible with your
Your solution doesn’t work, and your client is pushing you because
your expected milestone delivery is late by a few days. You don’t
know what to do now. Things start to get complicated.
Be honest with your client and offer him a discount because you
can’t deliver what you promised, lose the 20 hours of your time you
didn’t foresee, or spend extra money out of your pocket, hire help,
deliver the project, and call it a day. Out of that $1500, you had to
outsource extra work for $300, spend 30-50% on taxes, and
ultimately, you’re left with an effective hourly rate of $12.
I take that total time and add 30% to the estimate to give myself
some extra room if I ever need to spend more time researching
something or hiring extra help. It’s very important to outline your
design work in the agreement, and it’s best if it’s sent in a written
form, not agreed on verbally. Therefore when you go out of scope,
you can charge accordingly for your extra time.
So, we’re at 71 hours total now. Let’s multiply that amount by our
most recent hourly rate and see what we come up with.
That’s our new estimated budget. We don’t want to stop there yet!
page redesign, if my rates are on the lower end, I’d charge $2300.
Let’s be real. Your clients are getting so much more from your work
than you are from the money they pay you.
Here’s a true story to explain it better
One of the companies I redesigned a website for doubled their
revenue in 2 months. They went from earning $100k/mo to over
$200k/mo because I increased their average conversion rates from
1,8% to 3,7% on an e-commerce store.
Don’t get me wrong. I still use the pricing method I shared with you. I
just do it for smaller websites in the $5000-8000 range. I also apply
the same logic to projects that don’t have any of these data points
available, like new product launches for example.
With larger projects I usually split the work into several milestones
but apply the same logic. Here’s how I priced one of my recent app
redesigns (the website would be similar) - jump to the next page.
And while it sounds like a lot of money, it’s extended over 2 months
with each milestone worth around $3500. An agency would charge
at least double the amount.
Find the ef fective hourly rate (af ter expenses and taxes) you’re
Your work is usually worth much more than what you give yourself
credit for. To become the best designer you can be, you must
demand higher prices. Higher prices will help you work less and
invest that extra time into learning a new skill, finding a new client, or
Let’s say you started posting your concepts online, you keep at it for
a few days, weeks, a month, and then you log into your Dribbble or
Linkedin, and finally, you see a new notification. A new lead has
reached out to you and he’s considering to hire you as one of the
When every client is worth its weight in gold, you want to jump on a
call as soon as possible. Don’t prolong this part. Reply politely, say
earliest convenience.
I’d also recommend you start a new Calendly account, optimize your
Project prep 56
This way, you’ll look much more professional, and besides, it’s good
to have a booking app ready whenever you need it. It syncs with your
If you have the freedom to choose your clients and you’re a busy
what working with you looks like, and what’s your minimum fee when
I receive between 2-3 inquiries per day, and if I were to connect with
“Thank you for reaching out! Please, don’t take it the wrong way,
but before we jump on a call and decide we’re a good fit, I’d like
to, hopefully, save us both time and send you a quick info about
Project prep 57
I communicate through Slack or a platform of your choice. I’m
familiar with project management tools like Trello, Notion, Jira,
Asana, and Monday.
Thank you!
Best Regards,
Adrian”
Yup, that’s a lengthy reply. And one important thing to note - I would
NEVER send this message as a beginner freelancer looking for work.
I would try to schedule a call and handle these leads very carefully.
Project prep 58
Besides, no one has ever replied aggressively, and it says two things
about me. I’m honest and transparent; I’m explaining my process
and saying upfront what working with me looks like, what my rates
are, and how much time I can invest into a project.
And two, it shows that I’m a busy person and I’m not trying to “win
them over”. If you’re good and they want to work with you for your
skills, they’ll appreciate your honesty.
If they reply back that it sounds great and they want to schedule a
call, you’re already in a different position.
Sure, they will be the ones paying you, but you’re delivering them
value. You’re both business owners, and you both value and respect
each other’s time
If they reply saying they’re not interested, you’re good anyway since
you don’t necessarily need the extra work at this point.
But that’s if you’re already in this position. If you’re not, then we’ll
need to do some more work. Let’s skip to the next page :)
Project prep 59
You scheduled a client call - what now?
Client calls can be very stressful. Especially so when you’re new to
freelancing and you’ve never had a successful client call before.
I got you!
When you’re trying to close someone over a Zoom call, you can have
as many windows and notepads open as you wish.
Project prep 60
You could even read from a teleprompter if you wanted to, and they
wouldn’t even notice
That’s almost what I did myself with my first US-based client. I had
written a 3-page document with every question I wanted to ask
them and every potential answer they could ask me.
I had my notes
If you haven't yet, you'll soon find out that discovery calls are all
about the client, not you.
Project prep 61
You’re contributing to about 20% of the entire conversation, and
I don’t want to go into too much detail about closing leads as this is
not a sales book but I did include the script I used to close my first
Once you follow the script, name your price, confirm a budget and
briefly discuss the project needs, it’s time to close the lead, request
all the information you need, and send them a follow-up message.
Before you hang up the call and proceed to the next step
For a web design project, the next steps are to send a discovery
should ask about everything you might need to start working, i.e. the
Project prep 62
I include all you need to ask your clients in a separate file called
“Discovery questionnaire”. Get familiar with that file as soon as
possible because this will help you get a better understanding of
what kind of questions to ask before your start a new project.
For payments I use Wise (It’s the best banking app ever)
I talk about the deposit and how it’s required for me to start working.
I reassure them that the second payment will be collected only after
the project is completed, they’re 100% satisfied with the outcome,
and website is ready to be transferred to their domain.
Make that clear that you will begin work as soon as they send you
a confirmation of the transfer.
Apart from all that, you will also need a design contract.
Project prep 63
How to write a design contract
A good contract will not only protect you from a scope creep, it will
also make your most difficult (not that you’d want to work with
them!) clients slightly more reasonable to deal with.
A solid contract will help you set the right expectations and
outline your work exactly as described.
F$@#!!
Project prep 64
I once had a client who never directly agreed on anything. Email
Whatsapp call.
Back then, I didn’t even realize how unprofessional that was but long
story short, the same client was trying to abuse us by extending the
scope all the time. Once we said we’ll have to increase the budget to
got a green light. He’ll transfer the additional funds over the next
also agreed to split the bill in 3 parts - $1000, $2000, and $2000. It
contract and a 50% deposit. The only exception is when I’ve worked
trust with them. That’s why sometimes we might skip the contract,
Even if your client is someone you know, it’s worth securing your
Project prep 65
All the design contract essentials, timelines, milestones, pricing,
Read it, edit it, and use it for your own personal needs.
Once the project is approved and you’ve got the money in your
client’s side and let them know that you’re officially starting the
Project prep 66
Right af ter I open a new Slack channel I list out all the expected
milestones and the time of their delivery. I also jump on a quick call
to explain how the feedback will look on client’s end, showing the
So, let’s say you kick-off a 5-pager website. Your first order of
You start with an inspiration board, create 2-3 mood boards and
And you take it from there. Just make sure to follow the steps from
the 3rd chapter of this ebook if you want to learn my exact approach.
You shouldn’t overthink kicking off your projects too much. You
If your approach is systemized and you follow the same steps every
time you start a new project, you’ll soon find yourself working very
The same website that used to take you 60 hours to deliver will take
you 30 hours, not to mention your prices will go up as you get more
Project prep 67
You got this!
Ok, let’s sum up what we know already.
I’ve shared my personal story and told you what worked for me best
when looking for clients. If you’re struggling with leads, try this:
Once you attract new leads, you now have the scripts I used as your
reference point when replying and setting up sales calls.
We’ve covered what you should do right after your sales call ends,
and you also have the premade message templates, so you’re not
missing out on anything.
The project prep is over; we’re ready to discuss the visuals now.
Project prep 68
The Design Basics
The principles of visual perception
Before we delve into color theory and typography, there is one more
design. Let's briefly go over these principles and explain how we may
Proximity
relaxing experience for the eyes. When things are close together,
they look like a group, even if they are very different in terms of
these elements.
Capchase.com
Even though the forms in the middle are distinct from the shapes on
the outside, the image still appears as a single entity because to the
similarities among all of the shapes.
the information.
CLOSURE
Since the human brain strives for consistency, it will often "fill in the
blanks" to create what it thinks is a whole picture. The illustration in
the example below demonstrates how closure can be used to form a
picture of a woman peeking through her hands.
visual design
Foundations of visual design
A good website should fulfill its function by sending the right
message and, at the same time, engaging the visitors to achieve the
business’ end goal. Apart from its function, it should also have the
right form so that those same visitors are not finding themselves
lost and overwhelmed.
In this chapter, we’ll focus on the main design principles and show
you their implementation in real-life scenarios.
scroll a little bit down, scan for anything useful, and click on
That’s why first impressions are so important. You only get one
One way to determine what parts of the website users are most
interested in are by introducing heat maps.
Hot areas that are viewed the most appear in red, and the ones that
are viewed much less are represented in blue.
In the Z-pattern visitors begin scanning from top left to top right,
creating an imaginary horizontal line. They then search down and to
the left, forming an imaginary diagonal line. Finally, they return to the
right, forming a second horizontal line.
To focus the user's attention first, you should place the main
elements at the top. Information related to the CTA should be
located on the diagonal line, and the bottom line should underline
and highlight the secondary call to action.
2.5 Billion users each month and design looks like this
Bornfight.studio
to lose interest.
You should use the same font styles, sizes, and color
You should use the same headers, footers, buttons, forms, etc.
Acorns Website
decodable.co
Some sites consist only of text and colored backgrounds and still
command a lot of attention. That’s the power of good typography.
Using an image of a baby that looks directly at a user directs all the
attention towards it. However, when we use an image of a baby
facing the text, users tend to look at the same direction.
Remember this when designing your next hero section. Use images
wisely and purposefully do not choose them by random.
If you’re like most viewers, you probably read all the text in the order
of importance. Pretty cool, huh? That’s how we designers can
manipulate the order in which users read content.
Settle.com
Appraisd
It doesn’t mean you shouldn’t use black or white as your CTA color. If
you can make these colors stand out and make it clear that they are
in fact, the highest in the hierarchy, by all means, use them. You have
to remember that it’s much harder, though.
You end up with nine identical squares that look like this:
intersections.
Notice how these websites never place their navigation bar near the
You don’t need to design your entire website strictly by the rule of
Try taking a screenshot of your website ( just above the fold or just
your header section, not the entire page length because nobody
looks at a website that way), and divide it into nine equal squares.
You'll lose their attention if you make it hard for them to read. The
text needs to be accessible. You havet to remember that not every
internet user views or uses text on the web in the same way.
By paying close attention to how your words look and how easy they
are to read, you make sure that your text will be easily understood.
Sans Serif – “Sans” is French for “without,” and fonts without these
ornaments are labeled as sans serif fonts. Mainly use for digital
mediums. Examples: Arial, Inter, Roboto, SF Pro
Typography terminology
Each piece of text you read on a screen uses a typeface that affects
the mood, voice, and visual structure of a website.
Many people confuse typefaces and fonts, and there are certain
misconceptions about the differences between the two.
underlined, etc.
Inter - typeface
Inter fonts Inter Thin Inter Extra Light Inter Light Inter Regular
Low tracking
Medium tracking
High tracking
While slight adjustments are allowed, too much tracking may make
the text harder to read. Designers typically adjust the tracking to
match the typeface so that it matches a specific line length.
Want to
Want to
know more?
know more?
Again, the right amount of leading helps readers navigate text — too
much or too little can equally make it hard to read.
Pipedrive.com
maintain visual consistency. Many websites are doing just fine with
one typeface. Especially if they opt for a legible and variable font
with many different styles for headers, body text, button text, etc.
Cartloop.io
a variety of fonts in use. As you can see yourself, you don’t need
16px. This is roughly the size of body text in printed media, and is the
smallest font that most people can read without needing to zoom in.
It also has it’s uses for responsive web development were 16px is
the font’s root (base) size. We’ll talk about that in later chapters.
Mailchimp.com
responsive experience with your font sizes all over the place.
Joinditto.in
For starters, set the spacing between lines of body text to 1.5.
This will result in leading that is half as tall as each line of text.
If you don’t want to edit this manually, look up Material 3 type scale
guidelines. Don’t worry, though, I’ll show you how to do this later.
Joinditto.in
The ideal color combination for legibility, however, is dark grey text
on a light grey background, not pure black (#000) on pure white
(#fff), contrary to popular belief.
The contrast these two colors create is very high and its found to be
tiring to look at after longer periods of time.
Dark gray on a very light gray background might be a bit easier on the
eyes than pure black text on a pure white background
This also works the same in the opposite direction, with pure white
text on a pure black background, and light gray text on a dark gray
background. These differences are subtle but can make a difference
when users spend longer time reading the content.
set all size and spacing settings using relative units like ems and
like pixels.
current font size of the HTML element that’s set as a default size of
When the font size is set to 16px, a line height of 24px might work
perfectly fine, but at 32px tall, that height would be far too small.
Root size = 16 px
Root size = 32 px
Leading = 24px
Leading = 24px
site so that everything is relative to the root font size, you can
modify the root size without affecting the rest of the site.
used not only to get people's attention, make a point, and make
them want something but also to drive conversions and earn their
help users navigate your website and improve the overall experience.
In the following chapter, we'll explore all there is to know about color
color wheel, and psychology before we dive into the web design
Color wheel
yellow
chartreuse amber
green orange
teal vermillion
blue red
violet magenta
purple
The color wheel shows the relationship between colors and it’s an
excellent resource for learning the fundamentals of color theory.
The spectrum of colors begins with the primary colors and these are
red, yellow, and blue (RYB). They can’t be mixed from other colors.
Secondary colors
There are 3 secondary colors and these are purple (red + blue),
Tertiary colors
Last but not least, we also have tones. There are created by mixing
black and white with pure colors. These create tonal palettes.
Tints
Shades
color wheel, forming a triangle, like red, yellow, and blue. Typically one
color will act as the primary, while the other two will act as accents.
Color warmth
Cool colors
Cool colors contain higher amounts of blue and purple. These colors
Hue
Saturation
Lightness/Brigthness
You can either type WCAG contrast checker in Google, open the
WEBAim website and input the foreground and background values
manually, or you can run a Figma plugin like A11y Contrast Checker
which we'll cover in later chapters.
Ideally, you want to use higher contrast colors that pass the AA
requirements for digital use for their improved legibility.
But too much contrast is no good, either. It strains our eyes much
faster, and we don't want that either.
Black text on white background will give you the highest contrast values
Rideshur.com
Prevalent.ai
in significant ways.
brand design. Think of Coca-Cola and Twitter, and the first thing
that’ll come to your mind is probably red and blue, and the feelings
brand and then try and introduce complementary colors (if needed).
You should also think about what kind of emotional response you
Think about how harmonious your color palette looks. Choose one
Tip: Star t with darker colors and make your way out to lighter ones
Here are a few places to start looking for your new palette!
Adobe Color Wheel – A little bit more advanced tool that requires
more manual input. Commonly used among web designers.
Figma plugins - We’ll cover the most popular ones in later chapters
once discussing the web design process.
Here are the best principles for finding the best color in web design:
1. Find your primary color – The first step in choosing the right
colors to add more flexibility to your design choices, and make grays
This rule means that 60% of the colors should be used for the main
color, 30% the secondary color, and 10% the accent color.
Now, let’s see a few life examples so you can better understand
what it looks like in practice. Here’s several beautifully designed
websites that implemented the 60/30/10 color rule.
Ideally, you want to use higher contrast colors that pass the
AA requirements for digital use for their improved legibility.
When choosing colors for your brand think about what kind of
emotional response you would want people to have with your
brand.
As long as the designs they produce are readable and make sense
The setup I’m about to share works for myself and the developers I
worked with.
Figma.com
designim.com
Version control
While Sketch is rich in plugins like Craft, Abstract, and Zeplin, Figma
has all those tools embedded by default.
Also, you can run the Figma editor directly in your browser.
As for Adobe Xd, it’s a decent design tool, especially paired with
other CC programs like Photoshop and Illustrator, but it lacks where
Figma excels, and that is the collaborative features, plugin support,
and dynamic libraries.
Whenever you’re designing you should aim to design for the lowest
resolutions first. You want to ensure that your layout is contained in
the smallest frame and that all the design elements fit nicely
without feeling cramped. If you go lower than 1280, you’ll get into
resolutions that resemble the latest tablets. We’ll use constraints to
show our developers how the designs should behave and at which
desktop-tablet breakpoint the layouts should adapt to.
screen resolution we’re using. You don’t have to design for every
single resolution there is. You just need to design for each main
gs.statcounter.com
It doesn’t mean that you should design for all screens. We should
try to design for the most common resolution to see if our designs
This will be much clearer when we set up our column grid layout. In
the meantime, let’s see how it looks like so far.
I’ll make the 1920px my maximum box width. The margins on larger
readable.
recommend), having a maximum box width will help you contain your
designs and make your site look neat and much more organized,
This is our starting point when setting up frames for web design.
designs, let’s cover the terms and explain what they mean.
Uniform grid
A standard and default grid in Figma is the uniform grid. An evenly
spaced set of rows and columns that span across the entire frame.
You can freely change the grid size by changing the “Size” value. I
rarely use this grid as it’s too detailed for web development and
Grids can stretch and resize responsively based on the frame same
(that’s what we’ll use) or be centered and take up the same amount
of space regardless of the frame size.
responsive grid
fixed grid
This type of grid finds its use for dashboard designs, tables, and
elements with multiple sets of rows. As far as the number of rows
goes, you’re free to use as many as your design requires but usually,
these are based on an 8pt grid, meaning that each row takes up 8px
of height, with 8px of space between each row.
I rarely use this type of grid as, when it comes to development, these
values will differ depending on the size of the screen, and it’s easier
just to space out your elements in 8px increments instead of
aligning them exactly on one baseline.
The margins and gutters remain the same. The thing that changes is
the size of the columns. You can’t really set % values for margins in
Figma. Therefore this type of grid is not ideal for responsive website
development. It serves as a good reference point, though.
If you can manually set the margins for the bigger breakpoints or if
you intend to design a full-width website - it will still work great.
We’ve set up our 1440x1024 grid for 12 columns, 85px width, and
20px gutters. We’d be able to use the same grid for resolutions up
to 2k+, at which point we’d switch to a more appropriate box width
of 1920px. To achieve that, we’ve set our gutters at 20px and
redacted their total width (11*20=220) from 1920. That gave us 1700px
of space, and we divided that by 12 columns = 142.
Step 1: Go to the Properties Panel on the right and click on the “+”
icon next to the “Layout Grids” (1)
Step 2. Switch from the default “Grid” type to the “Columns” (2)
Step 5: Click on the “: :” icon and save the grid style to your global
styles and re-use it later on if needed.
For fixed grids I use 12 columns, 85px width, and 20px gutters.
Click on the “: :” icon and save the grid style to your global styles
and re-use it later on if needed.
waiting in line for a pretzel, walking your dog, washing your teeth, or
It means that we need to meet our users' needs and design the best
even go futher and say that some websites that rely heavily on
This offers a lot more design flexibility since every screen is custom
designed, but, at the same time, it results in more manual work.
Main advantages
More flexible design
Better performance since web experience is tailored to a devic
Designs are optimized for all devices
Main disadvantages
Much more manual wor
Each device needs a separate design (it could mean 100+ designs
Necessary to design new experiences for new devices
The best practice for designing adaptive layouts is to start from the
smallest breakpoint and scale the design up, ensuring it’s contained
within a certain breakpoint and the usability isn’t lost.
Main advantages
Consistent experience across all device
Easy to design and maintai
Easily scalabl
Requires less time to design
Main disadvantages
It might be a bit less customized than the adaptive desig
Lacks optimization for specific device
Might be harder to design in Figma
An existing site can be optimized for mobile devices with the help of
adaptive design. You can then take charge of the site development
and design for certain different viewports.
Defining the right breakpoints will help us plan the layout much
better. I start designing for three major breakpoints, and these are
master when learning design. You will save hours of manual work by
Look at the example below. I was able to adjust the desktop design
To find the suggested font sizes for desktop and mobile devices go
Auto layout is a dynamic property you can add to your static frames
and components. It lets you create designs that grow or shrink to fit
your container and readjust their size as their contents change. This
is helpful when you need to add layers, make room for longer text
If you use auto layout properly, you won't have to keep resizing the
elements every time a change has been made, or new items have
Let’s cover the basic terms and settings to help you get familiar with
Spacing
Direction describes the way auto layout elements align within the
dynamic container
layout frame and its child containers. You can set padding values all
layout frame. When you want to align your auto layout selection
group to the bottom, top, left, or correct, look at the alignment and
the objects individually. For that reason, you set the alignment of the
child objects on the parent auto layout frame, similar to how it works
Use the interactive grid to select nine layout options for the children
You can also switch between Distribution modes by clicking “X” with
the interactive grid being selected.
You can choose the resizing behavior for parent auto-layout frames
to adapt to changes to their children's elements.
If we set our auto layout frame to Fixed width or height, the frame's
dimensions will remain the same no matter the size of the content
we place within them. The frame size won't react to changes in the
objects within them.
You might also find some use for fixed width when setting the size of
your text containers in certain breakpoints.
Set it to hug contents if you want your auto layout frame to resize
itself according to its child objects.
Best to use Hug properties for groups of text layers within an auto-
layout container. This will ensure that your text containers adjust to
each other’s heights and align themselves within a container.
You should always try to set either fill or hug container properties on
changes in size of the frame. We’ll have to set constraints for all our
design elements later on, and setting the containers to fill and/or
Learn more about auto layout here. (it’s a link to official Figma file)
You put a text layer into a container and that container is nested into
a column div along with the description, a button, and a few icons.
You’ve got the block on the left containing all your text layers and
the block (column) on the right with the main image. That image is
also put in a nested container in the right column.
The entire hero section is a part of the page that consists of several
sections like a hero.
If you structure your designs the same way and consciously think
about how the columns and grids you’ll use later in Webflow or
Elementor - you’ll be a step closer to understanding web
development and other developer’s work.
The type scale you will use for your desktop devices will differ
greatly from your tablet and mobile counterparts.
Auto layout lets you create designs that grow or shrink to fit
your container and readjust their size as their contents change.
a e some notes!
T k
Mobile means not only phone devices but also tablets. For both
versions, you’ll need to properly rearrange the layout of each
desktop page and make sure it fits right in the contained space.
It’s not hard, no. It’s relatively easy if you ask me. There are, however,
a couple of things you need to keep in mind when designing for
mobile devices.
icons that sit atop of the page next to the business’ logo.
I’m not 100% convinced about its functionality since I think it might
get in the way of scrolling, and if you’re using an iPhone, you already
have the Safari search bar at the bottom.
While this might work for simple one-pager websites, I can’t see it
working well for e-commerce stores or more content-heavy sites.
responsiveness first!
right, and then you try to adapt the same design to mobile devices.
Yup, your content is not accessible and doesn’t make much sense.
Ok, that was a little bit of an abstract example. Seriously though, you
you lay it out below another. It’s normal, and users are used to
Just try to make the scrolling experience enjoyable, and don’t take
too long to explain an idea or a feature. Keep it concise for your own
While 16:9 on desktops looks great, it will look crunched down and
really small on the phone. Therefore you might need to edit your
The same goes for all images. It’s not necessary, but it’s a good
This is a big one. When creating a type scale for your website, don’t
You’ll quickly get the hang of what size your headings should be on
phone devices and tablets but if you’re ever in doubt about what size
Remember to scale the line height and letter spacing along with
Beautiful animations!
Interactive component
Clear CTAs
Simple Header
Clear CTAs
popups.
Users land on a website, find what they need, take action (or not),
and get out. And our job is to make it easier for them. Not make
them stop and stare at endless animations that look great, sure, but
don’t add anything beneficial to the experience.
To ease the transition into the world of good motion design, here’s a
list of websites that do it really well. Open each one of them, notice
how they behave, what kind of interactions they use, and think about
what emotions they bring in you.
Framer.com
https://www.framer.com/
Wealthsimple
https://www.wealthsimple.com/
Elemental
https://sendelemental.com/
Glide Apps
https://www.glideapps.com/
Aaply
https://aaply.app/
Createwithplay
https://www.createwithplay.com/
Setpoint
https://www.setpoint.io/
Let’s say the AOV (average order value) is $50, this would mean that
by optimizing the site’s conversion rate, we increased the monthly
recurring revenue (MRR) by:
bounce around from page to page, and of ten look for help (reviews,
reduce friction and guide users along the way, step by step. When
the customer is ready to take action to learn more, take the next
step or join a newsletter list, the landing page should facilitate their
action with the least possible friction and dif ficulty. It should be
The more ef fective your website visuals and copy are, the less they
Or perhaps here?
Is this the main CTA?
has made other customers happy. Social proof is one of the best
partnered with. You can also add videos and press releases.
If you can’t use any of these - include logos of the software you’re
help with social proof. It’s a common trick new brands use to
Asking for too much information can be a quick way to make visitors
lose interest and click away. Don’t ask about too many things before
business name, email, budget (or any relevant question to filter out
If you ask for too many details and the value you provide in exchange
for all that information is hard to justify - they will leave. Ask for the
Landing pages should only include the information necessary for the
person who landed on that page to complete the desired task. The
setupfied.com
Simplicity is more than just limiting the options. It’s about creating a
Remember: people tend to connect with brands that they feel are
similar to themselves. If your imagery is too “stock-like” and
“corporate”, you’ll turn your visitors away.
ads with the rise of social media. Connecting with people who feel
Here are some of our favorite places for finding free stock photos
that are high quality and free for commercial and personal use
Pexel
Unsplas
StockSna
Picjumbo
If your budget allows for that and you’re looking for a little bit more
If you need to look for illustrations - check out the sites below
Ls.Graphic
Icons
Freepik Premiu
UI8.net
That’s about it for this chapter! Let’s move on to the next one.
You don’t want to have too many links to click on; users might
leave your site and get distracted by something else.
People tend to connect with brands that they feel are similar to
themselves. If your imagery is too “stock-like” and
“corporate”, you’ll turn your visitors away.
Before we dive into the next chapter and explain the entire design
process of the landing page, I wanted to spend a minute and tell you
standard website design looks like. There are a few stages that I’ve
learn manner.
In this chapter I’ll explain my personal web design process that let
I will show you all the UX stages I follow when working on a new site
and share with you the templates I use for each of them.
If you haven’t purchased the Manual yet and are also interested in
mastering mobile design - click this link to get 50% off the regular
price. Cheers!
I’m not saying that this is the one and only approach to designing
websites; it’s one that I have been successfully following for the past
few years, working with multiple teams, developers, companies, and
corporations where the prices of a single website reached $50k+ in
billables. This process will not cover building and maintaining
extensive design systems, branding work, nor version control, but
for a team of 3 and projects up to $15k will work just great!
That’s it for the intro! Let’s discuss our design process now!
In this chapter, I’ll explain my personal web design process that let
me design over 100 websites in the past 3 years, all successfully
delivered and received.
A word about UX
Once again, this ebook is meant to be a handbook for web
designers. It covers UX design and research on a really high level, the
kind of research I would do for a commercial client that needs a
refresh or a rebrand. More in-depth UX analysis for higher-ticket
clients would require a much different approach, budget, and
possibly a bigger designer team.
The client may also specify due dates for each deliverable
(milestones), however, whether they meet those dates is a whole
different story. It’s good to make your clients accountable for it too.
nuclino.com
A designer will, in turn, analyze the project brief and either come up
Once you and your client have a good overview of the project’s
milestones - you create a contract, and you both sign it. Then, you
send the deposit invoice, collect the payment, run a kick-off session
on Zoom (not necessary), and you begin your research. Good job!
research and compiles all findings in a document for you to read and
Your design should solve the problems of your clients and their
more casual tone. Stakeholder interviews are one of the best ways
Competitor’s audit
competitors and analyze things I like and dislike about each site.
I note things like copy, visuals, CTAs, sitemap, etc. I also like to get
immersed and look at everything from a user's point of view.
Which one should you consider? Well, most, if not all of them.
You will need to come up with different use cases for your product.
And to come up with use cases, you will need to conduct a number
of interviews with stakeholders and users of the product. It requires
a lot of back-and-forth communication to do it right.
That’s why you’d have to modify and adjust your scope of work
depending on the budget and time you have allocated for a specific
project. For most lower-priced projects, I start with the audit, create
a SWOT analysis, create 1-3 user journeys to understand the flow
better, create a sitemap, and start drawing a few sketches.
Once I have the initial research ready, I analyze the results and start
with a really rough low-fidelity template to build the page’s structure.
Once you and your client have a good overview of the project’s
requirements, you define the SOW (scope of work) and agree
on milestones
Milanote.com
their business goals. Treat it as your starting point before any visual
I put all the lower-level pages (that don’t carry as much importance)
in the footer navigation. I try not to hide any pages and offer a way to
browse them all either through a header menu or the footer.
website's main goal - the unique value proposition (UVP). You create
user needs to see on the website, one must specify in what form it
Now that we have our sitemap let’s move on to discuss our initial
sketches and the importance of having a “Sandbox” page.
know how my site’s architecture will look like - it’s time to brainstorm
ideas, grab a pen, and transfer all of my initial thoughts onto a paper.
At the same time, I grab a piece of paper and a pen, and I star t
actionable CT
Benefit-driven section(s
Incentive sectio
Testimonials/Social proo
Main CT
And offer one main CTA segment at the bottom of the page.
Secondary CT
If your customers are not ready to take action yet, they need
Foote
You will also find this template in the “ Landing Page framework”
page located in the main Figma file “01. SmartBank Landing Page”.
Check it out and feel free to use for you own needs!
For visual inspiration, though, it’s perfect. You won’t find this many
examples anywhere. And remember, we don’t need the user-
centered masterpieces here, we just need as many colorful designs
as possible to come up with the visual direction for our new project.
Dribbble is the first place I star t my search, but it’s not where I end it.
They are much higher quality as the sites being published on these
I normally begin by creating the inspiration board and organizing all the
sources of inspiration into distinct groups that share a common color
palette and pattern of design.
typically receives.
from stakeholders about the visual direction will save you countless
I’d say don’t create more than three. The more options you give your
Once you have all mood boards created, prepare for a presentation.
Remember, you’re the person they came for guidance, and they
fonts, colors, imagery, and icons, along with their usage guidelines.
look and feel. Style guides are the main information source when
Styles guides typically cover the use of fonts, colors, grids, and
design style that is coherent across all platforms and media rather
There are many ways to do it, some fully automated, and some
budget, we should opt for the easiest, most time-efficient way, i.e.
This is by far the easiest and most automated way to create color
What’s good about this plugin is that you’ll have global styles auto-
generated that are WCAG-compliant. You’ll also generate a default
typography system. This plugin really is amazing!
50 is the lightest tone you get before turning to pure white. 900 is
the darkest before turning to pure black. You’ll most likely be using
50, 100, 500, and 700-900 tones. Rest is there for added flexibility.
You most likely won’t need all of your tonal palette colors to design.
That’s why i try to keep it simple and design with around 6-8
If you’re ok with the suggested colors - roll with it. If you want to
then generate the tonal palette again. It will update the values.
I usually want to aim for a pretty vibrant primary color but with
enough contrast between its background and text foreground that
it’s perfectly accessible across all digital platforms. I might go for
blue, purple, orange, pink, or whatever matches the brand’s language.
feel work best with my client’s brand. However, I’m not too stressed
As my top choice, I went with the Avenir Next for the headings and
Let’s say that the client agreed on the first try, and we were able to
Display 1 and 2 sizes are the highest in the hierarchy which means that
on the layout, I might use 72px display style for my main “Hero”
heading, but on the “About us” page, the same style could not work the
same, and I might need to reduce the size to - let’s say 56px and use
Apar t from the display, h1-h6 tags, you will also need a subheading type
of text, a button text, caption, chip, and dif ferent types of body text.
You will also need more flexibility on mobile devices and scale down
H2
H3
H4
I also design one mobile view on a larger device - iPhone 13 Pro Max
and depending on the needs, I also design a tablet view.
For our web project I chose the Bento 3d models from ui8’s library.
Low-fidelity wireframe
I’m not the biggest fan of low fidelity. It’s not that I don’t find it
valuable. A general overview of what needs to be included on a site
or a page is crucial and will save you a lot of time.
Anyway, I steer away from the main topic. Let’s take our designs up a
notch and go into mid-fidelity. Next page!
I can’t say how many hours I wasted on making design changes due
to misunderstandings that occurred earlier on in the process
because the requirements hadn’t been properly addressed.
Problems most frequently result from improper expectations
management on the part of one or both parties. That’s why having a
contract and/or SOW (scope of work) document is so important.
First, if you have to run design iterations, do them in the low or mid-
fidelity stage and limit them to a certain number, 2-3 at most.
Be vigilant about the amount of feedback you receive, and always try
to collect as much information from your clients as possible. This
will make the design process much more fluid.
their upcoming fintech app. The website should show the main
show how it works, and what problems it solves for the user.
We also created our color and type system, grid layouts, and
guidelines and updated the global styles in Figma.
Presentation
The next and last order of business (if needed) would be to create a
Please, take all the teachings you’ve learned from this ebook, and re-
read the chapters if you’re feeling lost. Try to apply these principles
and guidelines when creating your future projects, and stick to my
design process if you’re unsure what the next steps should be.
process to present anything you want to sell in the best way possible.
The Hero with CTA and a social proof segment right belo
Features/Solutions
More benefit
need 4 segments, while the sales page funnel might need over 30 to
CTA’s (main and alternative) — you should always include the main
call to action. Ideally, a vibrant button that stands out with a clear,
Basecamp,com
From the shape of their buttons to copy and social proof, if you visit
this site every few weeks, you might see a completely rearranged view
Spline.design
in the page. Visitors need to trust not only the solution you are
Don’t just throw in the logos without any context. It’s best to explain
why these logos are here. It’s easier to make the social proof sound
Usually, the logos of the biggest companies in your niche using the
product or the best press releases are the best options to create
that quick boost in authority you need. If you can’t use logos, try
blocky segments early on. Show only a sneak peek of your results
and build up the social proof as they scroll further down the page
We use these segments to show how our product can help users in
different areas of their life/work.
We’re once again using the problem & solution format to talk about the features - we want
to paint a positive picture of all the benefits coming from using our product
We should use simple designs - columns, cards, and visuals that are
easy to understand at first glance. I like to show the process of using
a product in steps (if applicable). It’s easy to follow and
straightforward.
With finance apps, the account setup and management is usually the most complex
process, and we wanted to highlight how simple it is with our “how it works” segment.
While features explain your product, benefits tell visitors how their
situation will be improved as a result.
If you can introduce incentives, go for them! It’s another great way to
engage your users and help them take the desired action.
The more social proof you can show, the easier it is for your potential
customers to trust you. Big tech companies know that, and they like
to use social proof wherever possible.
A good CTA links back to your main value proposition and directly
communicates what your users should expect when taking action.
Dedicating an entire segment to the main CTA near the bottom of
the page might help you increase conversions.
You want to warm the leads up as they gradually scroll down the
page and explore more about the product. That’s why following a
landing page framework that first explains the solution to the main
problem, showing many benefits, social proof, testimonials, and
incentives before introducing a final CTA, is a good idea.
The more social proof you can include, the better, just make sure not
to exaggerate these sections.
You want to include this segment somewhere near the main call to
action. When users are about to make a decision, they often need a
quick impulse, and another social proof section might do just that.
Regardless of the industry you operate in, the visitor of your landing
page should know a few things almost straight away: what the offer
is, why should they use your service or a product, and what are the
What if they are not ready to jump on board and purchase your
If your main CTA isn’t a free trial or a free consultation, you might
You can also use online chat bots to initiate another point of contact
Contact informatio
Social icon
I tend to keep my footers simple - adding just the essentials, legal pages,
Good job for making it here! You should have enough info to follow
If you read through all the previous chapters you’re now equipped
with more knowledge that the majority of your web designer friends.
You know the Gestalt principles, basics of visual design, and main
design laws and principles, and you’ve got the documents, briefs,
pages. Remember that I also included the complete Figma file with
our site framework and multiple UX and UI design stages so that you
Now, feel free to fire up that framework template or the practice files
anytime! You can open up the SmartBank landing page, add your
own twist, change fonts, and colors, replace the text, try out new
If read the remaining chapters, you’ll find one more called “Your
box model
Understanding the box model
The box model explains how layouts work when translated to web.
You can use auto layout to group layers inside other layers and set
properties on them. You can do the same in web development with
each container. This practice is called nesting. All the web elements
are boxes that can be nested inside each other.
You need to build your layouts using logical structures. That’s why
mastering box model is crucial for your future web design work.
Manage subscriptions
smarter, in one place
Get started
Manage subscriptions
smarter, in one place
Organise subscriptions in one place
Get started
margin
border
padding
element
From creating containers and nesting them inside each other. You
designing them, but that’s not what we’re doing here. We want to
Look me up on YT soon!
What’s better?
Elementor?
or Webflow?
It’s relatively easy to learn and use (much easier than Webflow)
Elementor.com
It’s the most beginner-friendly combination there is. You can create
beautiful websites in mere hours. I increased my productive output
by at least 60% by switching over to Elementor, and working with it
seems like a breeze.
Also, you can use pre-made templates to edit them with global
styles, setting up your entire site in just a few hours is really
astonishing. I can’t wait to share these tutorials with you!
Wpastra.com
I like themes that are lightweight, clean, and simple. I tried working
with more robust themes like Phlox and Ohio, but they tend to be
bloated and limited in terms of how the components are designed.
Usually, I switch between Astra Pro and Hello (for Elementor) and
create all components, interactions, and animations myself.
Over the past 4 years working with Elementor, I tried almost every
I aim to use, at most, 2-3 plugins from this list, at the same time.
YoastSE
W3 Total Cach
I’ve tested hundreds of plugins over the past few years, and these
Mid-budget clients
I’ve ever tested and tried. It;s cloud-based WP plans are one of
Disclaimer: These are all affiliate links, and if you purchase through
them - you will receive a discount, while I will get a little kickback.
You can use free tools like PageSpeed Insights and GTMetrix to get
started and check your loading speeds.
As part of your evaluation, you should also view your website using
various devices to understand how it performs.
Even though images can enhance the visuals and, to some extent,
the usability of your website, they can also slow down the loading
these images before adding them to your site can save weight and
TinyPNG.com
You should always compress your images, no matter how small they
are. For images with transparent backgrounds - use .PNG. For the
weight as possible.
the CDN selects the server (or servers) closest to the user's location
It’s free to use and does its job perfectly fine. If I remember
correctly, you can also apply for a free SSL certificate using a
Cloudflare account.
You can find the link to this CDN here. You need to create a free
TinyPNG.com
Follow these few simple suggestions and try to get your site loading
speed under 3 seconds, ideally aim for 1.5-2s. Good luck!
Every time you’re about to launch a new site, you risk forgetting
designer for 4 years, and during that time, I quickly realized that
to ensure their sites were ready for launch. It was extremely helpful!
And, if you need more - check out the Checklist figma file included in
These are the type of checklists I’d follow myself before launching
any new sites, saving me from having to try to remember all of the
design handoff, I’d have... 2 dollars. I’ve been asked about it at least
200 times, no kidding. So what’s the deal with the design handoff?
communicate with your devs, and your devs communicate back with
has been a major cause of tension between the two groups and has
The design handoff happens when developers are given the design
teamwork, and there’s no way around it. Let’s talk about what you
In reality, this stage of the design process rarely goes off without
Intercom’s article
Apart from designer-to-developer communication, you also need to
spend some time on organizing and setting up your file. Some would
say it’s the most important part of the design handoff process.
Making the appropriate choices early in the design process will help
you produce the desired result. This includes setting up your style
color - primary, secondary, tertiary, neutral, and all their tones and
focused, etc. - and show how the color system applies to them all.
It is critical to update all of your file colors and font styles with
dynamic global styles rather than using regular text attributes with
static values.
This way, you can easily make global changes and have them
mirrored throughout the entire design, all at once, if you want to.
Usually, that’s two desktop sizes, large and small, tablet breakpoint,
To make it easy for developers to find all the files and materials, your
Manual ebook.
our case, that’s the first one; the second number is the number of
the flow, which is our first flow - Log in. The third number is the step
exit popup or a page that’s part of the main flow. It’s all situational.
etc. that’s when you have to split the flow to show two states like
Even though it's time-consuming, doing it now will save you a ton of
Did you decide to use Google Drive, Dropbox, or another platform for
everything? Keep the lines of communication open and share where
those assets are located so that any missing pieces, queries, or
worries may be addressed.
If you really want to make it easy for your developers, you should
export all your (named!) visual assets, compress them, and group
them into separate folders labeled by each website page (Home,
About, Contact, etc.).
This will really make the asset prep much faster for your devs.
You can avoid most of these mistakes by maintaining a list of all the
features. The checklist will indicate whether your design job is done
or if you need to revisit the Figma file and add a thing or two.
handoff checklist as one of the files in this ebook. Check it out and
make sure to follow everything from the top of the list to the bottom
But, for you to succeed, reading about theory is not enough. You
need to use this knowledge and put it into practice.
All you need now is a plan. And I have it laid out for you.
Yes, if you haven’t noticed, there’s a practice file in one of the ebook
folders. Read the instructions on the first page, and jump on to the
next one. This is where you’ll use all the knowledge from this ebook
and create something new.
You can be as detailed as you want to, you can follow the UX stages
and conceptualize the results, you can simplify the research,
assume the results, and skip the UX phase altogether.
What you should do, is you should design a landing page yourself.
Depending on your experience, here’s how you should approach this:
comfortable enough to go out there and create your own sites, fire
up the Practice file, open the “Tracing” page and just start tracing
the designs. Replicate the text, buttons, paste the images, look up
the size values, the spacing between elements, look at how auto
layout frames are built. Dig deep and analyze the design.
This exercise aims to familiarize you with the design tool, recognize
start replicating the designs with the use of Rulers. Modify the
colors, update the images, and see what you can create by simply
Just have a play around and see what you can do with it.
The goal of this exercise is to get you familiar with different design
patterns. Even by following the landing page framework template
and making changes to the UI kit, you’ll be able to create some
pretty cool-looking websites. See the examples below to see what
I’ve come up with in 5 minutes of work.
If you don’t know where to get the inspiration from, open up the
sites we mentioned previously, saaslandingpage, onepagelove,
or simply, dribbble.
Now that you have a few dozen concept works, you need to get
Open Dribbble again and find the most popular posts on the home
Halo Lab’s shots are always so carefully craf ted and super balanced.
Try to come up with patterns that are similar to grab more attention.
This took me literally 10 minutes to prepare and just like that I could
have created two concept shots for my social media. I would of
course spend more time on it, polish the designs, make sure
everything’s looking neat and tidy. And you should do too, take your
time with it.
Anyways, if you open up the Practice File and go to the Creating page,
you’ll find a landing page reference design and a number of frames for
you to practice the designs on.
I’ll also add another small bonus, the Dribbble and Instagram
templates just so you can quickly take your new concepts, drop them
onto the frames, and dynamically create a series of ready-to-post
shots. It’s coming soon as the next update!
The more often you post your work, the higher your chances are of
getting noticed. Consistency is your best friend here.
Unless, you want to send countless of cold emails, calls, and pitches
to people who have no clue about who you are and what you do
didn’t think about in the first place is hard. You’re better off just
practicing and posting your concepts. They will eventually find you!
If you attract them by the quality of your work, you’ll also be able to
dictate higher prices. That’s just the way it is. If you outreach first,
you’re in the lower position, you need to fight for their attention. If
they reach out to you, they’re already interested in YOU and your
And the truth is, you don’t need to rack in 1000’s of likes and millions
Consistency is key
As with any platform, you just need to be consistent and post at
least 3-4 times per week to get the right momentum. I just showed
you how to become a concept machine.
And I’m here to tell you, it’s all possible. Anyone can do it. Really. All
Design, present, post online, rinse and repeat. When a client reaches
gave you, set up a meeting, use my Zoom call script, close them,
send the contract, send the invoice (you can use my template),
Know this, though, all that I’m sharing with you today, worked for
me, and enabled me to live a life I never imagined I could live.
I hope that the contents of this e-book will help you achieve the
same things I achieved.
Initially, I wanted to make this book short and concise but it turned
out to be quite lengthy and comprehensive. Therefore, after you first
read it, don't pressure yourself to know everything. Revisit it
whenever you need help with the design process, or want to learn
more about the design principles, want to look up the tips, or check
the landing page framework. It’s all in there.
If you made it this far and you’ve enjoyed the reading, I would much
appreciate it if you could rate this e-book (ideally 5-stars ) on
Gumroad. It’ll take you 2-3 minutes, but it will help me greatly to
create better products for you in the near future.
And all I can say is that I want to completely change the Youtube
design landscape and share valuable and free content that you can
follow and understand easily.
We’ll cover web design and practice on real examples. I’ll show you
my approach to no-code tools like Elementor and Webflow, post
longer format video tutorials you’ve seen on IG and Twitter, as well
as share my personal story, tips, and take you behind the scenes of
my life as a creator and design lead.
I’m so excited I can’t wait to share all this new content with you!
Final words 344
Missed my Design Manual sale?
A quick word to everyone who got this ebook without having the
chance to grab my Design Manual on promo. If you’re interested in
mobile design - click on link below, download the free sample and
wait for my next email - I’ll send you an exclusive coupon code as an
“Ultimate Guide to Web Design” ebook owner
️5.0 AdrianK
@uiadrian
$44 only
Design Manual
the UI professional’s full version