Download "Дизайн Landing Page в Figma Часть №2"

"videoThumbnail Дизайн Landing Page в Figma Часть №2

0:00

Блок "О театре"

0:09

Блок "Наши постановки"

0:19

Блок "Партнеры театра"

Дизайн Landing Page в Figma Часть №1

Дизайн Landing Page в Figma Часть №1

Channel: Денис Тимошицкий

Figma с нуля за 1 час! (уроки веб дизайна для начинающих)

Figma с нуля за 1 час! (уроки веб дизайна для начинающих)

Channel: VideoSmile

Веб-дизайн

Веб-дизайнер

Figma

UI

UX

Дизайн Сайта

Web Дизайн

Курс Веб-Дизайна

Веб Дизайн С нуля

Уроки Figma

Уроки Веб Дизайна

Курс Figma

Курс По Фигме

Курс Фигма

Бесплатный Курс По Фигме

Бесплатный Курс Figma

Веб Дизайн Сайта

landing page

landing page figma

дизайн landing page

дизайн figma

figma

фигма

figma уроки

лендинг

лэндинг

фигма уроки

веб-дизайн

обучение figma

уроки figma

дизайн сайта в figma

дизайн лендинга

уроки фигма

как работать в figma

вебдизайн

webdesign

uxui

00:00:02

video about drawing a landing page in the

00:00:05

film program and today we will continue

00:00:07

drawing our design layout, let’s

00:00:10

remind you where we left off, we

00:00:11

drew this layout of the

00:00:13

first screen as well as a side menu

00:00:15

that will go with us along with the

00:00:19

scrub when we will scroll the page and

00:00:21

let's, in principle,

00:00:23

continue our rendering, we'll already do all the

00:00:27

other screens, so we're done on the

00:00:30

first screen, then let's say we

00:00:32

have information about the theater itself, we'll make a

00:00:36

text frame

00:00:38

about the theater

00:00:43

ready

00:00:46

as we have,

00:00:48

yes there should be blanks, we'll remove

00:00:52

the binding because we have it here everything will be

00:00:54

a little different, but naturally,

00:00:58

naturally, the white color everything

00:01:03

looks great, so give it to the standard

00:01:07

at 120, let’s move everything away so

00:01:12

we’ll compress

00:01:14

everything, we’re ready and now we’ll have

00:01:19

some information about our theater and

00:01:22

we’ll place it in text containers

00:01:25

and parallels let's make such a

00:01:26

complicated layout where there will be icons,

00:01:30

it's acceptable for this picture, it's just

00:01:33

important for us not just to make a text block

00:01:34

because it will be boring, but to somehow

00:01:37

diversify it with elements in order to

00:01:39

achieve some kind of more or less let's say a

00:01:41

variety of compositions or

00:01:44

something test, change the color, change everything

00:01:53

style 18 16 and naturally we

00:02:00

won’t have a bolt so we have a feast and 14 here

00:02:07

we untie 14 put 16 add style

00:02:12

new solution ready so I prepared here

00:02:19

would you like a small text so that we don’t

00:02:21

have to search for this whole

00:02:25

economy so here we have 100 of us are ready, in

00:02:29

principle, five columns will be

00:02:32

more or less

00:02:33

so we check the visual itself visual

00:02:37

how it looks all the contrasts are observed

00:02:39

visually irar het too, but probably

00:02:43

let’s make someone a subheading

00:02:45

that will, so to speak, foreshadow what the

00:02:48

sign information says here

00:02:50

because these are the main headings for us

00:02:53

it is necessary that simply when scrolling, we could

00:02:55

navigate through the site itself, what is

00:02:56

generally located here,

00:03:01

but this heading will be further on, we can

00:03:03

say to reveal the topic and organize

00:03:06

this particular text because there will be

00:03:08

needles here and there will be a picture here,

00:03:11

so we take it here like that and let’s say the

00:03:18

most the best theater in St. Petersburg

00:03:23

let it be like this let's do it like that 16 no

00:03:30

here you can already look from the navel by

00:03:32

style white

00:03:41

