Основы веб-дизайна с нуля. Урок #1. Практика в Figma для начинающих.

5 ключевых составляющих для начинающих веб-дизайнеров, которые формируют стильный дизайн сайтов. Практика в Figma и создание нашего первого макета. Всем этим мы и займемся в этом уроке, дружище! 👇
💻 Мой бесплатный курс по основам веб-дизайна с проверкой ДЗ:
bit.ly/34VeFFg
🖌️ Макет в Фигме: www.figma.com/file/4hJLxPiyUd...
0:00 Что сегодня будет
0:21 Андрей читает рэп 😲
2:13 Знакомство и обзор Figma
17:15 Правило «шампура»
18:44 Типографика
20:05 Главная ошибка начинающих
21:42 Сочетаемость цветов
24:25 Где скачивать векторные иконки
31:04 Магия с собачкой
35:01 Вертикальный ритм и карточки
38:02 Плюем на модульную сетку
41:08 Работа с графикой и фото
45:40 Самая страшная ошибка
Участвуй в конкурсе в конце выпуска 👍
🌃🎓🌙 «Вечерняя школа» - это регулярное шоу для тех, кто хочет освоить дизайн и разработку сайтов. Весело. Нескучно. Чтобы вот прямо захватывало. Идеально смотреть после работы или во время работы, если она надоела и ты хочешь выйти на фриланс.
😉 Андрей Гаврилов - мое имя. Делаю сайты 10 лет. А еще, создал образовательный онлайн-проект WAYUP и здесь же преподаю. Путешествую по всему миру и веду блог:
/ andrew.gavrilov
🎁 Используй промо-код NIGHTSCHOOL при оплате любого моего коучинга на WAYUP и получи скидку -30%:
bit.ly/2B0RLzT
Не забудь 👍 лайкнуть это видео, чтобы не забыть лайкнуть его!

[@user-ny7wi2ku7h]

Это сколько нужно прочитать книг и работать, чтобы так грамотно владеть всей информацией и уметь доносить ее. Практика шикарно описана, но я вижу так же большой опыт и талант. Браво!👏👏👏

[@sskd932]

Абсолютно согласен с вами 👍🏼👍🏼

[@user-kz5xp2kz1n]

@@Black_1390 А что в этом видеоуроке тебе не понравилось?

[@anessa1314]

@@Black_1390,ты даже так не можешь

[@anessa1314]

@@Black_1390,ну-ну. По тебе не скажешь

[@Islam_Temirsultanov]

@@Black_1390 а можно твои работы посмотреть ?

[@wayupua]

Как тебе новый формат? Будешь ходить на уроки "Вечерней школы" дизайна и верстки?)

[@abulkhaiyraldungarov109]

Конечно. Йоу)

[@user-wl7ss9qo8o]

Формат отличный! Да

[@user-hl7og1pg4m]

Я видел много веб-дизайнеров на ютубе,но ты лучший🔥 P.S. Выполнил все условия ещё до того, как узнал о конкурсе😄

[@Artem-cb1lo]

Хоть и имеется некий опыт в веб-дизайне и в работе с фигмой, но ты все равно открыл мне глаза на некоторые моменты. Формат пушечный! продолжай в том же духе

[@dzhaniev6545]

Да

[@user-md5zk2fr5d]

Редко когда попадаются люди, способные хорошо доносить инфу , приятно слушать, без слов паразитов , красава , что я могу сказать, буду смотреть ))

[@NoName13454]

Когда увидела 45 мин урока ужаснулась, подумала гляну первые 10 мин и если нудяк выключу. В итоге так затянул урок, что от начала до конца смотрела с широко открытыми глазами. Очень круто, доступно, просто шикарно и все понятно. Не смогла не оставить коммент после такой огромной проделанной работы, браво! Огромное спасибо, впервые встречаю такой подход к обучению, однозначно лайк и подписка.

[@titan4ik179]

