YT YouTube2Text

YouTube2Text → Transcripts → UX/UI Design Tutorial in Figma - Design Modern Website from Scratch

UX/UI Design Tutorial in Figma - Design Modern Website from Scratch — Transcript

by uxpeak · 5,864 words · 948 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:04[Music]
0:06Today, you're going to learn how to
0:08design a beautiful and modern website
0:10that truly resonates with your target
0:12audience through a step-by-step
0:14tutorial. I will show you how to take a
0:16super simple brief and transform it into
0:19this beautiful and modern homepage
0:21design. And because our mission at UX
0:23Peak is to help you become a UXUI design
0:25pro, we've prepared the source file for
0:28this tutorial that you can download for
0:30free from the description below.
0:32This is a step-by-step tutorial lesson
0:34from our UXUI design mastery course,
0:37which is a top design course packed with
0:39many other amazing step-by-step
0:41tutorials, strategies, resources, tips,
0:44and tricks that you need to know about.
0:47Use the link in the description or
0:48simply search w.xpeak.com. uxpeak.com
0:52and start your journey to become a true
0:54UXUI design pro.
0:57As a special bonus, use the exclusive
0:59code pride 50 to get an incredible 50%
1:02off your purchase. But act fast. It's a
1:04timelmited offer for a few students
1:06only. The best part is at the end of
1:09completing the course, you'll receive
1:11this shiny certificate of completion
1:12with your name that you can share on
1:14your LinkedIn or CV to show your
1:16accomplishment. And stay tuned because
1:18I'll also reveal the one feature that
1:20every music company's homepage
1:22desperately needs but often forgets.
1:25Okay, are you ready? The brief for this
1:28project is to create a landing page for
1:30a fictional music streaming company
1:32called Pride. Pride offers an ad-free
1:34platform with millions of songs that is
1:36web- based for now with the option to
1:38pre-download the mobile version. The
1:40target audience is young adults between
1:41the ages of 16 and 26 who are into
1:44dance, hiphop, rock, and R&B. The
1:47purpose of the homepage is to convert
1:48visitors into signups for the Pride and
1:51Free platform. Before we dive into the
1:53design process, it's important to
1:55understand the problem you're trying to
1:57solve and the people you're solving it
1:59for. By researching your target
2:00audience, you'll learn about their
2:02needs, motivations, and frustrations,
2:05which will inform your design decisions.
2:07You can gather this information by
2:08looking at current trends, competitor
2:11websites, forums, groups, and reviews.
2:13or even better by conducting user
2:15research and speaking directly with
2:17potential users.
2:19Okay, let's start our process by
2:21summarizing a few assumptions about the
2:23target users that we will work with. Our
2:25target users are both male and female.
2:28They are 16 to 26 years old. They are
2:31interested in dance, hiphop, rock, and
2:33R&B music genres. The majority of our
2:37users use desktop devices and are good
2:39with technology. Now that we have our
2:42assumptions clearly defined, we can
2:44start formulating our design decision.
2:46Everything we do from now on should be
2:48with focus on our target audience and
2:50the business objectives. We're now ready
2:52to think about the color palette,
2:54language, images, and content that we'll
2:56use on our website to appeal to our
2:58target audience. We want to make sure
3:00that we convert them into customers.
3:03For starters, we'll choose a bold and
3:05beautiful dark theme with the primary
3:06color of dark blue, which we'll use for
3:08the background. We chose a dark theme
3:11website because it's popular with our
3:12target age group and is also easier on
3:15the eyes during the evenings when our
3:16users are most active. To add a pop of
3:19energy and power, we select the primary
3:21red color for all call to actions. We
3:24can also add secondary colors of pink
3:26and blue to bring personality,
3:28uniqueness, and vibrancy to our brand.
3:31If you want to use the same color
3:32library template, you can find the link
3:34to this template below the video. Now,
3:36let's populate the template with all the
3:38other colors that we're going to use on
3:40our website. We chose our colors by
3:43experimenting with different
3:45combinations and making sure they were
3:46easy to read and accessible.
4:04Once you have your chosen colors, you
4:06can define their use in the template
4:08right in this area. We can also create
4:11color styles which we've covered in the
4:13previous module.
4:19As a reminder, if you have all your
4:21buttons red and you later decide to
4:23change red to green, you can simply
4:25change it in the color styles and the
4:26color red will be replaced by green
4:28everywhere you use the color style. As
4:31you can see, once I change the color in
4:32styles, the change was reflected in all
4:34places
4:38in our web design. We'll also need
4:40transparent and gradient colors. So,
4:42let's define those as well.
4:48Okay, we now have all colors we are
4:50going to use in the design. Let's create
4:52color styles. To create a color style,
4:54first select an object with your desired
4:56color. Then click on the four dots next
4:59to the fill option. A popup will appear
5:01with several options. Click on the plus
5:03icon and name your color.
5:08Once you're done, click the create style
5:10button and your style will be created.
5:12Instead of a color code, you will now
5:14see the name of your color.
5:17To change a color style, select the
5:19color and click on the edit style icon.
5:23To adjust the color, click on the
5:24colored square and make your changes.
5:26The updates will be automatically saved.
5:28If you need to detach a style for
5:30individual edits, hover over the color
5:32in the right panel and click the detach
5:34style icon. This will allow you to
5:36assign the element any color, but you
5:38will no longer be using the style, and
5:40any changes made to the text style will
5:42not be reflected in the detached
5:44version. Styles are most useful when the
5:46same color is used in multiple places.
5:49We will now create color styles for all
5:51the other colors.
6:07Great. Now that we have the color styles
6:09ready, let's move on to the typography.
6:12For a strong impact on our target
6:13audience, we want to choose a font that
6:15is big, bold, and clean. For this, enter
6:19is the perfect option to make an even
6:21bigger impression. We can use larger
6:23text sizes. This typography style was
6:26chosen to appeal to our specific target
6:28audience, but it may not be appropriate
6:30for other websites with different
6:32audiences. Please note that these text
6:34styles are designed for large desktop
6:36displays. For smaller laptop screens,
6:38tablets, and phones, different text
6:40styles will be needed. Let's now set up
6:43all the different font sizes and weights
6:45we'll use for our website. For headings
6:47and subheadings, we'll follow the
6:48standard naming convention. When
6:50defining your typography, you'll adjust
6:52the font size, weight, and line height.
6:54While letter spacing can also be
6:56adjusted, it's not recommended for
6:58beginners as it can sometimes have a
7:00negative effect. For adjusting line
7:02height, use percentage values instead of
7:05set values. This way, as you scale up or
7:07down, the line height will always be
7:09proportional to your new size instead of
7:11being fixed in pixels. For headings, aim
7:13to have a line height between 110% and
7:16130%, while for paragraph text, aim for
7:19140% to 170%. Remember, the larger the
7:23text, the smaller the line height should
7:25be, and vice versa. For paragraphs,
7:28we'll have three different sizes. An
7:30optimal line height is around 150%,
7:33which enhances the overall aesthetic.
7:42We'll also include three UI label
7:44styles: semi-bold, medium, and regular.
7:50Similar to color styles, we'll create
7:52text styles to make future updates
7:54easier. If we ever need to modify the
7:56text style, for example, if we decide to
7:58change the font size from 22 to 16
8:01pixels, we can simply update the text
8:03style and have the changes reflected
8:05across the entire website. To create a
8:07text style, click on the four dots next
8:09to the text, add a name, and then click
8:11the create style button. We now need to
8:14create text styles for all the other
8:15headings, paragraphs, and UI labels.
8:29Finally, let's find some images to use
8:30in our design that will appeal to our
8:32target audience. We'll obtain these
8:34images from the premium paid image
8:36library on invo.com with a license to
8:39use them. To use these images in your
8:41projects, you'll need to download them
8:42from their website and obtain a license.
8:45You can find the links to the images in
8:47the Figma source file. Alternatively,
8:49you can use similar free copyright free
8:51images from websites like unsplash.com
8:54or pixels.com.
8:58It's important to only use copyright
9:00free images or images you have the right
9:02to use. Now that we have our colors,
9:05typography, and images set up, we can
9:07move to another part of this tutorial,
9:09designing the website.
9:11First off, we'll start by creating a
9:13frame for our design. You can think of a
9:15frame in Figma as an artboard and other
9:17design tools. It's a container that
9:19keeps all your elements in one place.
9:21Let's make a frame that's 1920 x 1080
9:24pixels.
9:26Next, let's move on to the hero section.
9:28Here, we're going to introduce Pride to
9:31see how it looks on a 1920x 1080 pixel
9:33screen resolution. We'll make a
9:35duplicate. Then, let's take our main
9:37frame and make it a bit larger. After
9:40that, we're going to change the
9:41background to our main black color and
9:43add the logo, which is available in the
9:45assets section below this video. Then,
9:48it's time to add the navigation links.
9:50We're going to use a UI label for these
9:52links and select the style from our text
9:54styles. You can duplicate the first link
9:56to speed up the process. Just hold the
9:58option key and shift on a Mac and drag
10:00the object or use the keyboard shortcuts
10:03command plus C and command plus V.
10:08Now, let's change the link colors and
10:10create a button for the signup link.
10:14We're going to create an auto layout for
10:16the signup link by pressing shift plus
10:18A. Once we've done that, we will add a
10:20fill, adjust the horizontal and vertical
10:22padding, and add a 16 pixel corner
10:25radius.
10:33Now select the login link and the sign
10:35up button and create another auto layout
10:38with 24 pixels horizontal gap between
10:40items. Now select all the other links
10:42and create another auto layout with 48
10:45pixels horizontal gap between items.
10:48Finally, select the logo and the two
10:50auto layout and create one more auto
10:52layout with 386 pixels horizontal gap
10:55between items. We're at a good point
10:58now. So, let's add a grid. This will
10:59help us make sure everything on the page
11:01is aligned just right. Click on the plus
11:03button to add a grid and then adjust it
11:05by clicking on the grid icon. This will
11:07bring up a popup where we'll change the
11:09grid to columns. Set the count to four
11:11and keep the stretch type. We'll add a
11:13margin of 200 pixels and adjust the
11:16gutter to 30 pixels. Next, let's return
11:18to our navigation. Create an auto layout
11:21and add a fill. We're going to add
11:23transparent color styles for both the
11:25fill and stroke.
11:30Let's add some horizontal and vertical
11:32padding and make sure our navigation
11:34aligns with the grid.
11:46Now set the corner radius to 24 pixels
11:49and position the entire navigation 24
11:51pixels from the top of the page.
11:56Now we're ready to add a heading, some
11:57paragraph text, and a call to action
11:59button.
12:05To speed things up, we'll style them
12:06using the color and text styles we
12:08created earlier.
12:23Now we'll need to create another button
12:25using auto layout. Set the horizontal
12:27padding to 60 pixels and vertical
12:29padding to 22 pixels. Add a fill of
12:32select the primary red color. Lastly,
12:34add a 16 pixel corner radius. While it's
12:37usually a good idea to name your layers,
12:39we're going to skip that in this
12:40tutorial to keep things moving. Don't
12:42worry, your template will come with
12:44named layers. If you need help with
12:46layer naming, there are plugins like
12:48autoname and rename it that can help.
12:51With our styles applied, let's align
12:53everything together.
13:21Next up, we'll generate a background
13:23blur. Start by creating a rectangle and
13:25changing its fill from solid to an
13:27angular gradient.
13:32We'll give it a slight rotation and
13:34incorporate our secondary pink and blue
13:36colors.
13:46Feel free to experiment with the
13:47position and opacity of these colors
13:50until you strike the right balance.
13:52Satisfied with the result? Great. Now
13:54add a layer blur and set the value to
13:57approximately 190. A little adjustment
13:59might be needed.
14:04Now we're ready to add our hero image.
14:06We'll have to remove the background
14:07first, which can be done using Photoshop
14:09or a background removal tool like
14:11Erase.bg.
14:23With the background out of the way,
14:24position the image just right.
14:29Let's flip the image horizontally so our
14:31title remains the focal point.
14:35Now let's create a rectangle and add a
14:37layer blur effect. This will make the
14:39hero image fade away smoothly.
14:47Now we'll position the title right in
14:49the middle and make sure it's aligned
14:50with the grid.
14:56Time for a quick prototype review. Great
14:58progress.
15:02Let's focus on the second section of our
15:04homepage, which will be focused on
15:06displaying three amazing and trending
15:08tracks of this week. Featuring the
15:10week's top three trending tracks on our
15:12homepage would boost engagement by
15:14keeping content fresh, encouraging
15:15exploration, and highlighting what's
15:17popular, effectively attracting and
15:19retaining visitors. Let's start with
15:21creating the title for the second
15:23section. We'll use the H2 text style
15:25which is slightly smaller.
15:33Now copy the paragraph from the previous
15:35section and use dark gray color for the
15:37paragraphs. This will give us better
15:39contrast between the headings and the
15:41paragraphs. Let's also change the
15:43paragraph color in the hero section to
15:45dark gray.
15:47Now, select the title and the paragraph
15:49and create an auto layout with a 32
15:51pixel vertical gap between items.
15:54Next, we'll need three images from our
15:56image library.
16:06We'll make them 300x 420 pixels, but we
16:10might need to crop some of them. There
16:12are a few ways to crop an image, but
16:14we'll show you two simple methods. One
16:16simple method is to hold down the
16:17command key on a Mac and drag the image
16:19with your mouse to crop it.
16:24Another way is to doubleclick on the
16:26image. Figma will add eight blue handles
16:29around the image. You can then choose
16:30how you want to crop the image by
16:32clicking and dragging the blue handles
16:34in any direction.
16:39Great. Now that our images are the same
16:41size, we can add a play icon from the
16:44image library and position it at the top
16:46of the image.
17:03However, when you create an auto layout,
17:05you'll see that you won't be able to
17:06easily position the icon in the middle
17:08anymore. Luckily, we can use absolute
17:10positioning. Select an object you want
17:13to place on top of another object and in
17:15the right panel, select absolute
17:17positioning. This will let you place the
17:19object on top of another object and
17:21align it as you like.
17:26Now, we'll do the same with the rest.
17:40Let's add more information. Now
17:45we'll use H3 heading for the titles in
17:48white color.
17:56For the singer's name, we'll use a
17:57medium paragraph with dark gray color.
18:11For number of lessons, we'll use UI
18:13label regular in gray color.
18:22Now let's upload another icon for the
18:24number of listens. Group the icon by
18:26pressing command plusG and add an auto
18:29layout. Add eight pixel padding from all
18:31sides and a transparent background.
18:41Lastly, apply a 25 pixel corner radius
18:44and change the color of the icon.
18:48We'll now need to create several auto
18:50layouts and adjust the spacing between
18:52layers.
18:58In this last auto layout, we'll add
19:00padding of 70 pixels from the top and
19:02bottom and 60 pixels from the left and
19:04right.
19:07We'll also add a transparent background
19:09color style and change the corner radius
19:11to 24 pixels.
19:14Finally, we'll add a transparent stroke
19:16style and a background blur with a value
19:18of 33.
19:24All done. To make things easier, create
19:26two copies and adjust the content
19:28accordingly.
19:32To copy an image, select the image,
19:34press command plus C, and then select
19:36the image you want to replace. Right
19:38click on the image and click on paste to
19:40replace. Do the same for the second
19:42card.
19:44We'll now adjust copy content for each
19:55Great progress. Now let's connect all
19:57three cards through auto layout and
19:59select space between instead of packed.
20:03This allows the spacing between the
20:05cards to be dynamic based on the total
20:07width. We'll adjust the width of the
20:09auto layout so that it aligns with the
20:10grid.
20:15To make the layout a bit more
20:16interesting, we can add some extra
20:18bottom padding to the middle card to
20:20make it stand out more. To apply only
20:22bottom padding, click on the small icon
20:24next to the padding option. You'll see a
20:26controller to control padding from all
20:28sides.
20:32We'll also change the top alignment of
20:34all cards to center alignment and add a
20:36different background fill for the middle
20:37card.
20:47Next, we'll align our cards with the
20:48copy and create an auto layout with an
20:5180 pixel vertical gap between items.
20:55Only one step left. Copy the background
20:58blur from the hero section and adjust
21:00the positioning colors until you find
21:01the right balance.
21:18Great job. We've completed another
21:20section. Let's keep up the momentum and
21:22continue to work together to complete
21:23the remaining sections in the next
21:25videos.
21:28Welcome back. In this section, we're
21:30going to focus on displaying a variety
21:32of music genres on our website to appeal
21:34to our target audience.
21:36Our goal is to design an option for
21:38users to start listening to these
21:40libraries. In order to accomplish this,
21:43we will design a carousel that includes
21:45arrows, allowing users to browse through
21:47additional libraries.
21:51To start, let's copy our existing title
21:54and paragraph.
21:58Now change the alignment and the copy.
22:13And don't forget to make sure that the
22:14frame is aligned with the grid.
22:23Next, grab the arrow icon from the image
22:25library and create an ellipse that has a
22:28height and width of 55 pixels.
22:33Remove the fill and add a dark gray
22:35stroke with 2.2 pixel width.
22:47Create an auto layout and use absolute
22:50positioning to place the arrow icon in
22:52the center of the ellipse. Perfect.
22:55Now, duplicate the entire arrow and
22:57rotate it like so.
23:00Now, select the two arrows and add an
23:02auto layout with 24 pixel spacing
23:04between.
23:06Adjust the color of the arrows so it's
23:08clear that only one of the arrows is
23:09currently clickable.
23:29Now select everything in this section
23:31and create an auto layout with the space
23:33between property.
23:39Next, we'll add images to our carousel.
23:42We'll grab four images from our library
23:44and adjust their size to 358x490
23:47pixels.
23:49If you come across any odd sizes like
23:52490.48,
23:54don't worry, you can fix it by simply
23:56dragging the frame up and down by one
23:57pixel. You can also adjust the nudge
24:00amount in the settings for even more
24:02control.
24:26I feel
24:33you.
24:46We will create four frames for our
24:47content by right-clicking on the image
24:49and selecting frame selection. Within
24:51each of these frames, we will include a
24:53library heading and the number of songs
24:55in each library. We will copy the
24:57existing text, change it, and then apply
24:59our text styles.
25:18We'll add a music icon to support our
25:20copy and align everything together.
25:48For the bottom part, we'll add a nice
25:50background blur to make the text on the
25:52image more accessible and readable.
25:56We'll change the frames property to clip
25:58content to keep everything neatly inside
26:00the frame.
26:07We'll use a color from the image to
26:09match it nicely and add a layer blur
26:11with adjusted opacity.
26:26Next, we'll add the play button and
26:28position it slightly above the center.
26:36We'll align it with the rest of the
26:37content and then copy it over to the
26:39other frames.
26:45Then we'll just easily change the
26:47content for each frame.
27:15We will copy the background blur and
27:17adjust the color for each frame
27:19individually.
28:17Next, we will select all cards and
28:19create an auto layout with the property
28:21space between. This will nicely help us
28:23to make sure that everything is evenly
28:25spaced.
28:28Then, select the last three cards and
28:30add a 24 pixel corner radius. Now it's
28:33time to create a beautiful shadow
28:34reflection.
28:45To do this, we will create a copy of the
28:47image and position it slightly below the
28:49image. We will apply blur with the value
28:52of 49.
28:56Then we will create an auto layout
28:58between the shadow and frame.
29:09We can do the same for the rest of the
29:11images.
29:25Heat. Heat.
30:02We'll adjust the opacity until they have
30:04the same luminosity.
30:32Finally, we'll put everything together
30:33with the top part. Let's preview the
30:36design and see what progress we've made.
30:38Great job. That is looking great. We've
30:41just finished another section.
30:44Awesome. Let's step into our next
30:46exciting section, which we will call
30:47trending artists. This part is all about
30:50shining a light on the artists that
30:52everyone's buzzing about and their top
30:54tracks that are keeping our platform
30:56lively and exciting. Think of it as our
30:59way of showing just how vibrant and
31:01energetic Pride is all through the eyes
31:03and ears of our community.
31:13We're going to keep things friendly and
31:14straightforward using language that
31:16speaks directly to our users. We'll wrap
31:19our words in a design that feels like
31:21part of the family, consistent with
31:23everything else they've seen from us.
31:48Let's pick out the five cool artist
31:50images from our library.
31:58But we're not stopping there. We're
32:00giving them a little makeover. Rounding
32:02those corners to transform them into
32:04perfect circles. We'll resize each image
32:07to 200x 200 pixels, making them just the
32:10right size.
32:19And let's add a sprinkle of our magic.
32:21Alongside each artist name, we'll
32:23include the number of tracks and a
32:25special feature link. Think of it as a
32:27warm invitation, a gentle nudge for our
32:29users to explore deeper and maybe even
32:31encourage them to join our community.
32:37We'll start by setting up an auto
32:39layout. This is our first step toward
32:41organizing our content beautifully.
32:59Let's apply our text and color styles to
33:01create an effective visual hierarchy.
33:03We'll use a slightly larger size for the
33:05artist names as that's the most
33:07important information. For the number of
33:09songs, we'll use our gray color since
33:12this information is less critical. And
33:14we'll make the explore button slightly
33:16more prominent to encourage exploration
33:17of those artists.
33:25We'll ensure there's enough room for
33:27everything to breathe by adding 32
33:29pixels of horizontal padding and 40
33:31pixels of vertical padding.
33:36We're setting the stage for our design
33:38elements to shine. Next, we're going for
33:41that sleek and modern vibe with a
33:43transparent background fill and stroke
33:45style.
33:48Now, for the artist photo, this is where
33:50we want to draw the eye. We can add a
33:53shadow effect to give it some depth,
33:54making it stand out more. We can use the
33:57color picker tool to copy a color
33:59directly from the photo.
34:09We'll tweak the shadow values to ensure
34:11it's noticeable without overwhelming the
34:13photo. Now, let's preview it properly
34:15and see whether we need to tweak
34:16something.
34:28Let's duplicate this card and change the
34:30photos and the contents.
35:06And here's a neat trick. We'll copy the
35:08background blur layer from the second
35:10section and adjust it until it matches
35:12our design beautifully.
36:01Finally, it's time to preview our
36:03design. Fantastic. We're making a great
36:06progress. Now, let's lock the layer to
36:09keep our design tidy. Simply click on
36:11the lock icon next to the layer name in
36:13the layers panel. This will ensure
36:16everything stays in place as we work on
36:18other parts of our design. Next, we're
36:21going to bring all our cards together in
36:22harmony. Select them all and create an
36:25auto layout with the space between
36:27property. This keeps our cards neatly
36:28aligned and ensures they're in perfect
36:30sync with the grid.
36:39Now, let's sprinkle a bit of creativity
36:41into our layout. By creating an auto
36:44layout for the second and fourth card
36:46and applying an 80 pixel top pattern,
36:48we're adding a dynamic rhythm to our
36:49design. It's like we're playing with the
36:52visual flow, making the layout more
36:54engaging and unique.
37:09That looks so much better, doesn't it?
37:12The next step is to select the entire
37:14section except for the background blur
37:16and create another auto layout. This
37:18time, we're going with 80 pixel spacing.
37:20It's all about giving our elements room
37:22to breathe and ensuring that our design
37:24feels open and inviting. If you had
37:26locked the background layer earlier,
37:28now's the time to unlock it. Just right
37:31click on the background blur area, which
37:33will highlight the layer in the layers
37:35panel. Click on the lock icon again to
37:38unlock it. And then you can adjust the
37:39layer's position as needed.
37:45Finally, let's add a finishing touch, a
37:47button at the end of this section. This
37:49button is a call to action for users to
37:51explore all the artists on the platform.
37:54We can easily copy the button from the
37:56first section of our page and update the
37:58text. The copy will be dynamic, meaning
38:01it will show exactly how many artists we
38:04have currently on the platform.
38:06Incorporating a see all artists and the
38:08number of artists button significantly
38:10enhances user experience by introducing
38:12transparency and setting clear
38:14expectations.
38:16This method not only informs users of
38:18the breadth of content available,
38:20fostering a sense of abundance and
38:21choice, but also utilizes psychological
38:24triggers, encouraging users to explore
38:27further. By quantifying the options, it
38:30directly taps into users curiosity,
38:32motivating them to click through and
38:33engage with more content. This approach
38:36can lead to increased time spent on the
38:38platform, deeper engagement, and higher
38:40conversion rates as users feel more
38:42informed and in control of their
38:44browsing experience. And just like that,
38:47we've wrapped up yet another beautiful
38:49section of our web design. Great job.
38:57We're moving on to an exciting part
38:58where we'll spotlight one of the current
39:00popular artists on the Pride platform
39:02and showcase their hit songs. Let's jump
39:05right in. We are going to spotlight an
39:08artist called Arya. She will be the face
39:10of this platform as we've already used
39:11her in our hero section. In the real
39:14world, this would be a popular artist
39:15that people love. First, let's grab
39:18Arya's picture from our image library.
39:24We want Arya to really stand out, so
39:26we're going to remove the background
39:27from her picture.
39:33As I've mentioned before, there are
39:35fantastic tools out there like erase.bg,
39:38remove.bg, or Adobe Express that can
39:41help you do this effortlessly and for
39:43free.
39:48Next up, we'll reuse the title and
39:50paragraph layout from the previous
39:52section, but tweak the text to introduce
39:54Arya.
39:56We'll apply our styles we defined
39:57earlier. We'll share some interesting
40:00tidbits about her and emphasize that
40:02she's an exclusive artist on the Pride
40:04platform. This is our chance to make
40:06area's introduction as engaging as
40:09possible.
40:29Are
41:08Now, let's create a spotlight for Arya's
41:10most loved song. We'll design each song
41:13as a mini feature complete with a cover
41:15title, artist name, and how long the
41:17song plays.
41:33Heat.
41:35Heat.
41:59Okay, we got the song titles and artist
42:02names ready. Now we can arrange them
42:04using an auto layout with a cozy 8 pixel
42:07spacing. This keeps everything neat and
42:09clean. For the song covers, we'll select
42:12seven images from our library. The first
42:15image needs to be square, so let's crop
42:17it accordingly.
42:26By framing this cropped image and
42:28duplicating the frame, we can
42:29efficiently manage the other images
42:31without having to crop each one
42:32individually.
42:34Just slide the second image into the new
42:36frame, adjust, and then remove the
42:38original.
42:41Repeat this for the rest and resize each
42:43image to a crisp 80x 80 pixels.
43:18We will also nicely round the corners of
43:20each image to make it nicely modern and
43:22friendly. Now take the first song image
43:25and details we've prepared and arrange
43:27them into an auto layout, tweaking
43:29alignment and spacing until it's just
43:31perfect. We can then borrow the play
43:33button from a previous section, scale it
43:36down to fit our design.
43:53and add the song duration with a
43:55comfortable 24 pixel spacing between
43:57elements.
43:59Let's create another auto layout for all
44:01of these elements, setting the spacing
44:03to space between.
44:11We'll duplicate this frame for each of
44:13the six songs, updating the covers and
44:15details accordingly.
44:30We
44:56We'll use auto layout to make sure each
44:58card has equal spacing. creating a
45:00visually appealing grid. For the
45:03finishing touches, we'll select all the
45:05elements within the card and wrap them
45:06in another auto layout. This time with
45:0840 pixel spacing and generous padding of
45:1140 pixels on the sides and 60 pixels on
45:13the top and bottom.
45:23We'll apply a transparent background and
45:25stroke style for a sleek look.
45:34Then we'll soften the edges with a 24
45:36pixel corner radius. We'll add a
45:38background blur effect with a 48 value
45:40to achieve that trendy glassy effect.
45:43We'll align everything nicely and wrap
45:45the entire composition in an auto
45:47layout.
46:04Now, for a bit of flare, let's
46:06experiment with a gradient background
46:07blur. This might take a few tries, but
46:10it's all about finding that perfect
46:12blend that makes our design pop. If
46:14something doesn't quite look right,
46:16we're free to tweak until it's
46:17absolutely perfect.
46:43Let's take a moment to preview our work.
46:46And would you look at that? It has
46:48turned out amazing. Fantastic effort.
46:50That is looking good.
46:54Moving forward in our Figma tutorial,
46:56we're tackling an essential feature for
46:58any website, the sign up section for the
47:00newsletter. In this next step, we'll
47:03incorporate a newsletter signup form
47:05right on the homepage, ensuring it's a
47:07breeze for visitors to subscribe to the
47:09company's updates. We'll kick things off
47:11with a catchy title, don't miss a beat,
47:14paired with a compelling description
47:16that outlines the benefits of
47:17subscribing. Writing compelling UI
47:20design copy for your website. Including
47:22newsletter banner is crucial for
47:24boosting conversions on your website.
47:26It's not just about informing visitors.
47:29It's about engaging them, sparking
47:30interest, and making the action of
47:32signing up irresistible. Good copy
47:34highlights the value they'll receive by
47:36subscribing. This clarity and appeal can
47:39significantly increase the likelihood of
47:41visitors taking action directly
47:43impacting your website's conversion
47:45rates. Keep it concise, clear, and
47:47focused on the benefits to the user, and
47:49you'll see more visitors turning into
47:51subscribers. To organize the title and
47:54the description, we will create an auto
47:56layout with the spacing between them of
47:5832 pixels. We will adjust the horizontal
48:01resizing properties of the title and
48:04paragraph to fill container. The entire
48:06frame will be set to 618 pixels wide to
48:09align perfectly with the grid.
48:16Next, we'll select the headphone image
48:18from our library, positioning it to the
48:20right side of our text. By removing any
48:23unnecessary elements from the image, we
48:25will make the image stand out more with
48:27a transparent background. Ensuring the
48:30image maintains its original charm,
48:32we'll lock the aspect ratio by selecting
48:34the constraint proportions icon. Then,
48:37we will adjust its width to 576 pixels.
48:40Directly below our enticing text, we'll
48:43introduce an email field for visitors to
48:45input their addresses.
49:10The subscribe button will come next. We
49:12will design it by using the send icon
49:13from our image library and borrowing the
49:16background design for the play button.
49:20We will simply replace the play icon
49:22with the send icon.
49:31To bring it all together, we will create
49:33an auto layout between the email field
49:34and the subscribe button, setting the
49:36spacing to 24 pixels. Then, grouping
49:39both together, we'll create a new auto
49:42layout with a 56 pixel gap. Adding one
49:44more layer of auto layout, we'll add
49:47horizontal padding of 138 pixels and
49:49vertical padding of 40 pixels.
49:57After adding a fill and adding the image
49:59into our auto layout, we'll shift the
50:01direction to horizontal and arrange the
50:03components as needed.
50:20We will transition the background's
50:22color from solid to linear, which create
50:24a subtle fade effect, enhancing the
50:26aesthetic appeal. We'll round off the
50:28corners of the main frame to 32 pixels
50:30to maintain consistency with the overall
50:33design style we have been using
50:34throughout the website. We'll adjust the
50:36spacing property to space between, which
50:39will allow us to fine-tune the frame
50:41width. This will help us to fit our
50:43frame to the grid precisely. For an
50:45intriguing visual touch, we want the
50:47image to slightly exceed the bounds of
50:49its container achieved through absolute
50:51positioning and modifying the frame
50:53properties.
51:17Now we will work on the positioning and
51:19spacing until we get it just right.
51:48As we approach the final section of our
51:50homepage, the footer, we're setting the
51:52stage for convenient navigation for
51:54website visitors. Starting with copying
51:57the logo and sign up button from the
51:59navigation bar. We'll divide the footer
52:01into three column
52:09get started account and pride. Each
52:12column will be labeled using the text
52:14style UI label with titles in a darker
52:16shade of gray and list items in a
52:18lighter shade to enhance visibility and
52:20clickability.
52:29I will now add quickly a few links to
52:31different pages of the Pride website.
53:01We will use auto layout to bring
53:03everything nicely together and space
53:05elements appropriately.
53:28For the next portion, we'll add a brief
53:30description of Pride and links to social
53:32media, followed by a line divider.
54:06The last section of the footer will
54:08feature copyright information, links to
54:10privacy related content, and crucial
54:12legal details.
54:14all aligned and spaced correctly.
54:28Next up, we'll use an auto layout
54:30between the second and last sections of
54:32the footer. This will help us keep
54:33everything neatly organized and aligned.
54:37To ensure a cohesive look, we'll adjust
54:39the line divider, making it slightly
54:41shorter so that it matches the width of
54:42the last section perfectly. This small
54:45detail adds to the overall polish and
54:47professionalism of our design. Before we
54:50finalize everything, we'll ensure the
54:52homepage sections are spaced adequately,
54:54making any necessary adjustments for
54:56perfect alignment.
55:40To wrap up, a background blur will be
55:42applied to our navigation for a sleek
55:44finish.
55:52Now, let's take a moment to preview our
55:54final design. Take a step back and
55:56admire the incredible work we've done
55:58together if you have been following
55:59along. Fantastic job. Through this
56:03tutorial, you've gained valuable
56:04knowledge and skills to design visually
56:06appealing homepage designs confidently.
56:09If you've been following along or are
56:11feeling inspired to give it a go
56:12yourself, now's your chance to create
56:14something similar or even better. Below
56:17you'll find a link where you can submit
56:18your creation. We're eager to see what
56:20you've come up with. I hope you enjoyed
56:23this video tutorial as much as I did. I
56:25will see you in the next one.

About this transcript

This page contains the full transcript of UX/UI Design Tutorial in Figma - Design Modern Website from Scratch by uxpeak, generated from the public captions YouTube serves with the video. The transcript has 5,864 words across 948 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.