in principle not bad but to the full probably still

00:03:44

a little more the best

00:03:48

theater in St. Petersburg okay it will be so we will tighten it up it will be

00:03:58

equal to 50 for now we are doing this and that's

00:04:02

what I noticed

00:04:03

more precisely before I told you about it

00:04:05

that we have h1 and h2 that are

00:04:07

unequal in size, so

00:04:09

let’s make 10 a little smaller in size,

00:04:12

yes, now they are all visually from the

00:04:15

visual hierarchy, that’s who noticed it,

00:04:18

well done right away, because I’m

00:04:20

pretty scrupulous to this and

00:04:23

here I missed a little so out of us there

00:04:27

will be 80 kay, everything was sent three external

00:04:31

ones, everything is balanced by Stepan and

00:04:34

then here it will be like this if we take the

00:04:38

standard bottom of this

00:04:40

font so here we have everything ready and

00:04:45

let's make some information

00:04:56

a little a few numbers, well, let it be

00:04:59

highlighted like this, these are three columns,

00:05:02

let’s also have here we will have

00:05:07

the rectangle itself that will display

00:05:10

the image that is here, perhaps

00:05:12

some kind of content can be poured onto the

00:05:14

image of the theater itself, in principle

00:05:16

it will also look good, let’s check

00:05:19

everything looks great and then

00:05:22

let's do it, let's say children it will be

00:05:26

70 icons so access

00:05:30

as the text is all ready and here there

00:05:36

will be some decodings so stop stop stop

00:05:41

stop we didn't make a style

00:05:43

and so it turns out here we'll immediately

00:05:48

edit it here and apparently from the last

00:05:52

lesson I I didn’t catch the mood because

00:05:55

some of you see the marks of the 40th lesson,

00:05:57

it’s not observed because the video

00:05:58

is not recorded on the same day, so

00:06:02

everything is there, it turns out 14 and for us it will be

00:06:08

14 r everything is tied here and now we

00:06:11

need to tie 20 and 21 2

00:06:16

so

00:06:19

21 b everything is ready

00:06:27

so everything is here we are all here we

00:06:30

have done everything now so copy this text

00:06:34

that we want to purchase convert

00:06:36

you can create a new container in principle it does

00:06:38

n’t matter and what we have here

00:06:41

will be no caps than 1000

00:06:48

seats ready 3020 here we have

00:06:57

40 here we have There are 20 of us and between the my

00:07:00

boat icon there is an indentation of 30, we are all neat or 25

00:07:04

because the balancer will be respected

00:07:06

no it will not be visually it still

00:07:08

looks different so naturally we

00:07:10

need to correct it all and here we

00:07:14

will have 25 everything was, in principle, visually

00:07:20

visible that we here the indentation is less than

00:07:21

here, that's why everything is fine with us, but

00:07:24

now we need to

00:07:25

tighten up our text so as to align

00:07:28

it with, let's say, the largest width

00:07:32

in our block, and here we will have, let's say,

00:07:35

350 years of history, and so the

00:07:40

theater is very old in old not in the sense that it’s

00:07:44

dilapidated in the sense that it has great traditions,

00:07:47

so here we’ll group it here, too, in a

00:07:51

group, rename it, I don’t know if it’s worth

00:07:53

doing, because after all, this is a video

00:07:56

lesson, we’re not making some kind of ready-made layout,

00:07:57

in principle, it will be possible at the end, when

00:08:00

we comb everything, when you

00:08:01

design in principle, let's comb it all, that's what it

00:08:03

all looked beautiful for us,

00:08:05

so here we have everything ready, but

00:08:11

something is missing, something is missing

00:08:13

again, the composition, the diversity of the

00:08:15

point of view of the elements that are in it

00:08:17

from, as it were, everything is fine with us, but for us we need

00:08:21

someone else to diversify this, how can we

00:08:23

do it like this and

00:08:25

well, of course, of course, we are all

00:08:28

here and the stage changed shift and the prick is

00:08:30

used you have also different colors

00:08:32

that we can include, in particular

00:08:34

