Основы веб-дизайна с нуля. Урок #1. Практика в Figma для начинающих.
5 ключевых составляющих для начинающих веб-дизайнеров, которые формируют стильный дизайн сайтов. Практика в Figma и создание нашего первого макета. Всем этим мы и займемся в этом уроке, дружище! 👇
💻 Мой бесплатный курс по основам веб-дизайна с проверкой ДЗ:
bit.ly/34VeFFg
🖌️ Макет в Фигме: bit.ly/4bOi48J
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
Не забудь 👍 лайкнуть это видео, чтобы не забыть лайкнуть его!
Пікірлер: 2 200
Это сколько нужно прочитать книг и работать, чтобы так грамотно владеть всей информацией и уметь доносить ее. Практика шикарно описана, но я вижу так же большой опыт и талант. Браво!👏👏👏
@sskd932
2 жыл бұрын
Абсолютно согласен с вами 👍🏼👍🏼
@user-kz5xp2kz1n
2 жыл бұрын
@@Black_1390 А что в этом видеоуроке тебе не понравилось?
@anessa1314
2 жыл бұрын
@@Black_1390,ты даже так не можешь
@anessa1314
2 жыл бұрын
@@Black_1390,ну-ну. По тебе не скажешь
@Islam_Temirsultanov
2 жыл бұрын
@@Black_1390 а можно твои работы посмотреть ?
Как тебе новый формат? Будешь ходить на уроки "Вечерней школы" дизайна и верстки?)
@abulkhaiyraldungarov109
4 жыл бұрын
Конечно. Йоу)
@user-wl7ss9qo8o
4 жыл бұрын
Формат отличный! Да
@user-hl7og1pg4m
4 жыл бұрын
Я видел много веб-дизайнеров на ютубе,но ты лучший🔥 P.S. Выполнил все условия ещё до того, как узнал о конкурсе😄
@Artem-cb1lo
4 жыл бұрын
Хоть и имеется некий опыт в веб-дизайне и в работе с фигмой, но ты все равно открыл мне глаза на некоторые моменты. Формат пушечный! продолжай в том же духе
@dzhaniev6545
4 жыл бұрын
Да
Когда увидела 45 мин урока ужаснулась, подумала гляну первые 10 мин и если нудяк выключу. В итоге так затянул урок, что от начала до конца смотрела с широко открытыми глазами. Очень круто, доступно, просто шикарно и все понятно. Не смогла не оставить коммент после такой огромной проделанной работы, браво! Огромное спасибо, впервые встречаю такой подход к обучению, однозначно лайк и подписка.
@titan4ik179
7 ай бұрын
Ну он веб дизайнер, это его часть работы :D
Это единственный бесплатный урок, который я досмотрела до конца и хочу скорее повторить)
@armi9108
Жыл бұрын
я тоже не заметила как ушла время просмотра
@Stopycheva_anastasia
Жыл бұрын
Тоже самое)
Редко когда попадаются люди, способные хорошо доносить инфу , приятно слушать, без слов паразитов , красава , что я могу сказать, буду смотреть ))
ОГРОМНОЕ СПАСИБО!!! Это первая моя тренировка в фигме и такое чувство, будто я окончила целый курс! Самое крутое практическое занятие в моей жизни! 👍👍👍👍👍
@Kai_reproduced9
9 ай бұрын
как успехи?
Спасибо за видео! Кстати фрилансеры, я облегчил себе жизнь. Сделал себе сайт, установил там платежки в рублях и в крипте, через криптомус. Надеюсь кому то помог, потому что месяц назад вообще не понимал, как принимать оплаты от клиентов из - за границы.
Это, не первый мой урок, но такой понятной и интересной подачи материала я не видела. Даже платные материалы не настолько полезны. Огромное спасибо
"Лучший из людей, тот, кто делится своими знаниями с другими" - Оставайтесь всегда хорошим человеком:)
Отличный урок. Никакой воды, все без размазывания, мычания, все динамично, с юмором, и максимально понятно. Редко встретишь в учебных материалах столь интересную и содержательную подачу. В общем- здОрово!
@user-js1nw6qd5j
3 жыл бұрын
@Double Language Channel Animation В Украине ВК не работает.
я думала что веб-дизайнер это сложно, но после этого шикарного видео, стало все понятно, и оказывается довольно не особо и сложно, спасибо за такое прекрасное видео
Скажу честно с первых секунд стало интересно слушать. Кратко, но в тоже время информативно, понятно, приятно слушать и смотреть! Вы молодец!
Блин, этож сколько подходящей музыки надо было находить по вайбу 40 минутного ролика)
@anastasiiapr8206
3 жыл бұрын
я ее и не слышала))
Спустя 2года после выхода этого видео, это по-прежнему лучшее видео про графический дизайн. 🎉😊
Почему-то стало жалко собачку, после слов что, ее можно удалить. 😄 Отличная подача материала! Браво! Спасибо большое!
@Stopycheva_anastasia
Жыл бұрын
😅
Я под впечатлением, как можно, так лаконично и доступно всё объяснить человеку, который никогда таким не интересовался!? Я все еще не знаю зачем я смотрю это, но желание заниматься веб-дизайном меня теперь отсюда не выпускает. Благодарю за видео, как же всё гармонично!
В первые такое, что бы я посмотрел долгий ролик около 40 минут, без перемотки и 2х. Очень приятно доносится информация. Спасибо за ролик
Я очень довольна, что выбрала именно ваш урок как первый для обучения😍 спасибо!
Отличный урок! Можно реально использовать в работе, просматривая не один раз. Да, автор по настоящему учит, а не просто рассказывает о предмете. Постараюсь посмотреть все уроки и попробовать работать с этим инструментом.
Я в восторге! На сколько интересно, поучительно, по-делу, без воды, подача ОГОНЬ! Я делала всё за вами, и у меня получилось! Только открыла для себя фигму, и думаю с вами, у меня всё получится!
@hadijattemersultanova9276
Жыл бұрын
А как свернуть панель с слоями ? Cotrl+shift+} не работает.
Вот было бы здорово если потом выйдет такая же рубрика, где Андрей верстает эти сайты
@Mellstroy_give_me_money0
4 жыл бұрын
imitist play да я бы посмотрел
Меня не перестает поражать, как ты умудряешься в таком коротком видео рассказать так много полезной информации! Спасибо за очередной урок. Коучинг закончился, а уроки и домашки нет, и это здорово!
Мне очень понравилась что он расставил метки на видео,не надо искать что-либо если забыл сразу видно что где. Обязательно сделаю домашнее задание завтра и вечером посмотрю второй урок. Спасибо за уроки)
Первый раз не добавляла скорость к видео. Наоборот - местами пересматривала. Минимум воды, максимум информации. Автору респект!
Андрей, вы просто невероятный человек. Спасибо вам за такой классный урок. Никогда не думала, что буду способна с нуля сделать главную страницу.
ЭТО АХРИНЕННО! прохожу сейчас веб дизайнер взрывной старт и в восторге, так ещё больше информации даёте! Бесплатно! В такой подаче! ОГРОМНОЕ СПАСИБО, АНДРЕЙ
Я вообще была ноль .... но сегодня я поняла, положен хороший, качественный старт в моём развитии!)) Спасибо за очень доступный для новичка видео-урок!!!
Андрей, благодарю! Ооооочень информативно, понятно и просто! За один урок поняла все и повторила, а купленные курсы не заходили вообще до этого!! Твоя подача информации просто бесподобна!
Знакома уже немного с Figma и этот урок прям то, что надо, закрепила старые знания и дополнила новыми, уже жду следующий выпуск)) Спасибо!
Очень здорово, что после прохождения бесплатных курсов и интенсива, можно найти что-то новое для себя в новом подкасте! Спасибо вам большое за такую работу🙏🏻
Дааа Андрей!Спасибо за хорошо преподнесенный урок! Конечно когда еще плохо разбираешься, очень трудно уследить за Вашими передвижениями по экрану.У Вас настоящий талант,умница! Буду смотреть все Ваши уроки,может чему и научусь,хотя бы приблизительно.
Спасибо большое за ваше видео, всё объясняете просто и доходчиво, чувствуется уровень картинки, звука и монтажа. Решил заняться веб-дизайном, но до вашего видео ни разу не занимался практикой на таком уровне как у вас. Буду дальше учится по вашим видео. Ещё раз спасибо)))
Как всегда: кратко, по делу и доходчиво и без лишней воды. Так держать!!! Жду следующих уроков. Спасибо за информацию.
@OlesayVlad22
3 жыл бұрын
дурак ты он не объяснил как векорами управлять нормально догадйся сам называется
@user-pi8lm1gt9g
2 жыл бұрын
@@OlesayVlad22 искала этот коммент, я тыкалась тыкалась в итоге не нашла и не смогла сделать
Училась у Андрея 2 года назад, но все равно каждый раз с особым наслаждением смотрю новые видео, чтобы почерпнуть интересные идеи для себя. Все доходчиво, информативно и ничего лишнего. Жду следующих уроков :)
Насколько балансировонный И ламповый урок. Спасибо большое за ваш труд. и
Вы очень талантливый учитель! Говорите быстро, но ни одного лишнего слова!! Многие преподаватели вузов могли бы у вас поучиться :))
Андрей, это крутезно!!! Спасибо, что так много делаешь для новичков!!! И тем более - это очень захватывающе у тебя получается!!! СПАСИБО!!!
Очень круто,если будут такие уроки!) Спасибо большое!)
Очень круто.Несколько дней назад только думала об этом а сейчас понимаю,что надо обучаться)Автор доступно объясняет и тем самым заинтересовывает🤗😜
Крутейшее занятие, очень много ценной и практичной информации. Расхлебывал целый день по кусочкам, но это того стоило. Благодарю!
Андрей, это просто супер! Высший уровень! Подача материала, монтаж-все на высоте!!! Как и всегда! Спасибо!
Просто ВАУ, так интересно и подробно, а главное с практикой! Я довольна тем, что у меня получилось сделать с твоими направлениями!
Спасибо за такое понятное объяснение! Отдельная благодарность за то, что автор озвучивает горячие клавиши и даже повторяет несколько раз для закрепления их. Без таких людей, как вы, было бы в сотню раз сложней разобраться: что/ как/ и куда.
блин я в шоке от вашего таланта у меня не получаеться я делал все по вашему большому опытку.Главное не сдаваться и продолжать дальше.В конце видио я увидел результат и был ошарашен увидиному бравоооооооооооооооо дай бог вам здоровья крепкого за веши уроки
Спасибо за очень подробное обучение. Хотелось бы увидеть, как ты делаешь дизайн сайта целиком, все элементы, а не только 1-ый экран. Уже с нетерпением жду следующий урок)))
Вооу, и Дизайн и Монтаж и музыка на заднем фоне это так приятно смотреть, у меня появилась еще больше мотиваций что бы трудиться и саморазвиваться. Спасибо тебе Андрей за такие полезные ролики. Уважуха!
Просто потрясающе! На каждом этапе я думала «ну все уже классно!» но ты снова и снова делал мэджик
Блин, это очень круто! Монтаж зацепил, а голос то какой! И все по теме, никакой воды! Очень интересно, спасибо! ❤️
Андрей, большое спасибо за данный обучающий контент! Бодро, позитивно, легко, энергично, гармонично - это то, как могу описать просмотренный ролик с потрясающей энергией легкости от автора! Благодарю!!!
Спасибо за внятный вводный курс для новичков. Долго искал, что-то похожее, что бы быстро сделать первый прототип в Figma. Понравился ваш подход и манера подачи. Успехов!
У вас потрясающая грамотная речь! Слушать и смотреть одно удовольствие!
Вау. Это действительно один из лучших уроков, которые я видела. Ещё ничего не сделала, а уже чувствую себя профессионалом в этом деле ❤
Люблю этот канал за то, что во время уроком не отвлекаешься не на что. Так как Андрей объясняет очень интересно
Андрей, монтаж очень круто сделан! Прям видно, что ответственно подходил к этой стороне урока. Видно, что в целом качество съемки улучшилось, класс!
я проходила бесплатный курс веб-дизайнеров за 4 дня, но они не смогли рассказать так много о фигме, как рассказали за 45 минут это вы! Спасибо
Какой молодец! Это не первое видео, которое я нашла по данной теме, но - одно из лучших. СПАСИБО!
спасибо большое за прекрасный урок!это был мой первый дизайн,хотя имею и платные курсы) но как для меня они очень долгие.тут все понятно, детально ,просто и красиво)да и человек прекрасный атмосферу задаёт!!и понятность придает наличие практической работы(я делала все параллельно с вами,получилось очень красиво!!)😌
Это просто восхитительно, ещё и бесплатно. Ты молодец с большой буквы
Потрясно! Без воды, всё четко, понятно, интересно! Очень круто!
Столько деталей всего за сорок пять минут. Просто невероятно круто, спасибо за контент!
*Вижу ролик от Андрея, ставлю сразу лайк 😎*
@wayupua
4 жыл бұрын
Ставлю и тебе лайк, когда ты ставишь лайк)
@evar4205
4 жыл бұрын
Тож самое. Я человек простой
Андрей! Дизайн СУПЕР!!! Мне очень понравился, особенно, когда оформляли фото собачку с котиком. А вообще преподнесена информация очень доходчиво и как сейчас говорят "без лишней воды". Не пропущу ни единого урока!
КАКОЕ ЖЕ ШЕДЕВРАЛЬНОЕ ВИДЕО ПОЛУЧИЛОСЬ! Как всё грамотно и чётко объяснили и показали! Такие видео редкость. Побольше бы людей умели бы так объяснять, и всё было бы понятно
Я залипла на заставке.Это просто произведение искусства
Все в принципе объяснено по полочкам. Сложность заключается в том, что сложно новичку запомнить основные функции фигмы, и работы с ней на первых этапах.
@user-pd3hj7tw2q
2 жыл бұрын
английский надо учить((((
@hybocat9005
2 жыл бұрын
Ну тут вообще не соглашусь. Фигма так хорошо оптимизированна что я за 2 дня полностью в большинстве основных элементов разобрался и запомнил видимо до конца жизни
@TatiValeri
2 жыл бұрын
Ещё бы разобраться что такое фигма😉
@allyoinna
2 жыл бұрын
@@hybocat9005 это точно. Главное, не бояться нажимать на всё подряд. Думаю, к концу недели освою.
Спасибо за видео! Информативно, понятно, обоснованно. Приятно смотреть!
Все ставила лайк, подписалась, очень понравился ваш урок, смотрела так буд-то смотрю сюжетный сериал: 46 минут не заметно пролетел как 6 минут, и похлопала везде говоря Ваааау!!! Это было потресающе просто огонь спасибо автор
Вы прекрасный учитель! Материал излагает я очень легко, понятно и доступно. Благодарю Вас! 🙏🌼🌸🌷🌺🌻
Вообще норм! Без "воды" максимально понятно, быстро. Спасибо.
Начал работать в фотошопе, думал о графическом дизайне. Но потом когда увидел одно видео с вашего канала. Я очень сильно загорелся веб-дизайном. Спасибо за обучение)
@qothex
3 жыл бұрын
Как успехи?
@rivnovaga
3 жыл бұрын
и как выучился или забил?
@MaBrg1
2 жыл бұрын
Ну как?
@Arsiphal
2 жыл бұрын
Похоже, ответа не будет
Кайф. Такие уроки вдохновляют стать кем-то. Спасибо. Хочется сказать, что у вас талант, но понимаю, что одного таланта мало для такого. Вы большой молодец. Желаю успехов и не удариться о потолок.
Интересно, содержательно, и самое главное, все понятно! Смотрела не отрываясь, 45 минут на одном дыхании. Андрей Гаврилов не только крутой веб-дизайнер, но и лучший учитель. Кратко, понятно, все по делу. Вот умеет же заинтересовать, Браво!
Андрей, спасибо тебе большое. Это самое понятное видео про Фигму, что есть в Ютубе. Я подписалась на тебя. Мне уже нравится твоя школа :)
Какой крутой урок🔥🔥🔥 Спасибо большое!!)) Жду продолжения, буду пока пробовать делать сама, по этому уроку!)))
Вот ИМЕННО ЭТО!!! ИМЕННО ТАК!!! Должны обьяснять в ВУЗ и колледжах на курсах!
Спасибо за урок. Круто что рассказываешь про нюансы и детали+теория и сразу практическое применение.
Хотелось бы увидеть процесс создания полноценного дизайна сайта.Спасибо за видео
@user-dk2ke6my9i
2 жыл бұрын
и что там интересного то? Он обрисует ту картину которую он видит у себя в голове, даже если ты пересмотришь таких видео штук 500 ты всё равно будешь делать макеты такого плана какое воображение у тебя в голове.)
Такие информации! Благодарю за такие труд и урок! И все это бесплатно. Спасибо!
Боже как прекрасно я вас нашла и кстати я записалась на курс 15 декабря.Спасибо ваМ ЗА ТО ЧТО ВЫ ЕСТЬ!!!
На редкость токовый урок с правильной подачей материала в процессе реальной работы над дизайном. Браво! 👏
- Сколько тебе лет? - Что-то между 14 и 40
@cutecats8037
3 жыл бұрын
13 🌚
@dimabizz1678
2 жыл бұрын
@@cutecats8037 хех мне тож, тоже хочешь подумать о будущем прямо сейчас а не пока поздно?
@cutecats8037
2 жыл бұрын
@@dimabizz1678 Да
@usweet810
2 жыл бұрын
@@cutecats8037 понимаю..
Огромное Вам спасибо! Вы прекрасно разбираетесь в своем деле и очень детально поясняете все необходимые моменты. Очень благодарна Вам за Ваше время и Ваше творчество))) Будем ждать следующих видео.
Спасибо за классный урок, и отдельно отмечу крутую музыку на фоне)) Приятно смотреть и слушать)
Отличный урок, во время которого, познакомился с Figma. Захотелось изучать и работать дальше с этим инструментом. Выражаю огромную благодарность автору урока, за вдохновения и наставления, на путь верный ;) Буду продолжать развиваться с вами.
Прекрасный урок. Спасибо. Без лишних слов, все только по делу. Очень помогло.
Это просто самое лучшее видео для начинающего веб-дизайнера, мне очень понравилось буду продолжать смотреть😇
Я никогда в жизни, не оставлял комментарии под роликами, но тут. Это лучшее, что я видел когда либо)
Спасибо за видео, очень полезно! Даже не представлял, что фигма на столько удобней фотошопа!
Спасибо Вам огромное преогромное! Это так профессионально, живо и интересно 🌹 Занимаюсь дальше.
Я очень рада что есть такие знатоки как вы которому не лень объяснять все по пункту.Отлельное спасибо
Куда еще лучше Андрей?! Это прекрасно)
😍 как же здорово вы объясняете это талант
Вполне доходчиво. Спасибо. Как мне кажется лучший ознакомительный сюжет для тех, кто решил попытать свои возможности в одном из айти направлении.
Классный урок, динамично, понятно. Обязательно сделаю домашнее задание 🎉 Спасибо! Вам прекрасно удаётся не только делать самому сайты, но и обучать. ❤
Очень понравилось ,прекрасный урок, вы супер , все понятно и грамотно, спасибо за ваш труд.
Согласна со многими, урок очень понятный и последовательный. Спасибо!
Андрей, Спасибо большое за ваш труд. Вы хороший учитель. Вас интересно слушать!
огромное спасибо за урок! все доступно, удалось повторить. делаю первый раз, но была безумно рада увидеть результат!
Андрей! Вы молодец, ваши уроки по "Веб-дизайну" очень увлекательны, мне не известны термины, но видео досмотрел до конца, интересно наблюдать как складывается картинка шикарного сайта. А в конце, еще интереснее! Среди участников Бесплатного « Мастер класса » разыгрывается дорогая аудио колонка, Классно! Чтобы заинтересовать больше народа, поделился этим видео: ВК, ОК, Feacebook.
От души спасибо! Я за такое короткое время узнал так много! И ведь всё бесплатно