Основы веб-дизайна с нуля. Урок #1. Практика в Figma для начинающих.
HTML-код
- Опубликовано: 25 июн 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
ОГРОМНОЕ СПАСИБО!!! Это первая моя тренировка в фигме и такое чувство, будто я окончила целый курс! Самое крутое практическое занятие в моей жизни! 👍👍👍👍👍
как успехи?
Редко когда попадаются люди, способные хорошо доносить инфу , приятно слушать, без слов паразитов , красава , что я могу сказать, буду смотреть ))
Это, не первый мой урок, но такой понятной и интересной подачи материала я не видела. Даже платные материалы не настолько полезны. Огромное спасибо
Спасибо, я так рада, что есть такие видео. Последнее время заинтересовалась созданием сайтов смотрю уроки и такая нудятина монотонная, я не могу так усваивать, все ещё так сложно рассказывают, а вы очень всё круто донесли. Буду пробывать спасибо ❤
Это единственный бесплатный урок, который я досмотрела до конца и хочу скорее повторить)
я тоже не заметила как ушла время просмотра
Тоже самое)
Скажу честно с первых секунд стало интересно слушать. Кратко, но в тоже время информативно, понятно, приятно слушать и смотреть! Вы молодец!
Меня не перестает поражать, как ты умудряешься в таком коротком видео рассказать так много полезной информации! Спасибо за очередной урок. Коучинг закончился, а уроки и домашки нет, и это здорово!
я думала что веб-дизайнер это сложно, но после этого шикарного видео, стало все понятно, и оказывается довольно не особо и сложно, спасибо за такое прекрасное видео
Спустя 2года после выхода этого видео, это по-прежнему лучшее видео про графический дизайн. 🎉😊
Как всегда: кратко, по делу и доходчиво и без лишней воды. Так держать!!! Жду следующих уроков. Спасибо за информацию.
дурак ты он не объяснил как векорами управлять нормально догадйся сам называется
@@OlesayVlad22 искала этот коммент, я тыкалась тыкалась в итоге не нашла и не смогла сделать
"Лучший из людей, тот, кто делится своими знаниями с другими" - Оставайтесь всегда хорошим человеком:)
Я очень довольна, что выбрала именно ваш урок как первый для обучения😍 спасибо!
Отличный урок! Можно реально использовать в работе, просматривая не один раз. Да, автор по настоящему учит, а не просто рассказывает о предмете. Постараюсь посмотреть все уроки и попробовать работать с этим инструментом.
Андрей, вы просто невероятный человек. Спасибо вам за такой классный урок. Никогда не думала, что буду способна с нуля сделать главную страницу.
Очень круто,если будут такие уроки!) Спасибо большое!)
Спасибо за видео! Кстати фрилансеры, я облегчил себе жизнь. Сделал себе сайт, установил там платежки в рублях и в крипте, через криптомус. Надеюсь кому то помог, потому что месяц назад вообще не понимал, как принимать оплаты от клиентов из - за границы.
Отличный урок. Никакой воды, все без размазывания, мычания, все динамично, с юмором,
и максимально понятно. Редко встретишь в учебных материалах столь интересную и содержательную подачу. В общем- здОрово!
@Double Language Channel Animation В Украине ВК не работает.
Знакома уже немного с Figma и этот урок прям то, что надо, закрепила старые знания и дополнила новыми, уже жду следующий выпуск)) Спасибо!
Очень здорово, что после прохождения бесплатных курсов и интенсива, можно найти что-то новое для себя в новом подкасте! Спасибо вам большое за такую работу🙏🏻
Андрей, благодарю! Ооооочень информативно, понятно и просто! За один урок поняла все и повторила, а купленные курсы не заходили вообще до этого!! Твоя подача информации просто бесподобна!
Дааа Андрей!Спасибо за хорошо преподнесенный урок! Конечно когда еще плохо разбираешься, очень трудно уследить за Вашими передвижениями по экрану.У Вас настоящий талант,умница! Буду смотреть все Ваши уроки,может чему и научусь,хотя бы приблизительно.
Училась у Андрея 2 года назад, но все равно каждый раз с особым наслаждением смотрю новые видео, чтобы почерпнуть интересные идеи для себя. Все доходчиво, информативно и ничего лишнего. Жду следующих уроков :)
Андрей, это просто супер! Высший уровень! Подача материала, монтаж-все на высоте!!! Как и всегда! Спасибо!
Потрясно! Без воды, всё четко, понятно, интересно! Очень круто!
В первые такое, что бы я посмотрел долгий ролик около 40 минут, без перемотки и 2х. Очень приятно доносится информация. Спасибо за ролик
Блин, этож сколько подходящей музыки надо было находить по вайбу 40 минутного ролика)
я ее и не слышала))
Спасибо большое за ваше видео, всё объясняете просто и доходчиво, чувствуется уровень картинки, звука и монтажа. Решил заняться веб-дизайном, но до вашего видео ни разу не занимался практикой на таком уровне как у вас. Буду дальше учится по вашим видео. Ещё раз спасибо)))
Очень круто.Несколько дней назад только думала об этом а сейчас понимаю,что надо обучаться)Автор доступно объясняет и тем самым заинтересовывает🤗😜
Мне очень понравилась что он расставил метки на видео,не надо искать что-либо если забыл сразу видно что где. Обязательно сделаю домашнее задание завтра и вечером посмотрю второй урок. Спасибо за уроки)
Спасибо за видео! Информативно, понятно, обоснованно. Приятно смотреть!
Андрей, это крутезно!!! Спасибо, что так много делаешь для новичков!!! И тем более - это очень захватывающе у тебя получается!!! СПАСИБО!!!
Насколько балансировонный
И ламповый урок. Спасибо большое за ваш труд.
и
Это просто восхитительно, ещё и бесплатно. Ты молодец с большой буквы
Вот было бы здорово если потом выйдет такая же рубрика, где Андрей верстает эти сайты
imitist play да я бы посмотрел
ЭТО АХРИНЕННО! прохожу сейчас веб дизайнер взрывной старт и в восторге, так ещё больше информации даёте! Бесплатно! В такой подаче! ОГРОМНОЕ СПАСИБО, АНДРЕЙ
Крутейшее занятие, очень много ценной и практичной информации. Расхлебывал целый день по кусочкам, но это того стоило. Благодарю!
Люблю этот канал за то, что во время уроком не отвлекаешься не на что. Так как Андрей объясняет очень интересно
Вообще норм! Без "воды" максимально понятно, быстро. Спасибо.
Просто ВАУ, так интересно и подробно, а главное с практикой! Я довольна тем, что у меня получилось сделать с твоими направлениями!
Столько деталей всего за сорок пять минут. Просто невероятно круто, спасибо за контент!
Андрей, большое спасибо за данный обучающий контент! Бодро, позитивно, легко, энергично, гармонично - это то, как могу описать просмотренный ролик с потрясающей энергией легкости от автора! Благодарю!!!
Вооу, и Дизайн и Монтаж и музыка на заднем фоне это так приятно смотреть, у меня появилась еще больше мотиваций что бы трудиться и саморазвиваться. Спасибо тебе Андрей за такие полезные ролики. Уважуха!
Такие информации! Благодарю за такие труд и урок! И все это бесплатно. Спасибо!
Я в восторге! На сколько интересно, поучительно, по-делу, без воды, подача ОГОНЬ! Я делала всё за вами, и у меня получилось! Только открыла для себя фигму, и думаю с вами, у меня всё получится!
А как свернуть панель с слоями ? Cotrl+shift+} не работает.
Я очень рада что есть такие знатоки как вы которому не лень объяснять все по пункту.Отлельное спасибо
Блин, это очень круто! Монтаж зацепил, а голос то какой! И все по теме, никакой воды! Очень интересно, спасибо! ❤️
Спасибо за такое понятное объяснение! Отдельная благодарность за то, что автор озвучивает горячие клавиши и даже повторяет несколько раз для закрепления их. Без таких людей, как вы, было бы в сотню раз сложней разобраться: что/ как/ и куда.
Прекрасный урок. Спасибо. Без лишних слов, все только по делу. Очень помогло.
Спасибо. Очень доступно, ёмко и интересно обучаете. Восторг
Спасибо за внятный вводный курс для новичков. Долго искал, что-то похожее, что бы быстро сделать первый прототип в Figma. Понравился ваш подход и манера подачи. Успехов!
Вы прекрасный учитель! Материал излагает я очень легко, понятно и доступно. Благодарю Вас! 🙏🌼🌸🌷🌺🌻
Какой молодец! Это не первое видео, которое я нашла по данной теме, но - одно из лучших. СПАСИБО!
Огромное спасибо! Быстро, максимально информативно, без пустых слов!
Расписание сегодняшних уроков в "Вечерней школе":
0:00 Что сегодня будет
0:21 Андрей читает рэп 😲
0:50 Зачем ты здесь
1:15 5 дизайн-составляющих
1:41 В чем работают дизайнеры
2:13 Знакомство и обзор Figma
8:07 Начинаем делать 1-ый экран (практика)
11:16 Лого, шапка + лайфхаки копирования
13:28 Работа с пером (pen tool)
14:09 Офферная конструкция
14:35 Композиция и модульная сетка
17:15 Правило «шампура»
18:44 Типографика
20:05 Главная ошибка начинающих
21:42 Сочетаемость цветов
24:25 Где скачивать векторные иконки
25:25 Подбор фото в первый экран
28:14 Что мы выделяем
29:01 Делаем странный прямоугольник
30:35 Градиент в первом экране
31:04 Магия с собачкой
35:01 Вертикальный ритм и карточки
36:01 Умный дизайнер делает так
38:02 Плюем на модульную сетку
40:27 Где пределы контейнера
41:08 Работа с графикой и фото
44:30 Как поделиться работой
45:40 Самая страшная ошибка
45:11 Розыгрыш для всех зрителей
Прости а ты всем кидал на гмаил сообщения
Спасибо за урок! Не знала про маску в Figma.
Спасибо за урок. Круто что рассказываешь про нюансы и детали+теория и сразу практическое применение.
Андрей, Спасибо большое за ваш труд. Вы хороший учитель. Вас интересно слушать!
Спасибо за очень подробное обучение. Хотелось бы увидеть, как ты делаешь дизайн сайта целиком, все элементы, а не только 1-ый экран. Уже с нетерпением жду следующий урок)))
😍 как же здорово вы объясняете это талант
Всё понятно и доходчиво) Спасибо большое. Буду ждать следующие уроки 👍🏻
Друг, спасибо тебе за работу) Красавчик!)
Вот ИМЕННО ЭТО!!! ИМЕННО ТАК!!! Должны обьяснять в ВУЗ и колледжах на курсах!
Просто потрясающе! На каждом этапе я думала «ну все уже классно!» но ты снова и снова делал мэджик
КАКОЕ ЖЕ ШЕДЕВРАЛЬНОЕ ВИДЕО ПОЛУЧИЛОСЬ! Как всё грамотно и чётко объяснили и показали! Такие видео редкость. Побольше бы людей умели бы так объяснять, и всё было бы понятно
На редкость токовый урок с правильной подачей материала в процессе реальной работы над дизайном. Браво! 👏
Спасибо за классный урок, и отдельно отмечу крутую музыку на фоне)) Приятно смотреть и слушать)
*Вижу ролик от Андрея, ставлю сразу лайк
😎*
Ставлю и тебе лайк, когда ты ставишь лайк)
Тож самое. Я человек простой
Спасибо Вам огромное преогромное! Это так профессионально, живо и интересно 🌹
Занимаюсь дальше.
У вас потрясающая грамотная речь! Слушать и смотреть одно удовольствие!
спасибо большое за прекрасный урок!это был мой первый дизайн,хотя имею и платные курсы) но как для меня они очень долгие.тут все понятно, детально ,просто и красиво)да и человек прекрасный атмосферу задаёт!!и понятность придает наличие практической работы(я делала все параллельно с вами,получилось очень красиво!!)😌
Однозначно подписка! Всё грамотно,по полочкам,любо дорого смотреть!
Спасибо за отличный контент👍
Андрей! Дизайн СУПЕР!!! Мне очень понравился, особенно, когда оформляли фото собачку с котиком.
А вообще преподнесена информация очень доходчиво и как сейчас говорят "без лишней воды".
Не пропущу ни единого урока!
Андрей, спасибо тебе большое. Это самое понятное видео про Фигму, что есть в Ютубе. Я подписалась на тебя. Мне уже нравится твоя школа :)
Благодарю Андрей! Сразу видно что Вы талантливый и опытный специалист!!
Спасибо большое за урок 🫶 Пошла пробовать ))
Боже как прекрасно я вас нашла и кстати я записалась на курс 15 декабря.Спасибо ваМ ЗА ТО ЧТО ВЫ ЕСТЬ!!!
Я вообще была ноль .... но сегодня я поняла, положен хороший, качественный старт в моём развитии!))
Спасибо за очень доступный для новичка видео-урок!!!
Вау. Это действительно один из лучших уроков, которые я видела. Ещё ничего не сделала, а уже чувствую себя профессионалом в этом деле ❤
Очень здорово и все в деталях обьясняешь!!! Можно просто смотреть и делать свое попутно.!!!! Спасибо 😊
Какой крутой урок🔥🔥🔥 Спасибо большое!!)) Жду продолжения, буду пока пробовать делать сама, по этому уроку!)))
Вы очень талантливый учитель! Говорите быстро, но ни одного лишнего слова!! Многие преподаватели вузов могли бы у вас поучиться :))
Спасибо большое за столь подробный и не занудный разбор. Очень помогло!
Я под впечатлением, как можно, так лаконично и доступно всё объяснить человеку, который никогда таким не интересовался!? Я все еще не знаю зачем я смотрю это, но желание заниматься веб-дизайном меня теперь отсюда не выпускает. Благодарю за видео, как же всё гармонично!
Все ставила лайк, подписалась, очень понравился ваш урок, смотрела так буд-то смотрю сюжетный сериал: 46 минут не заметно пролетел как 6 минут, и похлопала везде говоря Ваааау!!! Это было потресающе просто огонь спасибо автор
Очень полезное видео! Большое спасибо, Андрей.
Первый раз не добавляла скорость к видео. Наоборот - местами пересматривала. Минимум воды, максимум информации. Автору респект!
Почему-то стало жалко собачку, после слов что, ее можно удалить. 😄
Отличная подача материала! Браво! Спасибо большое!
😅
Это лучшее видео для обучения.Просто респект тебе)
огромное спасибо за урок! все доступно, удалось повторить. делаю первый раз, но была безумно рада увидеть результат!
Лучшее видео для начинающих. Спасибо за подачу материала! Приятно смотреть и слушать.
Спасибо за видео, буду ждать следующего видео по этой теме!
Андрей, монтаж очень круто сделан! Прям видно, что ответственно подходил к этой стороне урока. Видно, что в целом качество съемки улучшилось, класс!
За это видео узнала больше, чем на платном курсе. Спасибо большое 💜
Очень круто! Спасибо!❤
Очень понравилось ,прекрасный урок, вы супер , все понятно и грамотно, спасибо за ваш труд.
Хотелось бы увидеть процесс создания полноценного дизайна сайта.Спасибо за видео
и что там интересного то?
Он обрисует ту картину которую он видит у себя в голове, даже если ты пересмотришь таких видео штук 500 ты всё равно будешь делать макеты такого плана какое воображение у тебя в голове.)