the accent one, let's select separately

00:08:39

this element tag and here this

00:08:44

element so that we can diversify it all a little,

00:08:49

now we have more or

00:08:51

less everything looking great, so

00:08:57

let’s group it all here again

00:08:59

and group it all

00:09:02

so ready now we need on from and the

00:09:06

next block that we need so

00:09:08

select copy paste everything here was

00:09:13

copied, let's go down 120 is

00:09:19

excellent and let's say the situation here will be

00:09:23

after delivery and our

00:09:29

productions here Perry

00:09:33

are repainting everything we have ready even

00:09:38

probably why don't we do

00:09:40

more than 120 150 so we'll see when

00:09:45

it looks up to 150 it looks airier

00:09:48

so our compositions are very discharged and

00:09:50

even here on the first screen we

00:09:52

need to observe everything here, let’s

00:09:54

make a hundred 1 2 and it will turn out that we are

00:09:58

also on the same page, everything is

00:10:01

now more or less discharged,

00:10:04

although here there is a little bit of

00:10:05

compression,

00:10:06

but since our icons will not

00:10:08

in the format of squares and in the format of some

00:10:11

format and in someone’s drawing and it won’t

00:10:14

look so cluttered won’t

00:10:15

look so cluttered so I

00:10:17

think this is not a special problem

00:10:19

which will serve which will be

00:10:22

obvious at the stage when we

00:10:24

draw all this ok

00:10:27

further ours staging and here we probably

00:10:30

need to stir up something like a slider

00:10:32

that we will build exactly

00:10:34

100 percent, but who knows whether it’s a

00:10:37

jazz slider or not, swipe with a

00:10:40

viper slider stick slider yes, I think

00:10:43

for those it will all be clear how it’s

00:10:45

all visual looks like divide by 4 1

00:10:50

connected made it a little darker so

00:10:57

let's see how it's not like we have everything

00:10:59

here neatly set up

00:11:01

now select it again and copy and

00:11:04

transfer to the other end

00:11:06

it all looks and it will probably

00:11:10

be very cool to mix it up with

00:11:13

some tightening effect when

00:11:16

hovering so that we have, let’s say,

00:11:18

these four cards that you can

00:11:21

look at, but at the same time, when we hovered

00:11:23

about it there was some information there,

00:11:25

let’s say when it was a production

00:11:28

there for whom and so on, it will also be

00:11:31

very cool, it will look cool,

00:11:33

just let’s do it let's have a little dinner

00:11:36

650 should be less oh I'm sorry

00:11:45

so a

00:11:47

little less no no 650 owe us and so

00:11:53

550 550 but in principle yes yes yes we

00:12:01

have a limitation here

00:12:03

restrictions that we had to travel

00:12:05

so we will squeeze this

00:12:08

whole economy a little bit ours like this like this

00:12:11

now everything looks

00:12:12

balanced and it won’t be

00:12:15

too horizontal, these cards

00:12:17

and they will look pretty good,

00:12:19

so here we will have

00:12:22

some information and let’s make

00:12:23

one card, the so-called active one,

00:12:26

so that it is clear that it is somehow

00:12:29

different others, but

00:12:31

naturally they are on the right and left

00:12:32

to diversify the text and this is

00:12:35

a little gray, it’s not semi-active,

00:12:37

it’s just to see how the

00:12:39

blocks are differentiated, so here we’ve done everything and now

00:12:42

let’s somehow draw a magnifying glass that

00:12:45

will show what we have going on

00:12:51

exactly

00:12:52

what we want for some detailed

00:12:54

information, hundred by hundred is not enough 125, of

00:13:00

course, you can use a

00:13:01

keyboard shortcut, but for some reason

00:13:03

now it’s easier for me to do everything with the mouse, okay, well, let’s

00:13:07

say no, let’s take 150 because

00:13:11

everything will be inside the icon, which

00:13:14

will give a predilection, as it were but specifically

00:13:17

to illustrate all this like this, and here we

00:13:22

will have the very tip darker, we can

00:13:26

make it even square, we’ll probably

00:13:32

