Основы веб-дизайна с нуля. Урок #1. Практика в Figma для начинающих.
Вставка
- Опубліковано 20 тра 2024
- 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
Не забудь 👍 лайкнуть это видео, чтобы не забыть лайкнуть его!
![[2023] Основы верстки сайта с нуля! HTML5 и CSS3 - верстка макета](http://i.ytimg.com/vi/357_BAchn4w/mqdefault.jpg)
![[2023] Основы верстки сайта с нуля! HTML5 и CSS3 - верстка макета](/img/tr.png)
Это сколько нужно прочитать книг и работать, чтобы так грамотно владеть всей информацией и уметь доносить ее. Практика шикарно описана, но я вижу так же большой опыт и талант. Браво!👏👏👏
Абсолютно согласен с вами 👍🏼👍🏼
@@Black_1390 А что в этом видеоуроке тебе не понравилось?
@@Black_1390,ты даже так не можешь
@@Black_1390,ну-ну. По тебе не скажешь
@@Black_1390 а можно твои работы посмотреть ?
Как тебе новый формат? Будешь ходить на уроки "Вечерней школы" дизайна и верстки?)
Конечно. Йоу)
Формат отличный! Да
Я видел много веб-дизайнеров на ютубе,но ты лучший🔥
P.S. Выполнил все условия ещё до того, как узнал о конкурсе😄
Хоть и имеется некий опыт в веб-дизайне и в работе с фигмой, но ты все равно открыл мне глаза на некоторые моменты. Формат пушечный! продолжай в том же духе
Да
Редко когда попадаются люди, способные хорошо доносить инфу , приятно слушать, без слов паразитов , красава , что я могу сказать, буду смотреть ))
Когда увидела 45 мин урока ужаснулась, подумала гляну первые 10 мин и если нудяк выключу. В итоге так затянул урок, что от начала до конца смотрела с широко открытыми глазами. Очень круто, доступно, просто шикарно и все понятно. Не смогла не оставить коммент после такой огромной проделанной работы, браво! Огромное спасибо, впервые встречаю такой подход к обучению, однозначно лайк и подписка.
Ну он веб дизайнер, это его часть работы :D
Это единственный бесплатный урок, который я досмотрела до конца и хочу скорее повторить)
я тоже не заметила как ушла время просмотра
Тоже самое)
ОГРОМНОЕ СПАСИБО!!! Это первая моя тренировка в фигме и такое чувство, будто я окончила целый курс! Самое крутое практическое занятие в моей жизни! 👍👍👍👍👍
как успехи?
Блин, этож сколько подходящей музыки надо было находить по вайбу 40 минутного ролика)
я ее и не слышала))
я думала что веб-дизайнер это сложно, но после этого шикарного видео, стало все понятно, и оказывается довольно не особо и сложно, спасибо за такое прекрасное видео
"Лучший из людей, тот, кто делится своими знаниями с другими" - Оставайтесь всегда хорошим человеком:)
Спустя 2года после выхода этого видео, это по-прежнему лучшее видео про графический дизайн. 🎉😊
Это, не первый мой урок, но такой понятной и интересной подачи материала я не видела. Даже платные материалы не настолько полезны. Огромное спасибо
Скажу честно с первых секунд стало интересно слушать. Кратко, но в тоже время информативно, понятно, приятно слушать и смотреть! Вы молодец!
Очень круто,если будут такие уроки!) Спасибо большое!)
Спасибо за видео! Кстати фрилансеры, я облегчил себе жизнь. Сделал себе сайт, установил там платежки в рублях и в крипте, через криптомус. Надеюсь кому то помог, потому что месяц назад вообще не понимал, как принимать оплаты от клиентов из - за границы.
Я очень довольна, что выбрала именно ваш урок как первый для обучения😍 спасибо!
Спасибо большое за ваше видео, всё объясняете просто и доходчиво, чувствуется уровень картинки, звука и монтажа. Решил заняться веб-дизайном, но до вашего видео ни разу не занимался практикой на таком уровне как у вас. Буду дальше учится по вашим видео. Ещё раз спасибо)))
Знакома уже немного с Figma и этот урок прям то, что надо, закрепила старые знания и дополнила новыми, уже жду следующий выпуск)) Спасибо!
Меня не перестает поражать, как ты умудряешься в таком коротком видео рассказать так много полезной информации! Спасибо за очередной урок. Коучинг закончился, а уроки и домашки нет, и это здорово!
Андрей, благодарю! Ооооочень информативно, понятно и просто! За один урок поняла все и повторила, а купленные курсы не заходили вообще до этого!! Твоя подача информации просто бесподобна!
Отличный урок! Можно реально использовать в работе, просматривая не один раз. Да, автор по настоящему учит, а не просто рассказывает о предмете. Постараюсь посмотреть все уроки и попробовать работать с этим инструментом.
Очень здорово, что после прохождения бесплатных курсов и интенсива, можно найти что-то новое для себя в новом подкасте! Спасибо вам большое за такую работу🙏🏻
Андрей, вы просто невероятный человек. Спасибо вам за такой классный урок. Никогда не думала, что буду способна с нуля сделать главную страницу.
Дааа Андрей!Спасибо за хорошо преподнесенный урок! Конечно когда еще плохо разбираешься, очень трудно уследить за Вашими передвижениями по экрану.У Вас настоящий талант,умница! Буду смотреть все Ваши уроки,может чему и научусь,хотя бы приблизительно.
Очень круто.Несколько дней назад только думала об этом а сейчас понимаю,что надо обучаться)Автор доступно объясняет и тем самым заинтересовывает🤗😜
Вот было бы здорово если потом выйдет такая же рубрика, где Андрей верстает эти сайты
imitist play да я бы посмотрел
Училась у Андрея 2 года назад, но все равно каждый раз с особым наслаждением смотрю новые видео, чтобы почерпнуть интересные идеи для себя. Все доходчиво, информативно и ничего лишнего. Жду следующих уроков :)
Почему-то стало жалко собачку, после слов что, ее можно удалить. 😄
Отличная подача материала! Браво! Спасибо большое!
😅
Просто ВАУ, так интересно и подробно, а главное с практикой! Я довольна тем, что у меня получилось сделать с твоими направлениями!
Спасибо за видео! Информативно, понятно, обоснованно. Приятно смотреть!
Андрей, это крутезно!!! Спасибо, что так много делаешь для новичков!!! И тем более - это очень захватывающе у тебя получается!!! СПАСИБО!!!
Спасибо за урок. Круто что рассказываешь про нюансы и детали+теория и сразу практическое применение.
Отличный урок. Никакой воды, все без размазывания, мычания, все динамично, с юмором,
и максимально понятно. Редко встретишь в учебных материалах столь интересную и содержательную подачу. В общем- здОрово!
@Double Language Channel Animation В Украине ВК не работает.
В первые такое, что бы я посмотрел долгий ролик около 40 минут, без перемотки и 2х. Очень приятно доносится информация. Спасибо за ролик
Крутейшее занятие, очень много ценной и практичной информации. Расхлебывал целый день по кусочкам, но это того стоило. Благодарю!
Боже как прекрасно я вас нашла и кстати я записалась на курс 15 декабря.Спасибо ваМ ЗА ТО ЧТО ВЫ ЕСТЬ!!!
Мне очень понравилась что он расставил метки на видео,не надо искать что-либо если забыл сразу видно что где. Обязательно сделаю домашнее задание завтра и вечером посмотрю второй урок. Спасибо за уроки)
Андрей, это просто супер! Высший уровень! Подача материала, монтаж-все на высоте!!! Как и всегда! Спасибо!
Как всегда: кратко, по делу и доходчиво и без лишней воды. Так держать!!! Жду следующих уроков. Спасибо за информацию.
дурак ты он не объяснил как векорами управлять нормально догадйся сам называется
@@OlesayVlad22 искала этот коммент, я тыкалась тыкалась в итоге не нашла и не смогла сделать
Потрясно! Без воды, всё четко, понятно, интересно! Очень круто!
Спасибо Вам огромное преогромное! Это так профессионально, живо и интересно 🌹
Занимаюсь дальше.
Вооу, и Дизайн и Монтаж и музыка на заднем фоне это так приятно смотреть, у меня появилась еще больше мотиваций что бы трудиться и саморазвиваться. Спасибо тебе Андрей за такие полезные ролики. Уважуха!
Какой крутой урок🔥🔥🔥 Спасибо большое!!)) Жду продолжения, буду пока пробовать делать сама, по этому уроку!)))
Спасибо за внятный вводный курс для новичков. Долго искал, что-то похожее, что бы быстро сделать первый прототип в Figma. Понравился ваш подход и манера подачи. Успехов!
Какой молодец! Это не первое видео, которое я нашла по данной теме, но - одно из лучших. СПАСИБО!
ЭТО АХРИНЕННО! прохожу сейчас веб дизайнер взрывной старт и в восторге, так ещё больше информации даёте! Бесплатно! В такой подаче! ОГРОМНОЕ СПАСИБО, АНДРЕЙ
Блин, это очень круто! Монтаж зацепил, а голос то какой! И все по теме, никакой воды! Очень интересно, спасибо! ❤️
Всё понятно и доходчиво) Спасибо большое. Буду ждать следующие уроки 👍🏻
Насколько балансировонный
И ламповый урок. Спасибо большое за ваш труд.
и
Андрей, большое спасибо за данный обучающий контент! Бодро, позитивно, легко, энергично, гармонично - это то, как могу описать просмотренный ролик с потрясающей энергией легкости от автора! Благодарю!!!
Я под впечатлением, как можно, так лаконично и доступно всё объяснить человеку, который никогда таким не интересовался!? Я все еще не знаю зачем я смотрю это, но желание заниматься веб-дизайном меня теперь отсюда не выпускает. Благодарю за видео, как же всё гармонично!
Это просто восхитительно, ещё и бесплатно. Ты молодец с большой буквы
Спасибо за такой прекрасный туториал!! так долго искала годное видео, а тут и картинка приятная, и все коротко и по делу простым языком!!! просто топ
Андрей, монтаж очень круто сделан! Прям видно, что ответственно подходил к этой стороне урока. Видно, что в целом качество съемки улучшилось, класс!
Андрей! Дизайн СУПЕР!!! Мне очень понравился, особенно, когда оформляли фото собачку с котиком.
А вообще преподнесена информация очень доходчиво и как сейчас говорят "без лишней воды".
Не пропущу ни единого урока!
Столько деталей всего за сорок пять минут. Просто невероятно круто, спасибо за контент!
Очень здорово и все в деталях обьясняешь!!! Можно просто смотреть и делать свое попутно.!!!! Спасибо 😊
Вообще норм! Без "воды" максимально понятно, быстро. Спасибо.
Спасибо за урок! Не знала про маску в Figma.
Спасибо за такое понятное объяснение! Отдельная благодарность за то, что автор озвучивает горячие клавиши и даже повторяет несколько раз для закрепления их. Без таких людей, как вы, было бы в сотню раз сложней разобраться: что/ как/ и куда.
спасибо большое за прекрасный урок!это был мой первый дизайн,хотя имею и платные курсы) но как для меня они очень долгие.тут все понятно, детально ,просто и красиво)да и человек прекрасный атмосферу задаёт!!и понятность придает наличие практической работы(я делала все параллельно с вами,получилось очень красиво!!)😌
Спасибо за очень подробное обучение. Хотелось бы увидеть, как ты делаешь дизайн сайта целиком, все элементы, а не только 1-ый экран. Уже с нетерпением жду следующий урок)))
Я вообще была ноль .... но сегодня я поняла, положен хороший, качественный старт в моём развитии!))
Спасибо за очень доступный для новичка видео-урок!!!
За это видео узнала больше, чем на платном курсе. Спасибо большое 💜
Спасибо вам огромное! Я в восторге! Все понятно объясняете и красиво выходит😍
Огромное Вам спасибо! Вы прекрасно разбираетесь в своем деле и очень детально поясняете все необходимые моменты. Очень благодарна Вам за Ваше время и Ваше творчество))) Будем ждать следующих видео.
Такие информации! Благодарю за такие труд и урок! И все это бесплатно. Спасибо!
Люблю этот канал за то, что во время уроком не отвлекаешься не на что. Так как Андрей объясняет очень интересно
Огромное спасибо! Быстро, максимально информативно, без пустых слов!
Андрей, спасибо тебе большое. Это самое понятное видео про Фигму, что есть в Ютубе. Я подписалась на тебя. Мне уже нравится твоя школа :)
- Сколько тебе лет?
- Что-то между 14 и 40
13 🌚
@@cutecats8037 хех мне тож, тоже хочешь подумать о будущем прямо сейчас а не пока поздно?
@@dimabizz1678 Да
@@cutecats8037 понимаю..
Прекрасный урок. Спасибо. Без лишних слов, все только по делу. Очень помогло.
Спасибо большое за информацию! Фигма стало мне очень интересным 👍😍. Будем теперь стараться сделать как вы. Ждём ещё новых дизайн. Вам желаю успехов в работе.
Спасибо за видео, буду ждать следующего видео по этой теме!
Спасибо за классный урок, и отдельно отмечу крутую музыку на фоне)) Приятно смотреть и слушать)
Андрей, Спасибо большое за ваш труд. Вы хороший учитель. Вас интересно слушать!
Спасибо вам за ваш труд и креативность. В этом уроке вам действительно удалось охватить всё то, что нужно для начинающих 👍
*Вижу ролик от Андрея, ставлю сразу лайк
😎*
Ставлю и тебе лайк, когда ты ставишь лайк)
Тож самое. Я человек простой
Спасибо за видео, очень полезно! Даже не представлял, что фигма на столько удобней фотошопа!
Ой как же ты хорош, зачитал да ещё и материал годный и все доступно понятно. Молодцом 🙏
Вау. Это действительно один из лучших уроков, которые я видела. Ещё ничего не сделала, а уже чувствую себя профессионалом в этом деле ❤
Все в принципе объяснено по полочкам. Сложность заключается в том, что сложно новичку запомнить основные функции фигмы, и работы с ней на первых этапах.
английский надо учить((((
Ну тут вообще не соглашусь. Фигма так хорошо оптимизированна что я за 2 дня полностью в большинстве основных элементов разобрался и запомнил видимо до конца жизни
Ещё бы разобраться что такое фигма😉
@@hybocat9005 это точно. Главное, не бояться нажимать на всё подряд. Думаю, к концу недели освою.
Хотелось бы увидеть процесс создания полноценного дизайна сайта.Спасибо за видео
и что там интересного то?
Он обрисует ту картину которую он видит у себя в голове, даже если ты пересмотришь таких видео штук 500 ты всё равно будешь делать макеты такого плана какое воображение у тебя в голове.)
Круто! Классный дизайн, объяснения четкое и ясное 👍🏻
Спасибо тебе за труд,очень помогают твои видео,успехов тебе и вдохновения)
Отличный урок, во время которого, познакомился с Figma.
Захотелось изучать и работать дальше с этим инструментом.
Выражаю огромную благодарность автору урока, за вдохновения и наставления, на путь верный ;)
Буду продолжать развиваться с вами.
Вы прекрасный учитель! Материал излагает я очень легко, понятно и доступно. Благодарю Вас! 🙏🌼🌸🌷🌺🌻
Спасибо большое за столь подробный и не занудный разбор. Очень помогло!
Кайф. Такие уроки вдохновляют стать кем-то. Спасибо. Хочется сказать, что у вас талант, но понимаю, что одного таланта мало для такого. Вы большой молодец. Желаю успехов и не удариться о потолок.
Все ставила лайк, подписалась, очень понравился ваш урок, смотрела так буд-то смотрю сюжетный сериал: 46 минут не заметно пролетел как 6 минут, и похлопала везде говоря Ваааау!!! Это было потресающе просто огонь спасибо автор
Вот ИМЕННО ЭТО!!! ИМЕННО ТАК!!! Должны обьяснять в ВУЗ и колледжах на курсах!
Спасибо за Ваши труды,всё очень интересно🙏🙏🙏
Спасибо за урок) смотреть одно наслаждение 😊
😍 как же здорово вы объясняете это талант
Годные уроки, давно смотрю респект хотелось бы побольше времени уделить о Figma а так всё круто👍👌🔥
Спасибо, очень интересно и доступным языком👍
На редкость токовый урок с правильной подачей материала в процессе реальной работы над дизайном. Браво! 👏
Очень понравилось ,прекрасный урок, вы супер , все понятно и грамотно, спасибо за ваш труд.
Просто потрясающе! На каждом этапе я думала «ну все уже классно!» но ты снова и снова делал мэджик
Классный урок, динамично, понятно. Обязательно сделаю домашнее задание 🎉 Спасибо! Вам прекрасно удаётся не только делать самому сайты, но и обучать. ❤
Я в восторге! На сколько интересно, поучительно, по-делу, без воды, подача ОГОНЬ! Я делала всё за вами, и у меня получилось! Только открыла для себя фигму, и думаю с вами, у меня всё получится!
А как свернуть панель с слоями ? Cotrl+shift+} не работает.