Ну он веб дизайнер, это его часть работы :D

[@user-gx7zg8wt7h]

Это единственный бесплатный урок, который я досмотрела до конца и хочу скорее повторить)

[@armi9108]

я тоже не заметила как ушла время просмотра

[@Stopycheva_anastasia]

Тоже самое)

[@anastasiabulavskaya5930]

ОГРОМНОЕ СПАСИБО!!! Это первая моя тренировка в фигме и такое чувство, будто я окончила целый курс! Самое крутое практическое занятие в моей жизни! 👍👍👍👍👍

[@Kai_reproduced9]

как успехи?

[@Lelya124]

Это, не первый мой урок, но такой понятной и интересной подачи материала я не видела. Даже платные материалы не настолько полезны. Огромное спасибо

[@user-qz1ym7jt4p]

Скажу честно с первых секунд стало интересно слушать. Кратко, но в тоже время информативно, понятно, приятно слушать и смотреть! Вы молодец!

[@mirabukhizr]

"Лучший из людей, тот, кто делится своими знаниями с другими" - Оставайтесь всегда хорошим человеком:)

[@mbait2669]

Хотелось бы увидеть процесс создания полноценного дизайна сайта.Спасибо за видео

[@user-dk2ke6my9i]

и что там интересного то? Он обрисует ту картину которую он видит у себя в голове, даже если ты пересмотришь таких видео штук 500 ты всё равно будешь делать макеты такого плана какое воображение у тебя в голове.)

[@plusshhh]

я думала что веб-дизайнер это сложно, но после этого шикарного видео, стало все понятно, и оказывается довольно не особо и сложно, спасибо за такое прекрасное видео

[@MAARIAMMM]

Я очень довольна, что выбрала именно ваш урок как первый для обучения😍 спасибо!

[@user-gl3hk3jg4e]

Меня не перестает поражать, как ты умудряешься в таком коротком видео рассказать так много полезной информации! Спасибо за очередной урок. Коучинг закончился, а уроки и домашки нет, и это здорово!

[@Iuliia_Pan]

Андрей, вы просто невероятный человек. Спасибо вам за такой классный урок. Никогда не думала, что буду способна с нуля сделать главную страницу.

[@user-mh9qu5fk6y]

Андрей, благодарю! Ооооочень информативно, понятно и просто! За один урок поняла все и повторила, а купленные курсы не заходили вообще до этого!! Твоя подача информации просто бесподобна!

[@tezer_brich]

Спустя 2года после выхода этого видео, это по-прежнему лучшее видео про графический дизайн. 🎉😊

[@user-im7yb5hw4t]

Знакома уже немного с Figma и этот урок прям то, что надо, закрепила старые знания и дополнила новыми, уже жду следующий выпуск)) Спасибо!

[@user-mm2yu8nh6v]

Очень здорово, что после прохождения бесплатных курсов и интенсива, можно найти что-то новое для себя в новом подкасте! Спасибо вам большое за такую работу🙏🏻

[@user-ig9dn3vz2g]

Спасибо большое за ваше видео, всё объясняете просто и доходчиво, чувствуется уровень картинки, звука и монтажа. Решил заняться веб-дизайном, но до вашего видео ни разу не занимался практикой на таком уровне как у вас. Буду дальше учится по вашим видео. Ещё раз спасибо)))

[@nicktrofimov5857]

Отличный урок! Можно реально использовать в работе, просматривая не один раз. Да, автор по настоящему учит, а не просто рассказывает о предмете. Постараюсь посмотреть все уроки и попробовать работать с этим инструментом.

[@user-ve1vv7pt6c]

Как всегда: кратко, по делу и доходчиво и без лишней воды. Так держать!!! Жду следующих уроков. Спасибо за информацию.

[@OlesayVlad22]

дурак ты он не объяснил как векорами управлять нормально догадйся сам называется

[@user-pi8lm1gt9g]