delete it, but that’s not what we deleted, the square one,

00:13:35

so that it’s clear that

00:13:37

the icon here is not just a treasure, like you are all around in a

00:13:39

circle in a circle, so I’m sorry, I’m sorry

00:13:51

here ok here we are we've all finished like this and

00:13:56

now let's extend

00:13:58

our layout a little lower, although in principle

00:14:02

let's add

00:14:04

some headers here, in principle we'll make it

00:14:06

a little darker because the layout is

00:14:09

dark, so we'll make it a little darker,

00:14:12

but this one is dark, and we'll do this like

00:14:15

this the same color that we have, in

00:14:20

principle, visually for dinner, at this

00:14:21

point I could see how it

00:14:23

all looks, well, let’s let the

00:14:26

events happen there, let’s

00:14:29

take the Oscar ceremony Oscar 2020, let’s take some

00:14:36

18b,

00:14:38

no, small, let’s see what’s here 21b

00:14:42

21 looks good 60k the position

00:14:49

is elongated, so let's do a little 40 each,

00:14:58

let's try this, everything looks good in principle, you

00:15:02

can even make it a little

00:15:06

more, a little more is ready and let's

00:15:12

remove too strong here, there is no

00:15:18

intermediate style,

00:15:19

so let's just remove it, slightly

00:15:23

reduce the distance between these between the

00:15:25

characters and create a new style, this

00:15:29

should we will get from us it turns out that

00:15:33

we have as many as three h3 and so

00:15:39

this is 2024 b a c and now we also need

00:15:43

to stylize our h2

00:15:46

like this and we get it, it will be h2h 248

00:15:52

l

00:15:53

because we are not on the slide regular

00:15:55

we have light like this and in principle, you can

00:15:59

add a date somehow beautifully, in

00:16:01

principle, you can take a compass of women

00:16:03

compositions from our

00:16:05

vertical menu, let’s expand it and let’s say

00:16:08

here we will have the date September 2020, although

00:16:14

it hasn’t happened yet nothing the event itself,

00:16:16

but nothing we have here concept 18

00:16:23

let’s try

00:16:24

the distance should be the same, everything is

00:16:26

excellent and the outer 40 and here 40 so that

00:16:31

everything is balanced, everything is

00:16:34

fine, look at us, it would be cooler if

00:16:36

such a juicy picture it would be a little bit of the

00:16:38

Ravana building, it would also be in this

00:16:40

style, it would be tinted, and when

00:16:43

you hover it, it would be the opposite of us, the

00:16:44

lighter one to be observed with a magnifying glass, this

00:16:47

will be cool, I think it will look great when

00:16:48

we especially draw all of this, so

00:16:50

let's select, select,

00:16:53

select, group with a card

00:16:55

and just copy it all,

00:16:58

take 1 and world 2,

00:17:03

here we have everything perfectly fine,

00:17:07

look, we have excellent all

00:17:10

four cards such with

00:17:12

significant events so

00:17:13

that we have just a little bit

00:17:17

more realistic let's

00:17:18

write July 20 20 and let's say Emma 2020

00:17:25

there will be an evil golden calf

00:17:31

I don't know why there can be a golden

00:17:33

gramophone although for the big theater it's

00:17:36

a little bit like a nutcracker so let's diversify our

00:17:39

program so to speak and in in principle, you can

00:17:42

make it a little darker, so at

00:17:46

least the distinction was visual, everything is

00:17:48

ready,

00:17:49

and the most important thing is that I forgot, we

00:17:53

highlight it all and make it

00:17:56

white because that’s why we made

00:17:58

such dark contrasts to show

00:18:00

you that they will

00:18:01

look pretty cool, but the

00:18:03

picture itself will be tinted, that is, the

00:18:04

text the text can, in principle, also be

00:18:06

tinted and can be tinted, we’ll

00:18:08

see how everything will look

00:18:10

in the final rendering, so it’s ready now let’s

00:18:14

go to ours in our general layout and

00:18:18

let’s group it

00:18:21

here this is ours so here it turns out we have

00:18:24

