Transcripts
1. Introduction: Hi everybody, and welcome
to this new course on learning landing
page is designed with proper SEO
optimization techniques. It's been a dream
of mine to create this ultimate course for anyone who wants to work with the business
side of design. Here we are. I am with the hopes that this course can literally
change your life. So what is this, what
we're going to learn here? So web design is actually
a combination of two different skill
set or industries. One of them is graphic design. How to use design, shapes, text, and images to
convey a message. And the other one is the web. How people interact on the
web, what user experiences, and how do you develop
your traffic ideas into making them
work in the browser. So all these things are things that we're going to
cover on this course. You can expect to learn the fundamentals
of landing pages, where the extra things like topography, the use of colors, the use of layouts, and the use of images, and other marketing techniques like scarcity,
authenticity, credibility. We're also going to talk about all the Web skills
from user experience, UI design point of view, and whole thing actually
works on the web. In this course, we're going to see how to make money
off this skill. How you can take projects and actually do them for clients. And, and money by converting a simple NADH and two
convergent focused planning, which if you are planning for marketing and advertising
your website, your product, or service online,
then you will get much better results by sending your traffic to a
dedicated landing page. And for that, you doesn't need any prior knowledge
of copyrighting. Also, yellow skills. All
you need is just follow along these simple instructions that I will cover
in this course. Now who am I? If you're not familiar with,
My name is Jay hair helmet. I'm a UX designer, having experience of
more than five years. At this point, I
had been working as a Senior UX designer with a multinational company
for all of this time, I have helped hundreds of small businesses owners,
design agencies, startup companies, and
different software houses to get better lead conversion
to their websites. Personally analyze
tail end periods with competitive analysis and
guide them how they can improve their landing
pages so they get quality output and generate more leads by falling
CRO techniques. I have shared my SEO
techniques and tips with different companies,
entrepreneurs. And they are pretty much
satisfied with these techniques and have generated more leaves as compared to the
previous landing pages. And now I am excited
about teaching you guys these marketings
and techniques and tips in my new
landing page Course. This course is designed
in such a way that even a beginner
who does not know the web design and is
new to web design, can easily understand and use techniques in
his art design. And this is what
we're going to cover on this, on this course. Now, why should you care? Why should you want to
become a UX designer? As I have said, this is
a very valuable skill in the market today and
in the future as well. Websites are not going anywhere. It doesn't matter that most of the people are
on their mobiles. They are still
visiting websites, they are still making
purchases online. That is why I'm going to cover the marketing selling
techniques into our web design or landing page. So that's pretty much
it for this lecture. See you guys in
the next lecture.
2. Using the exercise files: In this video, I'm going to show you how you can start off
with exercise fights. The exercise files for this course are included
with this lecture. The exercise file I uploaded
contains a Figma file. It contains all the assets
used in this course. Please download this file so we can continue our journey by creating a shoe landing page with CRO techniques in Figma. This exercise file I uploaded does not
contain affect my file, so forth that just follow along with me
through this course. So you guys know how you can create your own Figma project. That's all for this video. See you guys in the next video.
3. What are landing pages including my personal opinion?: Okay, so there's a lot of different types
of Nanak pages up there on the Internet. There's a lot of different
types of templates for pages. But today, I'm going
to walk you through four very common types of templates and landing
pages online. So that you can learn a
little bit more about specifically how you need to set up these so that you can
have the biggest impact on micro and macro conversions and grow your business online. Okay? So the first one I want to talk about is the landing page. So if you're not familiar
with the landing page, it is the main page on
your site where you want people to come in and you
want them to convert. You are probably using this for search engine optimization and a lot of paid media
in many pages. They are built for paid
media specifically. But if you do it right, you can use the same page
to rank within Google. And you will use the same
page for paid media. And you can target
the same keywords, and you can target the same
audience on those pages. So specifically, how
do you want to set up your landing page so that
you get the best results. So the first thing you
want to do is to have a powerful headline and a couple of bullet
points or some text. And when you think about that, you want to think about
the seven second test. So within the seventh seconds, if somebody comes
specifically to that area, Do they know who you are? Do they know the
problem that you solve? Due to know your key
differentiators. And have they got enough certainty that they want to click the
Contact button? They want to reach out to you. Also within the top part
of the learning page. Surely a good idea to have a powerful image that aligns specifically
with that demographic. You want to test
different things. So an image is great
if it aligns with the demographic and what
you're trying to sell. In addition to that, you can also try testimonials. You can try course. There's a lot of
different types of things that we might want to put in there depending on the
type of business you have. So you have got the headline, the seven second test. You have caught some
type of imagery that speaks specifically
to that person. And in many cases, you are going to be able
to get a conversion right. Now. On the other thing
I'll mention is this call to action is
super, super important. So testing the color of that, testing that text that you have, their mics are really,
really big difference. So common ones are learn more. Contact test. Now, get started,
get a free proposal. Call us. You need to think about all the different ways that people would want to reach out. And you'd need to think
about the level of commitment that they
have at that point. So if it's just to learn more, much less commitment
than contacting us. So you want to think about wisdom is in the journey and
test different messaging, as well as testing different
colors there as well. A lot of people love
the big orange button. Pig oink button is fantastic, but it doesn't really
matter the color so much, as much as how it fits
within the page, right? So with any given webpage, you never want to have
too busy or color scheme. There's really, really
important thing. You want to have the main call-to-action be the
brightest thing on the page. That's where the
eye is going to go. And you will see
that if you install things like heatmaps
called Content Analytics, then that gets the
most attention. So as you move further
down the page, you want to think about, well, okay, So up here, I gave it my best
elevator pitch, right eye to the
salmon second test, I did a good job, but it
didn't fully sell them. So what you're going to do next? Well, this is a person who
needs more information. So what you want
to think about is, as you get further
down the page, what are the main
modules that are going to cause this
person to convert? A lot of times it's
things like credibility. So have you been featured
in major industries, publications or
national publications? Is testimonials. You have testimonials from your specific customers that bring that level of credibility. If CPU's do you have a
1,000 reviews, you know, to trust pilot or
something like that, where you bring in and you can show that level of credibility. Is it FAQs where you answer specific questions
that this person would have so that the torque T. And go try to find out on
other pages on your website. Love putting FAQs. Is it blog post? Is it awards, you know, things that reinforce
that credibility. And you as a subject
matter expert or your business as a
subject matter expert, so that they want to convert. Is it risk reversal? If you are not familiar with the concept of risk reversal, it's that idea that
if you by now, you know, you have bought a
30-day money-back guarantee. The risk reversal
is huge for getting people to commit
because it causes them to completely
cut down the barrier to entry to sign up
for your business. So when we think
about a landing page, you want to think about all of these different elements
and be constantly testing. I can't tell you how many times people will
just leave this area. They're the same for years
and years and years. Think how much money
you could make just by swiping things out and
increasing that convergent rate, one or two per cent. Especially if you're running tens of thousands,
hundreds of thousands, millions in paid media every
single month, up 1% change. There is substantial
to the business. Absolutely substantial. I have shared my SEO
techniques and tips with different companies,
entrepreneurs. And they are pretty much
satisfied techniques and have generated more leaves as compared to the
previous landing pages. Now, I'm excited about
teaching you guys these marketing
selling techniques and tips in my landing page. Conversion rate
optimization is one of the most fun things out there when you see
it actually working. Okay, so we talked
about landing pages, and obviously I could go
much deeper into that. But for this video,
I just want to give you an overview
of clinic pages, what is landing pages, and how it will help
you in your business. That's all for this video. See you guys in the next video.
4. Setting Up Grid For Landing Page: Welcome back students. In this video,
we're going to set up paid for our landing page. First of all, create a frame by pressing the F
key from your keyboard. And in the desktop.
Drop-down, choose 14, 40 by 1024 frame. Rename the frame to
show landing page. Now in the Properties Inspector, click this layer option. From here. Choose columns. After that, change
the account to 12, its side margin to 160 pixels. And it's critical to 24. Now, press Shift plus r from your keyboard,
bringing the rulers. After that, add one ruler to the left and one to the right. Also add a ruler from the top
with a height of 80 pixels, which is the space
allocated for our header. So that's how you
set up a grid for a landing page. See
you in the next video. We're going to see
a design brief. And then we will
deep dive into the acquitting the hero section
of our landing page.
5. Header and Hero Section UI: In this video, we're
going to start up the header and hero section
of our landing page. But before that, let me give you a quick overview
of Four design brief. So this is our design view. Here you see that company
name, company description, that design deliverables
and the deadline of the project that
isn't deliverables. You'll see that the
client wants to create a landing page,
faults shoe website. The landing page should be a CRO optimized so that he can generate more
leads and business. So now let's move to our friend. Here we're going to
design the header of our landing page as this
is the landing page. So I'm not going to design the logo for this landing page. I'm just putting a
generic logo here. After that on the right
side of the navigation bar, I'm going to put a twelv by 12 circle navigation icon with a shopping cart icon as it's
an e-commerce landing page. This is the color palette we are using in
our landing page. And the forms we're
going to use in this language or clashes
play and Hebrew. Now we have designed the
header for our learning page. Press the L key and add a
separate line under this, and change its color
to red as well. Now let's move down
to our hero section. In the left side of
our hero section, we're going to write
l value proposition with a small description
about the product. After that, we're going
to add the size and type of product because
it's a shoe landing page. Now we're going to add a CTA, which is we should be prominent, so forth that draw a
rectangle of round 295 by 64. Fill in with his
black radial color. Change the border radius
of this rectangle to four. After that, add a
shopping cart icon here. Copy that icon from
the exercise files. Now, add a CTA text
and the product price. So it will tap the
user's attention. Not to make this
CDM or attractive, we're going to add a
drop shadow on it. So just click this
CTF background. And in the Properties panel, click this effect step and
choose drop shadow from here. Now, in the drop
shadow properties change the x axis to zero, access to 39 color
to this color. And its opacity to 40
per cent should be 53, and it spread should be -20. After that, we're going
to add authenticity, so forth that add a note
and skewed payment patch, copy the page from the exercise files and paste
it under this CTA button. After that had a testimonial
under this authenticity tab. So to add a testimonial here, drawRectangle of around 395
by 70 to make it round. But you need to
support a radius. After that, add a stroke of 0.7 and pixels
around this shape. Now in this shape on the left, add user written stars. Copy the stars from
the exercise files and place it here in the center, right, a generic testimonial
on the right at you. The image. Now align them properly
with the shear. Left column is ready. So now we're going to
adjust the spaces of our left column as we are working with eight
column grid system. So we're going to adjust
our design accordingly. Eight column, that
means that you set the space in the
multiples of eight. Let's, let's say 8162430 to 40. After that. Let's move to the right
side of our hero section. Here we're going to add
a strong which will, that will justify our
value proposition. On the right side for a white rectangle of
around 614 by 61, poor. Place it here. Add a stroke of this color with the
size of magnitude five. After that, brought three
lips over this circle, which will be a castle
for our product. Now, add another ellipse
inside this white lives. Change its color to yellow. After that, add
some features over this yellow circle or
rectangle of around 239 by 73. Add a shoe visual with
this feature over. Align it properly. Now select the pen tool and draw a curved line of
around 80 by 4%. And after that, right, 360 degree of overweight. Now place the main image
onto the CRO circle. Show images from
the exercise file. After that, we're going to add different angles
of this shoot. For that. Draw three rectangles with
a border radius of 16. I'll change the color
of these rectangles. First to yellow to green, and third to purple. After that, at images from the exercise files
over these rectangles. Now we're going to add
that to these images. So for that brought three
shapes under these shoe. Images change their color
according to their parents. And after that, keep them layer blur property
of around four. Now on the left
and right side of these images, add two carousels. After that, we're going to add the credibility so forth that we want to add logos of different logos of
different companies. Just place the logos
here with equal spacing. After that, draw a
rectangle of around 11, 20 over these logos. Keep the rectangle gray color
from our color palette. Chain the rectangle color to linear gradient of gray color. Now select the
rectangles and logo by clicking on this mask
button on the top. You can press Control plus
Alt plus n from the keyboard. And that's how you design a hero section of a landing page with
proper value preposition, a clear visual, a prominent CTA, and with proper authenticity
and credibility. So that's all for this video. See you guys in the next video.
6. Generic Testimonials Section UI: In this video, we are going to design a generic
testimonial section, which will increase the
credibility of our landing page. So first of all, add a title here with a size of 64 pixels. And place this title over
these internal eight columns. After that drawRectangle
of around 11, 20 by 640 with a border
radius of 12 pixels. In this rectangle,
we're going to add a video testimonial for that. Just grab the image from the exercise files and place
it inside this rectangle. Now, just draw an
ellipse of 124 by 124 over this rectangle and
change its color to red. Now, add a play icon
over this ellipse. Align them properly to make this play button more prominent. Just add a 24 per cent opacity
layer over this image. So the Play button
looks more prominent. After that, we're going to add two testimonials
over this image. Not draw a rectangle, change its border-radius to 14, and add CR7 image over it. After that, grab a
testimonial shape from the exercise files, place it here and add
some text over it. Let's say watch me
scrolling my 100. So it looks like a testimony. After that, grab the
pen tool and draw a line pointed towards or video. Change its color to yellow. So it will grab the user
attentions towards the video. Now, just cap this above
testimonial and place it on the bottom right of the image and change its color to blue, and also change
its text as well. So now our section is completed with proper SEO
optimization technique. That is credibility. That's all for this video. See you guys in the next video.
7. Benefits Section UI: In this video,
we're going to work with the benefits of
our landing page. Because in landing pages we focus more on benefits
instead of features. First of all, copy this
above heading, move it down. The top spacing of 160 pixels. Remember that spacing between
sections are 160 pixels and the spacing inside the section headings and
section is 80 pixels. These are the standards that we have defined for Atlantic Beach. After that, add an image on
the left side of the section. Copy the image from
the exercise files and place it here properly. Now, add two plus icons
on these men shoes. These plus icons will
indicate that feature of the product when a user
click on this plus icon. Now on the right side, we're going to add a subtitle, our description. And SATA. The subtitle to medium
and its size to 60, and rename it to run
like never before. Jane does Syria test
to view collection. Now we're going to add
some benefits here. So for that, draw, a rectangle of
around 534 by 170, change its border
radius to 20 pixels, remove its fill and give
it a stroke of red color. After that, add a separator
line inside the ship. Now we're going to add
two benefits here. On the left side, we're
going to add a benefit item, a title, and some description. Change the title and
description size to 16. Here, renamed the
title to no soul. After that, add a soul icon of 28 by 28 pixels
inside this ellipse. Copy that icon from
the exercise files and place them here and
align them properly. Not just scrap the icon, title and description and move
it to the right and change its icon to show I could copy that I can from the exercise files
and place it here. After then rename the
title to solid grid. Now we're going to add a CRO, optimization technique
inside this section. For debt, draw a rectangle
around for four by 92 with a border
radius of 12 pixels. Give it a stroke of
this gray color. Also, add a drop shadow
of this color as well. Now, inside this rectangle, we're going to add a user
image and a testimonial. So draw an ellipse
of around 56 by 56. After that, insert a user
image into this shape. So for that, just
copy the image from the exercise files and just
paste it inside this shape. After that, grab the text tool
and add some testimonials. Now to make it more attractive, just add a heart icon on the
top right of the rectangle. Now just select all of this text with its testimonial group. All of them together,
rename it to right column. Similarly, do the
same with the image. Rename it to left column. Now select both
of these columns, align them vertically center, and place them with a
top margin of 80 pixels. So that's all for this video. See you guys in the next video.
8. Whole New Tech Section UI: Welcome back students.
In this video, we're going to create
whole new text section. So first of all, draw a full-width frame with
a height of 656 pixels. Fill it with a dark
color from our palette. After that, from
the above section, copy that right column without the benefit and place it on the left side of the screen and change its title to a
whole new technology. Also change its description, CTA, and it's testimonial
color to white. Here. Also replace the heart
icon with a star icon. All of these icons are
available in the exercise file. After that, grab the image from the exercise files and place it on the right
side of the banner. As our product is shoes. So just crop the image
and focus on the shoes. After that. Add plus icons over these
shoes and some curves. The curves with a
pen tool and keep them white color
with 50% capacity. Lastly, draw an ellipse with
a straight line over it. Change the colors to red. And change this line. And change this
line Bottom arrow from the stroke properties. So it will look like
a scroll down option. And now our text
section is completed. That's all for this video. See you guys in the next video.
9. Customized Shoes Section UI: In this video, we're
going to create, customize your shoes section. First of all, copy the above left column
section and move it down with a
spacing of 80 pixels, change the title, description. And in the CTA, at a credibility statement of
100 per cent different if not labored in 48 h shaving icon on the left
of this statement as well. Copy that I can form
the exercise files and place it here properly. After that, change that
testimonial as well. Now, on the right side, we're going to add different
sizes and color of a shoe. So on the top right, select size with a
drop-down under it, add a rectangle of
around 48 by 64, remove its fill and
give it a stroke of this dark color with
ten per cent opacity. Give it a border radius
of around eight pixels. And to make it more smooth, just click these three dots and change the corners smoothing
property to 100 per cent. Now add size here. Let's say group these two layers together and make
three copies of it and change their
sizes as well. After that, select
the site layer, move it down with a
spacing of 40 pixels. Rename the text to select color. Now, just draw an
ellipse off 53 by 53. Inside this ellipse. Again, make an ellipse
of 38 by 30 pixels. Give it a stroke of white color. Align these two
ellipses together. Now make three copies of it
and move it to the right. Not change these for ellipse
color to some random colors. After that, we're going
to add our image. So just copy the image from the exercise files and place
it here in the center. Not just let the pen tool and make a circle
around the shoe. The shoe. And David recolor. After that, add a
red ellipse of 75 by 75 pixels with a 360
degree icon over it. And place it in the center. So a user will know that
he can see the shoe in 360 degree at two arrows in the right and
left of the shoe, so that the user will know
that it can be scrollable. Now we're going to add a CRO optimization technique
over this section. First of all, add a Cristiano Ronaldo
signature over the shoe. Then press the T key and write CR7 exclusive autograph
on each pair. The phone should be 16
light and with red color. After that, add a CTA, skewed payment patches here. So just copy the CDA with cured payment pages from hero
section and place it here. Change the SQL payment
berries orientation to center align. After then, add an arrow, copy the arrow from
our second section, and paste it here and
flip it horizontally. Now add to fever icons here, copy the FIFA icons from Exercise Files and
place it here. Lastly, add a text layer
here with a size of 24 pixels and rename it
to our official partners. So the user will know that the FIFA is our
official partner. The spacing that I'm using in our landing page
is eight pixels. So it means that we are using spaces that are in the
multiples of eight. And now a section is completed. That's all for this video. See you guys in the next video.
10. Our Collection Section UI: In this video, we're going to create our collection section. First of all, copy this
main heading of 64 pixels. Place it here with a top
spacing of 160 pixels. Rename it to our collection. It should be placed on four
columns. Live on column. After that ad description
on the other seven columns. Now we're going to add
some categories here. First of all, draw a rectangle
of around 15 by 60 pixels. Border radius of 12 pixels. Also make its corner smooth by clicking
on these three dots. Give it a stroke of
this gray color. Now pests that d t
and write trending, add a training icon as well. All these icons are available
in the exercise files. Now make three copies
of it and place it with an equal spacing and change their names
and icons as well. Now to make this lecture state chain the first
rectangle color to red, with its text to white, so that the user will know that this state is
currently selected. Now we're going to add
different products here. So first of all, draw a rectangle
of around 357 at 03:45 pixels with a border
radius of eight pixels. Also makes gone
smooth. 200 per cent. Change its color to
this gray color. That egg and Nike and
a favorite icon to this cart at a shoe image
in the center of this card. To add, adapt to this image
to better drop shadow. Now add user reading stars, product name,
product, old price, and product new price
of a discount to create urgency into the
customer's view details, CTA on the left
side of this card, and on the right side at a quantity counter and a shopping cart icon with
dark gray backgrounds. Now to save our time, we're going to replicate
this card and make five copies of it and
place them properly. After that, we're going to
change the product images and color of these card so it may look different
from one another. So from here, I'm just speeding up the process
to say all the time. And now we have made all of our cards and our collection
section is completed. That's all for this video. See you guys in the next video.
11. Instagram Testimonial Section UI: Welcome back students.
In this video, we're going to create a testimonial section
for Instagram. First of all, let me give you a brief overview
of testimonials. Testimonials are a type of social proof which indicate
to visitor that people with the same pain or trust are enjoying our
product. Landing page. Testimonials are
effective for a reason. I like sales pitches. Testimonials are unbiased, making it easier for
your business to establish credibility
and increase trust in Atlantic Beach offers. In fact, studies show that
credible testimonials increase buying intent by
more than 92 per cent. So let's jump to our
landing page and let's start creating a
testimonial of Instagram. First of all, add a heading. Let's say instead obsess
under it on the left column, we're going to create
our instance card. So for that, draw a rectangle around for 98 by 640 pixels. Give me the corner
radius of 60 pixels. After that, on this card, add a user image with a
username and its location. Also add a three dot carousel, same like on Instagram, in front of this user image. After that, add a
main image of around 442 by 386 pixels with a
corner radius of 20 pixels. Here also made its
corner smooth as well. Now under this image, add a like comment, share and a bookmark icon. After that, write
a text line like by Lucas and 903
others in front of it. At TU, the images. After that add a main prominent testimonial with
a date under it. Now our left column is complete. Let's move to the right
column of this section. On the right column, add main headline and subtitle
of a testimonial. After that, at trust Pilot
patch with user rating stars. With user rating stars, then a user testimonial. After that, add a
user's signature, certified Shu level patch. Don't panic. These all things are available in
that exercise files. Lastly, add test pilot
reviews under Dispatch. Copy the bag from Exercise
Files and place it here. Last but not least, just add Add to Cart sit here with skewered
payment pages. Just copy that from the
above section and place it here in the center with
a spacing of 80 pixels, not align all of them properly, and our session is completed. That's all for this video. See you guys in the next video.
12. General Testimonial with FIFA Banner Section UI: In this video, we're
going to create a FIFA banner with general
testimonial section. So firstly, draw our rectangle
of around 11, 20 by 248. Give this the red radial color. After that, add a heading
and some description. Add up enough Cd here. Now I'm going to add
three images here. So on the left at FIFA Cup, and on the right had
football with net image. Copy these images from the exercise files and
place them here properly. Now, let's move down and add a heading with a top
spacing of 160 pixels. Rename it to some
satisfied stories. After that, add user reading
stars under this heading. Now, let's draw a
rectangle of around 14, 40 by 960 pixels. Change its color to
this light gray color. After that, we're going to
add some user stories here. So for that, draw, a rectangle of around 358
by former nine pixels. Change its color to white. Also change its corner to smooth by clicking
on these three dots. Now, draw another frame. Inside this frame of around 333 by 2.4 pixels with a
border radius of six pixels. Whereas the outer
frame border radius should be 12 pixels. So it looks
aesthetically pleasing. Here. Jane, this internal
frame color to gray. Because we're going to add
some images here under this, add a user image, username and a
verified by our batch. After that at user rating stars and a testimonial under it. Now on the right, add some inverted commas here. So it looked like a testimonial. Make two copies of it and place them with
an equal spacing. After that, the images and
username and images as well. Here also add the left
and right arrows, so forth that draw an
ellipse of 40 by 40. Change its color to white and add a left
arrow of red color on it. Now make a duplicate
of it and move it to the right and change its
abstraction to write as well. Now under this testimonial, add a separator line. So I'm going to show
some stats here. Firstly, draw a rectangle
around to 61 by 224 with a border
radius of 12 pixels. Give this a stroke of
one pixel of gray color. After that, add
user rating stars and total number
of reviews on it. Now, in the middle, we're going to add some
percentage progress bars. So first of all, add a text layer of five-stars. In front of it. Add a
rectangle of around 402 by 18 with a border
radius of four pixels. Duplicate it and change
its color to green, and its width should be 361. After that, at an 80
per cent label on it. In front of this progress bar, add a 10.5 K X layer, which was the total number of users who give five-star rating. Now make four copies of this progress bar and change their color and x
labels as well. Lastly, on the right side, duplicate this left box here at eight million-plus worldwide
product sale per year. And you both these
stars as well. Client, this text
layer properly, align these texts layers
properly with this box. So that's all for this video. See you guys in the next video, we're going to design
what's in the box section.
13. What you get in your order Section UI?: Welcome back. In this video, we're going to create what's
in the box section. So first of all, add a heading with a top
spacing of 160 pixels. Rename it to. Here is
what's in the box. After that, draw a
frame of 11, 20 by 891. Give this a stroke of this red color and a fill
color with 30% opacity. On the left column,
we're going to add main image and some images. Copy the sub images from the
hero section and paste them here vertically and
resize them accordingly. After that, draw a frame
up around 4306504, change its border
radius to 2010, its color to red. Also make its corner smooth. After that, add a main image, copy that image from
the exercise files, and place it here and align
it properly with respect. Now, on the right column, we're going to add some
details about our product. Firstly, at a product name, then user rating, stars, all price and new price. After that, add select Color
and select Size drop downs. After that, we're going to add a select quantity
counter. For that. Draw a gray line, make a duplicate of it. Change the above
line color to red. After that, at an ellipse
of 14 by 14 pixels, change its color
to gray as well. Make a duplicate of
this ellipse and move it to the right and
change its color to red. Give it a stroke of one
pixel of white color. Here. Give it a drop shadow of black color on its
y-axis as well. So it look more realistic. Here also, add a t
quantity text layer with changes when
a user changes, does litre of quantity counter. Now we're going to
add a CTA here. So just copy the CDF from the
hero section and paste it here. Make it full width. If you move the
price and place text and discard icon in the
center of this button. Under this button,
we want to add a fast delivery and a
note and security batch. Copy that from the exercise
files and place it here properly with
the proper spacing. After that, we're going
to add a banner for that. Draw a frame of
941 by 188 pixels. Let's hit with a talk
spacing of ATP cells. Change its corner radius to 20 pixels. Colors
should be read. Now at delivery
information here. So copy that from the
exercise files and place it here properly
with an equal spacing. Now, our worst in the box
section is completed. That's all for this video. See you guys in the next video. We're going to design a FAQ
section for our landing page.
14. FAQs with Footer Section UI: Welcome back students.
In this video, we're going to create FAQ
section with footer section. You first of all, copy the above
section heading and place it here with the
top margin on 160 pixels, which we have defined earlier. Add a description in
front of this text. After that, let's move down and let's start
creating FAQs. So first of all, draw a rectangle around 548 by 64 and change its corner
radius to six pixels, give it a stroke of one
pixel of red color as well. Now press the T key and
write first question. Let's say harm and
is we'll let live retake question why change is font-weight to medium
and its color to this dark color plays a
drop-down arrow in front of it. Copy that from the
exercise files and place it here properly. Now group these three layers together and make
seven copies of it. Bless them with an equal
spacing of 40 pixels. Now, we're going to change the questions here as
it's a lengthy process. So I'm speeding up
the process here. Now are FAQ section
is completed. Let's move to the last and final section of
this landing page, which is the footer section. So for that, let's draw a
frame of around 14, 42 by 292. Change its color to black color. Now on the left,
add a dummy logo, some description and
social media icons. These all are available
in the exercise files. Place them here.
Property. Now press the T key, Android a heading. And some links here, around three to four links. Group these three layers together and duplicate
it three times. Now we're going to rename
these heading endings. So from here I'm just
speeding up the process here. After that, add a
shoe pattern image in the center of this session. So just copy that from
Exercise Files and place it here with 8% opacity. Lastly, draw a rectangle of 14, 40 by 50 to change
its color to red. Lastly, press the T key
and just write copyright. And alright, reserve text. Align center with
this red rectangular. Now our landing pages completed. See you guys in the next video. We're going to design
a responsive version of the landing page.
15. Responsive version UI Design: Welcome back students. In this video, we are going to design responsively and
offer landing page. Firstly, I'm going
to tell you about the rules for our
responsive area. Let's take a frame of
iPhone Pro Max for this is possible by pressing
the F key from your keyboard and select
this iPhone frame. After that, Let's set up our grid and rulers
are responsible. For this responsive version. We're going to use
standards of iOS. Firstly, let's click on this frame and click this
plus icon in the layer panel. After that, click on
these three dots. And from here, choose
columns from disruptor. Most of you guys know that for mobile versions we
use for column grid. So firstly, just write four
columns in the Column tab. After that in the margins. If you don't know, Martin, is these spaces from
left and right. These whitespaces inside
are called gutters. Right? 20. You can also
go for 24 margins. But for now I'm
going to write 20. And in that crater,
tap, right 16. But remember, we have choosed eight column spacing in the
webpage and upper limb page. In this mobile work again, we're going to use
the four pixels spacing from four pixel. I mean, we set the spacing
in the multiples of four. And the spacing that
we have defined for any pH will be divided by
two and responsive version. It means if we have set the
spacing between two sections, 160 pixels in web version, then in mobile version, it will provide you back to. So we will set 80 pixels spacing between
sessions in mobile, because mobile screens are small and we cannot see to my
spacing in the mobile. Otherwise, the user has
to scroll too much to get to the desired content
and test not what we want. Now, let's set ruler
for our scheme. So just press the hotkey
Shift R from your keyboard. And from here, just where the rulers and place
them with this layer. After that, for vertical header, just for a rectangular
around 60 pixels and place a ruler accordingly. Here we're going to place
our header section. After that, delete
this rectangle, and let's start
creating our header. So firstly, copy the logo, cart icon and menu. I can form the landing
page and paste it here. And pin them down a little bit so it will look good
according to mobile screen. After that, let's move down
to our hero section here. Firstly, choose this left column from the web and paste it here. And pink down their
sizes as well. And place them with these
rulers from left and right. Also make the font alignment to center because it's
convenient for small screens. On the web, you can go minimum
to 60 pixels or subtext. But on the mobile you can
go to, well pixels minimum. But for now, let's stick
to 64 mobile setText. After that, let's move down. And here at our main image. Copy that from that landing page with all the stuff around it and place it here and
adjusted according to our grade. After that, copy this drop-down CTA and
testimony details and place it here properly and change the alignment to
center horizontally. Lastly, copy these client logos and place them here as well. Now, I'll first
section is completed. Let's move down towards
our next section. Here. Firstly, add a heading, so just copy the heading on the landing page
and resize it to 48 ball and place it here with
a top margin of 80 pixels. Because remember,
for mobile screen, the space between two
sections become half. Let's say if the space
between two section on rep is 160 pixels than it should be
80 pixels on mobile screens. After that, draw a frame
of around 388 by 340. Change its corner radius. Two purposes. After that, copy the image from the landing page and
place it here by pressing the hotkey control
Alt V. After that, copy the play button
and testimonial and place it over this
image properly. Now select these testimonials
with this image and group them together by pressing
Control G from your keyboard. And after that, place it with
a top spacing or 40 pixels. Now let's move down here. Add a heading. Copy the heading on
the landing page, paste it here and
resize it to 48, and place it the top
spacing of 80 pixels. After that, add user image, copy that image from the
landing page and place it here by resizing
it in the middle. After that, select the
right column details and place it under
this image one by one. But remember to resize
it accordingly. Now, let's move down here. Draw a frame of 428 by 945, change its color to black color. After that, first of all, add this right column image onto this frame,
resizes it accordingly. Now under this image, choose this left column details and place them accordingly. Remember, our heading
should be 48, description size
should be 16 light, CTA should be 20 regular. And leave the
testimony four to 16. Now let's move down to customize
your shoe session here. First of all, at
section heading, description, this left column, and this column details. After that ad Show
image resizing it down. Add these 360 degree
icons and the CTA, arbitrary for logos,
all things as well. Remember, that thing
that we placed on web will be changed to center
line on a responsive view. But it's not compulsory. Anyways, let's move
to the next section, which is our collection section. Here, add title, some
description category steps. After that. Add shoe
cards vertically. Just add three cards here. Just add three
cars here for now. And after that, add a will
all CDA after the third card, so that it will be
easy for the user to view instead of scrolling
all the way through it. Now let's move to
our next section, which is the
testimonial section. Here. First of all, add a heading. After that. At this left column card, shrink it down to
around four columns. Now we're going to
add our FIFA banner, it such as possible. So we want to customize this
session is not compulsory to showcase all the things from the web on mobile screens. Here. Just draw a
rectangle around 36 by 536 and change its color
to linear gradient. For that, just select
this frame from the web. Press Control Alt Z
and fill this frame on mobile by pressing Control
Alt V. After that, add a heading description and a CTA vertically
with equal spacing. Lastly, copy this FIFA icon. Let's sit here and resize
it to do a four by 241 and align its
center horizontally. Now group them all together. Let's move down to the
next section here. At section heading, this user
rating stars and reviews. After that, we're going
to add a card here. So just copy the card from the WebView and
place it here and resize it to four columns
on top of this card, and left and right
arrows in the center. The one thing I forgot to add is the light gray background. So just add a light
gray background behind this card and arrows. After that. After this card, we're going to add
user rating card and total sale per year cards. Just copy them from
the WebView and place them here on 2.2 columns. Now let's move down to what's
in the box section here. First of all, add
a section heading. After that at this main
image on these four columns. Here, add these other shoe
images under this main image. Now choose this
right column details and place them here accordingly. After that, we're going
to customize this banner. So first of all, draw a
rectangle around for 23, 44. Here at these shipping
and written details, the layout of 2.2 columns and resize them
according to mobile screen. E.g. change these
free shipping text to 16 medium and description
to 14 lacked. After placing these
shipping details, first, the L key from the keyboard and draw a line up
around tonight, three, change its speed to 0.5 pixels and its color to
white, linear color. And place it in the
center of this left and right column so it can
differentiate between. So are you able to differentiate between these two columns? Now let's move down
to the FAQ section. Here at the section
name and description. After that, choose this
first question from the web. Place it onto this mobile
screen for columns. Resizing question text to 16 medium and change this
arrow position as well. Now make six copies of this. First question. Duplicate them with a spacing
of the pixels between them. Not just change the text
of these questions. Now, or FAQ section
is completed. Let's move to our last section of this landing page
responsibility. Here. First of all, draw a black
rectangle of 14428 by age 74. After that, at your
local description of around two lines. After that, place these
four column links in the format of 2.2 columns
on responsive urgent. Lastly, add these social media
icons after these things. And here, draw a rectangle of
around for 28 by 50 pixels. Change its color to red. And select this, alright, his own text, and paste it
onto this red rectangle. And align your center
vertically and horizontally. Now our landing page, responsible agent is completed. That's how you create
a landing page with its responsive version with proper CRO, optimization
techniques. That's all for this video. I hope you will find this course helpful and see you guys in
another course of Figma. Thanks for watching this course.
Shehar Yar, UI/Ux Designer