@@OlesayVlad22 искала этот коммент, я тыкалась тыкалась в итоге не нашла и не смогла сделать

[@imitistplay7097]

Вот было бы здорово если потом выйдет такая же рубрика, где Андрей верстает эти сайты

[@Mellstroy_give_me_money0]

imitist play да я бы посмотрел

[@user-pe3uw7ws6i]

Дааа Андрей!Спасибо за хорошо преподнесенный урок! Конечно когда еще плохо разбираешься, очень трудно уследить за Вашими передвижениями по экрану.У Вас настоящий талант,умница! Буду смотреть все Ваши уроки,может чему и научусь,хотя бы приблизительно.

[@user-st7ro4ut9j]

Очень круто.Несколько дней назад только думала об этом а сейчас понимаю,что надо обучаться)Автор доступно объясняет и тем самым заинтересовывает🤗😜

[@yuliyavlasenko4794]

Училась у Андрея 2 года назад, но все равно каждый раз с особым наслаждением смотрю новые видео, чтобы почерпнуть интересные идеи для себя. Все доходчиво, информативно и ничего лишнего. Жду следующих уроков :)

[@danikbr3187]

Очень круто,если будут такие уроки!) Спасибо большое!)

[@user-js1nw6qd5j]

Отличный урок. Никакой воды, все без размазывания, мычания, все динамично, с юмором, и максимально понятно. Редко встретишь в учебных материалах столь интересную и содержательную подачу. В общем- здОрово!

[@user-js1nw6qd5j]

@Double Language Channel Animation В Украине ВК не работает.

[@igorvorontsov5958]

Спасибо за видео! Кстати фрилансеры, я облегчил себе жизнь. Сделал себе сайт, установил там платежки в рублях и в крипте, через криптомус. Надеюсь кому то помог, потому что месяц назад вообще не понимал, как принимать оплаты от клиентов из - за границы.

[@user-xf7fz3ck4r]

Андрей, это просто супер! Высший уровень! Подача материала, монтаж-все на высоте!!! Как и всегда! Спасибо!

[@antonmaklakov]

Блин, этож сколько подходящей музыки надо было находить по вайбу 40 минутного ролика)

[@anastasiiapr8206]

я ее и не слышала))

[@user-fr4ns8iz1x]

Крутейшее занятие, очень много ценной и практичной информации. Расхлебывал целый день по кусочкам, но это того стоило. Благодарю!

[@dobrayk8663]

Мне очень понравилась что он расставил метки на видео,не надо искать что-либо если забыл сразу видно что где. Обязательно сделаю домашнее задание завтра и вечером посмотрю второй урок. Спасибо за уроки)

[@funny_pets-catsdogs]

Андрей, это крутезно!!! Спасибо, что так много делаешь для новичков!!! И тем более - это очень захватывающе у тебя получается!!! СПАСИБО!!!

[@navadeha]

В первые такое, что бы я посмотрел долгий ролик около 40 минут, без перемотки и 2х. Очень приятно доносится информация. Спасибо за ролик

[@bismuthelement5174]

Просто ВАУ, так интересно и подробно, а главное с практикой! Я довольна тем, что у меня получилось сделать с твоими направлениями!

[@AlenaRuz]

Блин, это очень круто! Монтаж зацепил, а голос то какой! И все по теме, никакой воды! Очень интересно, спасибо! ❤️

[@ankaaknaa]

ЭТО АХРИНЕННО! прохожу сейчас веб дизайнер взрывной старт и в восторге, так ещё больше информации даёте! Бесплатно! В такой подаче! ОГРОМНОЕ СПАСИБО, АНДРЕЙ

[@user-eo5ig9ws7k]

Спасибо за видео! Информативно, понятно, обоснованно. Приятно смотреть!

[@arzamas1826]

Спасибо за внятный вводный курс для новичков. Долго искал, что-то похожее, что бы быстро сделать первый прототип в Figma. Понравился ваш подход и манера подачи. Успехов!