1 2 we group this and we also have

00:18:28

a card

00:18:29

so they also group this among

00:18:32

themselves also group this same

00:18:34

grouping general everything is fine so

00:18:37

now we need to draw about the theater

00:18:41

our projects our productions here there will be

00:18:49

productions ourselves thought that to us this

00:18:54

minus must all be duplicated everything is

00:18:57

ready so everything is beautiful and now we have

00:19:02

partners partners

00:19:04

well we have aligned with the Russian language

00:19:11

partners theater partners so our

00:19:15

productions copy paste transfer

00:19:20

150 excellent so theater partners are

00:19:31

ready now I’ll check the juice our video

00:19:33

is being recorded here it is being recorded on us for

00:19:36

20 minutes and well, let's make this a

00:19:39

partner of the theater and we

00:19:41

'll meet directly in the next video so don't

00:19:45

get distracted so let's make partners of the theater that

00:19:48

we will have here you usually are our partners logo and

00:19:51

so let's make a logo checks

00:19:53

logo glasses we will be separated

00:19:56

by boats like this but now we won’t

00:20:00

prepare them because they will be

00:20:02

smaller than the rectangle itself, that’s why it

00:20:04

will naturally be in some kind of

00:20:07

indentation and from the top from the bottom because this is

00:20:09

where they will lay and will be located, and

00:20:11

we can at least select a container for it

00:20:13

like this here we will have a quarrel.

00:20:16

hundred, everything is fine,

00:20:20

they divided it up, they made it a little

00:20:23

darker, everything is ready here, so it turns out

00:20:32

here, it’s not very nice,

00:20:35

I’ll tell you, let’s

00:20:38

do it then, let’s move away here, it

00:20:42

turns out we have it here, we need to

00:20:46

get out at the junction,

00:20:51

so it’s here pixel by pixel

00:20:53

it just turns out well, okay, as they say, it’s possible

00:20:57

and by pixels

00:20:58

here the principle when laying out is just to love the

00:21:00

layout will be based on not not

00:21:03

percentages

00:21:04

but with the help of a ball, so now

00:21:06

we’re so bothered by this here, so a little

00:21:10

darker just by 1 pixel one

00:21:12

container we’ll have more of this it does

00:21:14

n’t have any effect at all, so let’s check here

00:21:18

everything is fine and let’s just

00:21:21

copy it down, repaint the containers

00:21:26

and these ones in a different color, so look at it,

00:21:30

check it like this and well, we need to do a little

00:21:35

downwards because we

00:21:38

will most likely have a horizontal

00:21:40

orientation and these are the distances

00:21:42

that will be between us Gotti was waiting for you

00:21:44

on the same level they will be obviously mia more

00:21:47

precisely they will be here less more precisely we

00:21:50

will be how to explain this we

00:21:52

will have here we will need to highlight

00:21:54

the window here more strongly so that our rows look like

00:21:56

balancing is the so-called

00:22:00

visual compensation just eggs with this

00:22:02

often I’m faced with this, so let’s

00:22:05

select at least 10 pixels here and then

00:22:07

at the moment of rendering I’ll show you how the

00:22:09

visual effect will be displayed

00:22:11

exactly when we insert all our

00:22:13

logo checks,

00:22:14

so now you can just take it on

00:22:16

faith that what we’re doing here is like this

00:22:18

grouping like this no grouping

00:22:21

bee one one line one roll now the

00:22:24

second roll

00:22:25

now all the lines and our common and

00:22:29

community block well, we also

00:22:31

group like this further we have that we have

00:22:34

partners theater on here and then there are

00:22:36

contacts contacts and the basement and we will

00:22:39

directly start drawing

00:22:42

in principle, this is the end of the second video,

00:22:46

put a like if you like

00:22:48

my idea, generally like the concept

00:22:50

approach itself, and so on, write in the comments

00:22:52

if you need to do more of these

00:22:55

practical skills because, again,

00:22:57

start from your interests, if you

00:23:00

are interested in me drawing more

00:23:02

top

00:23:03

we will do less theories, we will

00:23:05

