Основы веб-дизайна с нуля. Урок #1. Практика в Figma для начинающих.
HTML-код
- Опубликовано: 11 июн 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года после выхода этого видео, это по-прежнему лучшее видео про графический дизайн. 🎉😊
Блин, этож сколько подходящей музыки надо было находить по вайбу 40 минутного ролика)
я ее и не слышала))
Как всегда: кратко, по делу и доходчиво и без лишней воды. Так держать!!! Жду следующих уроков. Спасибо за информацию.
дурак ты он не объяснил как векорами управлять нормально догадйся сам называется
@@OlesayVlad22 искала этот коммент, я тыкалась тыкалась в итоге не нашла и не смогла сделать
Меня не перестает поражать, как ты умудряешься в таком коротком видео рассказать так много полезной информации! Спасибо за очередной урок. Коучинг закончился, а уроки и домашки нет, и это здорово!
Отличный урок. Никакой воды, все без размазывания, мычания, все динамично, с юмором,
и максимально понятно. Редко встретишь в учебных материалах столь интересную и содержательную подачу. В общем- здОрово!
@Double Language Channel Animation В Украине ВК не работает.
Спасибо, я так рада, что есть такие видео. Последнее время заинтересовалась созданием сайтов смотрю уроки и такая нудятина монотонная, я не могу так усваивать, все ещё так сложно рассказывают, а вы очень всё круто донесли. Буду пробывать спасибо ❤
Вот было бы здорово если потом выйдет такая же рубрика, где Андрей верстает эти сайты
imitist play да я бы посмотрел
Отличный урок! Можно реально использовать в работе, просматривая не один раз. Да, автор по настоящему учит, а не просто рассказывает о предмете. Постараюсь посмотреть все уроки и попробовать работать с этим инструментом.
Я очень довольна, что выбрала именно ваш урок как первый для обучения😍 спасибо!
В первые такое, что бы я посмотрел долгий ролик около 40 минут, без перемотки и 2х. Очень приятно доносится информация. Спасибо за ролик
Андрей, вы просто невероятный человек. Спасибо вам за такой классный урок. Никогда не думала, что буду способна с нуля сделать главную страницу.
ЭТО АХРИНЕННО! прохожу сейчас веб дизайнер взрывной старт и в восторге, так ещё больше информации даёте! Бесплатно! В такой подаче! ОГРОМНОЕ СПАСИБО, АНДРЕЙ
Я в восторге! На сколько интересно, поучительно, по-делу, без воды, подача ОГОНЬ! Я делала всё за вами, и у меня получилось! Только открыла для себя фигму, и думаю с вами, у меня всё получится!
А как свернуть панель с слоями ? Cotrl+shift+} не работает.
Мне очень понравилась что он расставил метки на видео,не надо искать что-либо если забыл сразу видно что где. Обязательно сделаю домашнее задание завтра и вечером посмотрю второй урок. Спасибо за уроки)
Расписание сегодняшних уроков в "Вечерней школе":
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 и этот урок прям то, что надо, закрепила старые знания и дополнила новыми, уже жду следующий выпуск)) Спасибо!
Хотелось бы увидеть процесс создания полноценного дизайна сайта.Спасибо за видео
и что там интересного то?
Он обрисует ту картину которую он видит у себя в голове, даже если ты пересмотришь таких видео штук 500 ты всё равно будешь делать макеты такого плана какое воображение у тебя в голове.)
Дааа Андрей!Спасибо за хорошо преподнесенный урок! Конечно когда еще плохо разбираешься, очень трудно уследить за Вашими передвижениями по экрану.У Вас настоящий талант,умница! Буду смотреть все Ваши уроки,может чему и научусь,хотя бы приблизительно.
Андрей, благодарю! Ооооочень информативно, понятно и просто! За один урок поняла все и повторила, а купленные курсы не заходили вообще до этого!! Твоя подача информации просто бесподобна!
Училась у Андрея 2 года назад, но все равно каждый раз с особым наслаждением смотрю новые видео, чтобы почерпнуть интересные идеи для себя. Все доходчиво, информативно и ничего лишнего. Жду следующих уроков :)
Очень круто,если будут такие уроки!) Спасибо большое!)
Я под впечатлением, как можно, так лаконично и доступно всё объяснить человеку, который никогда таким не интересовался!? Я все еще не знаю зачем я смотрю это, но желание заниматься веб-дизайном меня теперь отсюда не выпускает. Благодарю за видео, как же всё гармонично!
Люблю этот канал за то, что во время уроком не отвлекаешься не на что. Так как Андрей объясняет очень интересно
Андрей, это просто супер! Высший уровень! Подача материала, монтаж-все на высоте!!! Как и всегда! Спасибо!
Спасибо большое за ваше видео, всё объясняете просто и доходчиво, чувствуется уровень картинки, звука и монтажа. Решил заняться веб-дизайном, но до вашего видео ни разу не занимался практикой на таком уровне как у вас. Буду дальше учится по вашим видео. Ещё раз спасибо)))
Я вообще была ноль .... но сегодня я поняла, положен хороший, качественный старт в моём развитии!))
Спасибо за очень доступный для новичка видео-урок!!!
Это просто восхитительно, ещё и бесплатно. Ты молодец с большой буквы
Я никогда в жизни, не оставлял комментарии под роликами, но тут. Это лучшее, что я видел когда либо)
Блин, это очень круто! Монтаж зацепил, а голос то какой! И все по теме, никакой воды! Очень интересно, спасибо! ❤️
Просто потрясающе! На каждом этапе я думала «ну все уже классно!» но ты снова и снова делал мэджик
Первый раз не добавляла скорость к видео. Наоборот - местами пересматривала. Минимум воды, максимум информации. Автору респект!
Вооу, и Дизайн и Монтаж и музыка на заднем фоне это так приятно смотреть, у меня появилась еще больше мотиваций что бы трудиться и саморазвиваться. Спасибо тебе Андрей за такие полезные ролики. Уважуха!
Столько деталей всего за сорок пять минут. Просто невероятно круто, спасибо за контент!
Потрясно! Без воды, всё четко, понятно, интересно! Очень круто!
Очень круто.Несколько дней назад только думала об этом а сейчас понимаю,что надо обучаться)Автор доступно объясняет и тем самым заинтересовывает🤗😜
Вообще норм! Без "воды" максимально понятно, быстро. Спасибо.
Почему-то стало жалко собачку, после слов что, ее можно удалить. 😄
Отличная подача материала! Браво! Спасибо большое!
😅
Вы очень талантливый учитель! Говорите быстро, но ни одного лишнего слова!! Многие преподаватели вузов могли бы у вас поучиться :))
Просто ВАУ, так интересно и подробно, а главное с практикой! Я довольна тем, что у меня получилось сделать с твоими направлениями!
Андрей, это крутезно!!! Спасибо, что так много делаешь для новичков!!! И тем более - это очень захватывающе у тебя получается!!! СПАСИБО!!!
Спасибо за видео! Информативно, понятно, обоснованно. Приятно смотреть!
Крутейшее занятие, очень много ценной и практичной информации. Расхлебывал целый день по кусочкам, но это того стоило. Благодарю!
Вау. Это действительно один из лучших уроков, которые я видела. Ещё ничего не сделала, а уже чувствую себя профессионалом в этом деле ❤
Андрей, монтаж очень круто сделан! Прям видно, что ответственно подходил к этой стороне урока. Видно, что в целом качество съемки улучшилось, класс!
Спасибо за очень подробное обучение. Хотелось бы увидеть, как ты делаешь дизайн сайта целиком, все элементы, а не только 1-ый экран. Уже с нетерпением жду следующий урок)))
Я очень рада что есть такие знатоки как вы которому не лень объяснять все по пункту.Отлельное спасибо
Это просто самое лучшее видео для начинающего веб-дизайнера, мне очень понравилось буду продолжать смотреть😇
*Вижу ролик от Андрея, ставлю сразу лайк
😎*
Ставлю и тебе лайк, когда ты ставишь лайк)
Тож самое. Я человек простой
Спасибо за такое понятное объяснение! Отдельная благодарность за то, что автор озвучивает горячие клавиши и даже повторяет несколько раз для закрепления их. Без таких людей, как вы, было бы в сотню раз сложней разобраться: что/ как/ и куда.
Какой молодец! Это не первое видео, которое я нашла по данной теме, но - одно из лучших. СПАСИБО!
У вас потрясающая грамотная речь! Слушать и смотреть одно удовольствие!
Андрей! Дизайн СУПЕР!!! Мне очень понравился, особенно, когда оформляли фото собачку с котиком.
А вообще преподнесена информация очень доходчиво и как сейчас говорят "без лишней воды".
Не пропущу ни единого урока!
спасибо большое за прекрасный урок!это был мой первый дизайн,хотя имею и платные курсы) но как для меня они очень долгие.тут все понятно, детально ,просто и красиво)да и человек прекрасный атмосферу задаёт!!и понятность придает наличие практической работы(я делала все параллельно с вами,получилось очень красиво!!)😌
Андрей, большое спасибо за данный обучающий контент! Бодро, позитивно, легко, энергично, гармонично - это то, как могу описать просмотренный ролик с потрясающей энергией легкости от автора! Благодарю!!!
Вот ИМЕННО ЭТО!!! ИМЕННО ТАК!!! Должны обьяснять в ВУЗ и колледжах на курсах!
Андрей, спасибо тебе большое. Это самое понятное видео про Фигму, что есть в Ютубе. Я подписалась на тебя. Мне уже нравится твоя школа :)
Все в принципе объяснено по полочкам. Сложность заключается в том, что сложно новичку запомнить основные функции фигмы, и работы с ней на первых этапах.
английский надо учить((((
Ну тут вообще не соглашусь. Фигма так хорошо оптимизированна что я за 2 дня полностью в большинстве основных элементов разобрался и запомнил видимо до конца жизни
Ещё бы разобраться что такое фигма😉
@@hybocat9005 это точно. Главное, не бояться нажимать на всё подряд. Думаю, к концу недели освою.
Спасибо за внятный вводный курс для новичков. Долго искал, что-то похожее, что бы быстро сделать первый прототип в Figma. Понравился ваш подход и манера подачи. Успехов!
За это видео узнала больше, чем на платном курсе. Спасибо большое 💜
Я залипла на заставке.Это просто произведение искусства
Начал работать в фотошопе, думал о графическом дизайне. Но потом когда увидел одно видео с вашего канала. Я очень сильно загорелся веб-дизайном. Спасибо за обучение)
Как успехи?
и как выучился или забил?
Ну как?
Похоже, ответа не будет
На редкость токовый урок с правильной подачей материала в процессе реальной работы над дизайном. Браво! 👏
- Сколько тебе лет?
- Что-то между 14 и 40
13 🌚
@@cutecats8037 хех мне тож, тоже хочешь подумать о будущем прямо сейчас а не пока поздно?
@@dimabizz1678 Да
@@cutecats8037 понимаю..
Такие информации! Благодарю за такие труд и урок! И все это бесплатно. Спасибо!
КАКОЕ ЖЕ ШЕДЕВРАЛЬНОЕ ВИДЕО ПОЛУЧИЛОСЬ! Как всё грамотно и чётко объяснили и показали! Такие видео редкость. Побольше бы людей умели бы так объяснять, и всё было бы понятно
Куда еще лучше Андрей?! Это прекрасно)
Боже как прекрасно я вас нашла и кстати я записалась на курс 15 декабря.Спасибо ваМ ЗА ТО ЧТО ВЫ ЕСТЬ!!!
Раза 3 тянулся лайкнуть, но вспоминал, что уже поставил "лайк" почти в начале видео )))
Спасибо. Очень доступно, ёмко и интересно обучаете. Восторг
Спасибо за видео, очень полезно! Даже не представлял, что фигма на столько удобней фотошопа!
Вы прекрасный учитель! Материал излагает я очень легко, понятно и доступно. Благодарю Вас! 🙏🌼🌸🌷🌺🌻
Спасибо за урок. Круто что рассказываешь про нюансы и детали+теория и сразу практическое применение.
огромное спасибо за урок! все доступно, удалось повторить. делаю первый раз, но была безумно рада увидеть результат!
Какой крутой урок🔥🔥🔥 Спасибо большое!!)) Жду продолжения, буду пока пробовать делать сама, по этому уроку!)))
😍 как же здорово вы объясняете это талант
Прекрасный урок. Спасибо. Без лишних слов, все только по делу. Очень помогло.
Интересно, содержательно, и самое главное, все понятно! Смотрела не отрываясь, 45 минут на одном дыхании. Андрей Гаврилов не только крутой веб-дизайнер, но и лучший учитель. Кратко, понятно, все по делу. Вот умеет же заинтересовать, Браво!
Все ставила лайк, подписалась, очень понравился ваш урок, смотрела так буд-то смотрю сюжетный сериал: 46 минут не заметно пролетел как 6 минут, и похлопала везде говоря Ваааау!!! Это было потресающе просто огонь спасибо автор
Спасибо за классный урок, и отдельно отмечу крутую музыку на фоне)) Приятно смотреть и слушать)
Спасибо Вам огромное преогромное! Это так профессионально, живо и интересно 🌹
Занимаюсь дальше.
Огромное спасибо! Быстро, максимально информативно, без пустых слов!
я проходила бесплатный курс веб-дизайнеров за 4 дня, но они не смогли рассказать так много о фигме, как рассказали за 45 минут это вы! Спасибо
Спасибо за урок! Не знала про маску в Figma.
Андрей, Спасибо большое за ваш труд. Вы хороший учитель. Вас интересно слушать!
Очень классная подача и без воды! Приятно наблюдать за работой! Подписка однозначно!
Огромное Вам спасибо! Вы прекрасно разбираетесь в своем деле и очень детально поясняете все необходимые моменты. Очень благодарна Вам за Ваше время и Ваше творчество))) Будем ждать следующих видео.
От души спасибо! Я за такое короткое время узнал так много! И ведь всё бесплатно