[@danatapodorska-mirska4697]

Потрясно! Без воды, всё четко, понятно, интересно! Очень круто!

[@user-wo5sx5ed6r]

Вооу, и Дизайн и Монтаж и музыка на заднем фоне это так приятно смотреть, у меня появилась еще больше мотиваций что бы трудиться и саморазвиваться. Спасибо тебе Андрей за такие полезные ролики. Уважуха!

[@user-hp7xo3fn2f]

Андрей, монтаж очень круто сделан! Прям видно, что ответственно подходил к этой стороне урока. Видно, что в целом качество съемки улучшилось, класс!

[@elenaprokofieva]

Какой молодец! Это не первое видео, которое я нашла по данной теме, но - одно из лучших. СПАСИБО!

[@maxmedvedevv1]

Андрей, большое спасибо за данный обучающий контент! Бодро, позитивно, легко, энергично, гармонично - это то, как могу описать просмотренный ролик с потрясающей энергией легкости от автора! Благодарю!!!

[@SDAM20240GE]

Я никогда в жизни, не оставлял комментарии под роликами, но тут. Это лучшее, что я видел когда либо)

[@krakhmalev_vlad]

Спасибо за очень подробное обучение. Хотелось бы увидеть, как ты делаешь дизайн сайта целиком, все элементы, а не только 1-ый экран. Уже с нетерпением жду следующий урок)))

[@miomixxxxxxx3763]

спасибо большое за прекрасный урок!это был мой первый дизайн,хотя имею и платные курсы) но как для меня они очень долгие.тут все понятно, детально ,просто и красиво)да и человек прекрасный атмосферу задаёт!!и понятность придает наличие практической работы(я делала все параллельно с вами,получилось очень красиво!!)😌

[@vlad_sapronov]

Это просто восхитительно, ещё и бесплатно. Ты молодец с большой буквы

[@Lia-pz9sn]

Спасибо за такое понятное объяснение! Отдельная благодарность за то, что автор озвучивает горячие клавиши и даже повторяет несколько раз для закрепления их. Без таких людей, как вы, было бы в сотню раз сложней разобраться: что/ как/ и куда.

[@wekuchi]

Насколько балансировонный И ламповый урок. Спасибо большое за ваш труд. и

[@bauyrzhanmustafa4334]

Люблю этот канал за то, что во время уроком не отвлекаешься не на что. Так как Андрей объясняет очень интересно

[@semen1368]

Боже как прекрасно я вас нашла и кстати я записалась на курс 15 декабря.Спасибо ваМ ЗА ТО ЧТО ВЫ ЕСТЬ!!!

[@user-mu7bb3jb2f]

Андрей! Дизайн СУПЕР!!! Мне очень понравился, особенно, когда оформляли фото собачку с котиком. А вообще преподнесена информация очень доходчиво и как сейчас говорят "без лишней воды". Не пропущу ни единого урока!

[@user-oo9sr3bs1j]

Вообще норм! Без "воды" максимально понятно, быстро. Спасибо.

[@WillyWonkaStyle]

Столько деталей всего за сорок пять минут. Просто невероятно круто, спасибо за контент!

[@annakomissarova6668]

Вау. Это действительно один из лучших уроков, которые я видела. Ещё ничего не сделала, а уже чувствую себя профессионалом в этом деле ❤

[@user-eo4dz1cq5l]

Огромное Вам спасибо! Вы прекрасно разбираетесь в своем деле и очень детально поясняете все необходимые моменты. Очень благодарна Вам за Ваше время и Ваше творчество))) Будем ждать следующих видео.

[@LangoVeronika]

Андрей, спасибо тебе большое. Это самое понятное видео про Фигму, что есть в Ютубе. Я подписалась на тебя. Мне уже нравится твоя школа :)

[@anastasiasikachinskaia5771]

Спасибо за урок. Круто что рассказываешь про нюансы и детали+теория и сразу практическое применение.