draw more, in principle we are on the move, it’s not

00:23:06

difficult for me, it’s pretty cool,

00:23:08

again, I need to practice regularly and in

00:23:11

this way, so here I am, drawing

00:23:12

with the layout, I myself

00:23:15

am improving my skills,

00:23:16

so it’s beneficial for you because you are

00:23:19

watching and you will learn something new, and for me,

00:23:21

because I also work out everything in

00:23:24

practice, that’s why everything

00:23:27

works out great and

00:23:29

mutually beneficial for us, so subscribe to the

00:23:32

channel if you are not subscribed, ring

00:23:34

the bell if you want to

00:23:36

immediately receive videos

00:23:37

in the EU and implement it what did you learn from the

00:23:40

data from these videos and basically that’s

00:23:44

all for today thank you all for your attention have a

00:23:47

nice day and productive work bye

Description:

👉🏻Индивидуальное обучение веб-дизайну - https://ux-ui.courses/ Меня зовут Денис, и на этом канале: — Мастер-классы по Figma — Обзоры реальных проектов — Теория по веб-дизайну Итак, это второе видео из свежей серии. Сегодня мы поговорим о классных сайтах, которые можно брать в референсы и пробовать перерисовывать в программе Figma. Тайм-коды: 0:00 - Блок "О театре" 9:05 - Блок "Наши постановки" 19:00 - Блок "Партнеры театра" ✅ Подписывайтесь на канал: / @DenisTimoshitskiy Подписывайтесь на меня в соц. сетях: 📲 Telegram https://t.me/figma_info - новости веб-дизайна и обзоры проектов 📸 VK https://vk.com/d_e_n_info - полезные статьи и задания по веб-дизайну

Preparing download options

Popular

HD video

Only sound

All

* — If the video is playing in a new tab, go to it, then right-click on the video and select "Save video as..."

** — Link intended for online playback in specialized players

Questions about downloading video

How can I download "Дизайн Landing Page в Figma Часть №2" video?

http://unidownloader.com/ website is the best way to download a video or a separate audio track if you want to do without installing programs and extensions.
The UDL Helper extension is a convenient button that is seamlessly integrated into YouTube, Instagram and OK.ru sites for fast content download.
UDL Client program (for Windows) is the most powerful solution that supports more than 900 websites, social networks and video hosting sites, as well as any video quality that is available in the source.
UDL Lite is a really convenient way to access a website from your mobile device. With its help, you can easily download videos directly to your smartphone.

Which format of "Дизайн Landing Page в Figma Часть №2" video should I choose?

The best quality formats are FullHD (1080p), 2K (1440p), 4K (2160p) and 8K (4320p). The higher the resolution of your screen, the higher the video quality should be. However, there are other factors to consider: download speed, amount of free space, and device performance during playback.

Why does my computer freeze when loading a "Дизайн Landing Page в Figma Часть №2" video?

The browser/computer should not freeze completely! If this happens, please report it with a link to the video. Sometimes videos cannot be downloaded directly in a suitable format, so we have added the ability to convert the file to the desired format. In some cases, this process may actively use computer resources.

How can I download "Дизайн Landing Page в Figma Часть №2" video to my phone?

You can download a video to your smartphone using the website or the PWA application UDL Lite. It is also possible to send a download link via QR code using the UDL Helper extension.

How can I download an audio track (music) to MP3 "Дизайн Landing Page в Figma Часть №2"?

The most convenient way is to use the UDL Client program, which supports converting video to MP3 format. In some cases, MP3 can also be downloaded through the UDL Helper extension.

How can I save a frame from a video "Дизайн Landing Page в Figma Часть №2"?

This feature is available in the UDL Helper extension. Make sure that "Show the video snapshot button" is checked in the settings. A camera icon should appear in the lower right corner of the player to the left of the "Settings" icon. When you click on it, the current frame from the video will be saved to your computer in JPEG format.

What's the price of all this stuff?

It costs nothing. Our services are absolutely free for all users. There are no PRO subscriptions, no restrictions on the number or maximum length of downloaded videos.