[@user-ge1zk5ez2f]

Спасибо Вам огромное преогромное! Это так профессионально, живо и интересно 🌹 Занимаюсь дальше.

[@user-tc6gf3bz5m]

Почему-то стало жалко собачку, после слов что, ее можно удалить. 😄 Отличная подача материала! Браво! Спасибо большое!

[@Stopycheva_anastasia]

😅

[@lpmusoka]

Такие информации! Благодарю за такие труд и урок! И все это бесплатно. Спасибо!

[@ma1abakiev]

КАКОЕ ЖЕ ШЕДЕВРАЛЬНОЕ ВИДЕО ПОЛУЧИЛОСЬ! Как всё грамотно и чётко объяснили и показали! Такие видео редкость. Побольше бы людей умели бы так объяснять, и всё было бы понятно

[@samirmammadzada8850]

Андрей, Спасибо большое за ваш труд. Вы хороший учитель. Вас интересно слушать!

[@pechenushka_schastiay]

Какой крутой урок🔥🔥🔥 Спасибо большое!!)) Жду продолжения, буду пока пробовать делать сама, по этому уроку!)))

[@hamflashroki]

- Сколько тебе лет? - Что-то между 14 и 40

[@cutecats8037]

13 🌚

[@dimabizz1678]

@@cutecats8037 хех мне тож, тоже хочешь подумать о будущем прямо сейчас а не пока поздно?

[@cutecats8037]

@@dimabizz1678 Да

[@usweet810]

@@cutecats8037 понимаю..

[@ph1l74]

Прекрасный урок. Спасибо. Без лишних слов, все только по делу. Очень помогло.

[@AnitSirkV]

Я в восторге! На сколько интересно, поучительно, по-делу, без воды, подача ОГОНЬ! Я делала всё за вами, и у меня получилось! Только открыла для себя фигму, и думаю с вами, у меня всё получится!

[@hadijattemersultanova9276]

А как свернуть панель с слоями ? Cotrl+shift+} не работает.

[@user-tk2qj4pu2k]

Вы прекрасный учитель! Материал излагает я очень легко, понятно и доступно. Благодарю Вас! 🙏🌼🌸🌷🌺🌻

[@arailymtalgatkyzy9258]

Все ставила лайк, подписалась, очень понравился ваш урок, смотрела так буд-то смотрю сюжетный сериал: 46 минут не заметно пролетел как 6 минут, и похлопала везде говоря Ваааау!!! Это было потресающе просто огонь спасибо автор

[@ufo_sound]

Отличный урок, во время которого, познакомился с Figma. Захотелось изучать и работать дальше с этим инструментом. Выражаю огромную благодарность автору урока, за вдохновения и наставления, на путь верный ;) Буду продолжать развиваться с вами.

[@videoleaks]

На редкость токовый урок с правильной подачей материала в процессе реальной работы над дизайном. Браво! 👏

[@MaxLyashenko]

Спасибо за классный урок, и отдельно отмечу крутую музыку на фоне)) Приятно смотреть и слушать)

[@andromeda_vesna]

Вот ИМЕННО ЭТО!!! ИМЕННО ТАК!!! Должны обьяснять в ВУЗ и колледжах на курсах!

[@th61n]

Кайф. Такие уроки вдохновляют стать кем-то. Спасибо. Хочется сказать, что у вас талант, но понимаю, что одного таланта мало для такого. Вы большой молодец. Желаю успехов и не удариться о потолок.

[@ironfeather9652]

Вы очень талантливый учитель! Говорите быстро, но ни одного лишнего слова!! Многие преподаватели вузов могли бы у вас поучиться :))

[@tuya358]

😍 как же здорово вы объясняете это талант

[@polinaershova699]

За это видео узнала больше, чем на платном курсе. Спасибо большое 💜

[@user-jg2ze4fk5s]

Всё понятно и доходчиво) Спасибо большое. Буду ждать следующие уроки 👍🏻

[@user-to7sv4qw5p]

Я вообще была ноль .... но сегодня я поняла, положен хороший, качественный старт в моём развитии!)) Спасибо за очень доступный для новичка видео-урок!!!

[@meilondg7862]

Я под впечатлением, как можно, так лаконично и доступно всё объяснить человеку, который никогда таким не интересовался!? Я все еще не знаю зачем я смотрю это, но желание заниматься веб-дизайном меня теперь отсюда не выпускает. Благодарю за видео, как же всё гармонично!

[@aijan99alymkulovna87]

Спасибо большое за информацию! Фигма стало мне очень интересным 👍😍. Будем теперь стараться сделать как вы. Ждём ещё новых дизайн. Вам желаю успехов в работе.

[@dioxvideo]

Спасибо за видео, очень полезно! Даже не представлял, что фигма на столько удобней фотошопа!

[@gulnara1231]

Просто потрясающе! На каждом этапе я думала «ну все уже классно!» но ты снова и снова делал мэджик

[@MrBurenich]

Ой как же ты хорош, зачитал да ещё и материал годный и все доступно понятно. Молодцом 🙏

[@i.am.emilia]

Спасибо за такой прекрасный туториал!! так долго искала годное видео, а тут и картинка приятная, и все коротко и по делу простым языком!!! просто топ

[@romanbasovich9660]

Спасибо за видео, буду ждать следующего видео по этой теме!

[@user-zp1kp5bn7h]

Спасибо за урок! Не знала про маску в Figma.

[@yavz2011]

Огромное спасибо! Быстро, максимально информативно, без пустых слов!

[@karlarobbins9962]

Очень здорово и все в деталях обьясняешь!!! Можно просто смотреть и делать свое попутно.!!!! Спасибо 😊

[@laveinsky]

*Вижу ролик от Андрея, ставлю сразу лайк 😎*

[@wayupua]

Ставлю и тебе лайк, когда ты ставишь лайк)

[@evar4205]

Тож самое. Я человек простой

[@parannoia_dead]

Все в принципе объяснено по полочкам. Сложность заключается в том, что сложно новичку запомнить основные функции фигмы, и работы с ней на первых этапах.

[@user-pd3hj7tw2q]

английский надо учить((((

[@hybocat9005]

Ну тут вообще не соглашусь. Фигма так хорошо оптимизированна что я за 2 дня полностью в большинстве основных элементов разобрался и запомнил видимо до конца жизни

[@TatiValeri]

Ещё бы разобраться что такое фигма😉

[@allyoinna]

@@hybocat9005 это точно. Главное, не бояться нажимать на всё подряд. Думаю, к концу недели освою.

[@marynaarvachova4768]

Благодарю Андрей! Сразу видно что Вы талантливый и опытный специалист!!

[@sofiashuvalova1471]

Спасибо вам за ваш труд и креативность. В этом уроке вам действительно удалось охватить всё то, что нужно для начинающих 👍

[@lurrfy]

Куда еще лучше Андрей?! Это прекрасно)

[@user-ku5et4dp3p]

Очень понравилось ,прекрасный урок, вы супер , все понятно и грамотно, спасибо за ваш труд.

[@user-rj6jq1ig1l]

Лучшее видео для начинающих. Спасибо за подачу материала! Приятно смотреть и слушать.

[@mirainy7628]

очень хороший урок. не первый раз смотрю подобное, могу сказать, что это однозначно лучшее видео по данной теме! все быстро, понятно, четко. обычно на создание макета у меня уходило +-4 часа, сейчас справилась за 1,5😶‍🌫

[@mrlimbo5059]

Годные уроки, давно смотрю респект хотелось бы побольше времени уделить о Figma а так всё круто👍👌🔥

[@dashka525]

У вас потрясающая грамотная речь! Слушать и смотреть одно удовольствие!