UI/UX дизайн. Разбор работ дизайна подписчиков #94 уроки веб-дизайна в Figma
#alexeybychkov #figma #webdesign
Смотрим работы подписчиков
Карта канала - start.video
Прислать работу на разбор - vk.com/alexeybychkov
Прислать работу: vk.com/alexeybychkov
Бусти - boosty.to/alexeybychkov
Файл со скриншотами для насмотренности: boosty.to/alexeybychkov/posts...
KZhead - / @alexeybychkov_
ТикТок - / alexeybychkov_
Rutube - rutube.ru/channel/24298564/
Дзен - zen.yandex.ru/alexeybychkov
Инстаграм - / alexeybychkov_
Телеграм - t.me/a1exeybychkov
Вконтакте - vk.com/alexeybychkov
Обучение - alexeybychkov.study/
Мои цитаты - zapi.si/
Мои 404 - www.404.gallery/
Хелп по Фигме - figma.help/
💰❤️ Поддержать канал:
/ @alexeybychkov_
бусти - boosty.to/alexeybychkov - русский интерфейс, рубли
патреон - / alexeybychkov - английский, доллары
0:00 - доставка еды
9:27 - сайт-портфолио разработчика
16:16 - сайт про пипцы
19:13 - сайт про интерьеры
28:02 - очередной клон vet.city
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
Меня зовут Алексей и я веб-дизайнер фрилансер из Минска. Мне в районе 38 лет, женат на прекрасном человеке и у нас две прекрасные дочки. Работаю на лучшей бирже в рунете - Weblancer.net. И делаю это хорошо, чего скрывать =) Ведь я люблю свою работу (уже 17 лет) и всех своих заказчиков. На этом канале делюсь опытом, рассказываю про всякие детали работы веб-дизайнером на фрилансе. Тут будет не только теория про веб-дизайн, но и много практики в фигме и фотошопе!
Подробнее обо мне - alexeybychkov.com/about/
17 лет опыта - alexeybychkov.com/experience/
Пишу - alexeybychkov.com/blog/
Дизайню - alexeybychkov.com/cases/
Отзывы - clck.ru/K5Mcc
Мои книги:
«Дизайн и фриланс. Начало» - clck.ru/JE8ku
«Дизайн и фриланс. Новый уровень» - clck.ru/JE8jT
Хелп по Фигме: уроки, видео, советы, фишки - figma.help
Мир фейсов: faces.world/
#figma #фигма #фотошоп #photoshop #дизайн #design #фриланс #freelance
Ребзя, спасибо всем за лайки, комменты и подписку! Обнял-приподнял! Смотреть ролики на 2-3 месяца раньше - boosty.to/alexeybychkov Карта канала - start.video
С инстой - проблема с впн: - блок впн сервисов, низкая скорость и не все могут завезти свой сервак в другой стране...
Кстати, по поводу ленивых людей, которые соцсетями перестали пользоваться, потому что лень кнопку ВПН клацнуть... Это не обязательно лень) У меня вот грузится оно ооооооооочень медленно, я пока тебе заявку на разбор оставила, чуть кукухой не сдвинулась, на сколько оно все тупит и медленно грузится😅😅 (да, это на бесплатной надстройке в хроме, если платная, то было бы быстрее...но это как-то глупо ради ВК ВПНку покупать, а для работы оно нужно крайне редко)
Кстати о заявках на разбор.... А ее типа оставил и все, не нужно больше ВК мониторить?
Каждый разбор - это кладезь бесценной информации и заряд хорошим настроением! Хохочу в голос!😂 И что важно : Вы не унижаете, не обижаете, а популярно, на примерах, указываете на ошибки ещё и с порцией юмора! Обожаю❤❤❤
рад, что нравится!
Давненько не было видео, как ты сам что-то дизайнишь Или хотя бы разбор своего макета: как работал с сеткой, как находил референсы и т.д. Вроде ты сайт курса недавно редизайнил, можно про него рассказать)
да просто открыл фигму, решил в этот раз сделать в темной теме, контент уже был, а сетка стандартная 12 колонка
Спасибо! 🎉 Как я тащусь от твоей подачи информации!😊
очень рад, что нравится)
Оооо, в конце победная фраза "цени момент и компонент" хы хы
Ага)
Спасибо за разборы. Очень интересно слушать и смотреть🔥
рад, что нравится!
О божечки! Случайно наткнулась и полюбила этот канал! Не знаю что такое мастер, но теперь знаю что надо научиться делать и сколько раз если поругаюсь с кем-то))
огонь) спасибо за подписку!
Это можно сказать краткий курс по тихой мести🤣❤️
Обожаю эту рубрику)) спасибо за разбор!
Очень рад!
спасибо за разборы, всегда смотрю с удовольствием!
Спасибо за просмотр)
Спасибо огромное, Алексей! Невероятно полезный контент
Очень рад!
Отличный разбор, классные примеры, много полезных заметок. Спасибо за крутой контент ❤❤❤❤
ну класс
Очень нравятся видео с разборами. Спасибо🎉😊
очень рад!
Спасибо большое за разборы, интересно и крайне познавательно))
Ну класс
Леша, обожаю твои разборы! Столько инфы качественной и полезной!
Очень рад ❤️
Однозначно лайк до просмотра. В качестве контента нет ни малейшего сомнения!
Ну класс
спасибо большое за разборы!
пожалуйста!
Обожаю разборы. Только сегодня подумала, что давно их не было на канале и вуаля!
🎩
Супер. Спасибо
пожалуйста!
Разборы как всегда, на высоте
Супер!
Обожаю твои обзоры!! Очень нравится твоя подача))
супер
очень интересны твои разборы. ❤
Очень рад
Большое спасибо❤
пожалуйста!
«Пиратский флаг» - топ!😂 Спасибо за материалы и очередное обновление бесплатного курса! 🙏
🎉
Спасибо, крутой контент 👍
пожалуйста!
Полезно было 😊👌спасибо
супер
Спасибище большое, и посмеялся, и узнал чем отличаются выпадающие списки и спойлеры👍👍
Супер)
Ага... для меня это тоже было неожиданным открытием😅😅
каждый раз узнаю что-то новое! вроде мелочь, но как важно расположение стрелки⬇ просто великолепно🪄
супер
Полезности 🙌
Да!
Алексей как всегда - красавчег!!! Обожаю этот канал!!! Всегда есть чему поучиться!
ну класс)
Лучше этого канала нету на всем ютубе!🔥 Спасибо за каждый ролик и что делишься своими знаниями и навыками!🫶
Да! 🥳
Спасибо!
пожалуйста!
Спасибо!! самый полезный контент! побежала свою работу докручивать,
Давай)
Спасибо, Леша! Многие твои замечания применяю. Научилась перепроверять работы в режиме контуров, обращаю внимание на отступы, иконки из одного набора, короче хауса и непоняток значительно уменьшилось благодаря твоим разборам🙂 Фил хуг!
круто) Фил Хуг
Про памятник и голубя гениально, кайфую каждый раз ))
😀
Спасибо, Алексей. Это было полезно - совместил полезное с приятным: узнал на что нужно обращать внимание, получил удовольствие от легкости подачи основ дизайна, разбавленных шутками. Спасибо что детально объясняешь какие были допущены ошибки и как их нужно исправить. Особенно понравилось про пиратский флаг.
супер, рад, что нравится!
Привет, спасибо за разбор макета для фронтендера 😊 хочется кое-что прояснить. На курсе ЯндексПрактикум, нас учили, что макет должен выглядеть чистенько и все интерактивные элементы должны быть в дефолтных состояниях. А все другие состояния показываются в ui-ките. У меня он сверху над макетами прям, немножко совсем ты не доглядел до него. Я кстати не знаю, насколько это правильно, лично мне тоже всегда хочется показать сразу на макете как будут меняться состояния элементов . Кстати если открыть интерактивный прототип, то все это будет меняться , в том числе и бэкгаугд у всплывающих окон. Но за идею как их правильно показывать в макете жирный респект тебе 😊 15:43
Лучше показывать прямо на странице, чтобы верстальщик ничего не искал и сразу видел как ведут себя элементы на странице, а не на белом фоне
@@alexeybychkov_а откуда верстальщик будет знать, что при ховере, что при клике? В ui kit все подписываешь текстом, а тут нет. Вопрос не с целью спора, а узнать, как вы обруливаете такие моменты
Леша, когда то проходила у Вас курс обучения (март 2022 года), а сейчас я прохожу курс в презентабельной онлайн студии, студенты которых очень ценятся на рынке труда. Что я хочу сказать: Вы супер🤩❤!! Как часто я Вас вспоминаю, когда сижу и слушаю гундосящего что-то себе под нос куратора, насколько же нудно и скучно они дают материал😣. Фидбек жду по несколько суток и он обычно в одно предложение!! Я настолько разочарована этими курсами! Вы Лучший👏!! Ваш метод обучения и подача информации настолько легкая и интересная, что получаешь удовольствие занимаясь дизайном!! Вы мой гуру!!
ого, спасибо, очень приятно 💖💖💖
Алексей, а кнопки по всему макету все должны быть одинаковыми? Допускается, например, если на первом экране кнопки крупнее, а на следующих они чуть меньше (скругления, цвет, шрифт одинаковые)?
Знаешь, после некоторого перерыва твои видосы смотреть еще кайфовее) С мыслями о том что "О! Опять что-то интересное у человека, который меня научил фигме!" Ощущения типа как к бабушке приехала, которую люблю, но давно не видела🥰🥰 Как всегда, твои разборы, это бесценный кладезь информации в очень легкоусвояемой форме😊😊
с возвращением)
Спасибо за разборы. Сделай пожалуйста видео процесса твоей работы)
Спасибо за просмотр) есть ролики в плей-листе "как я это нафрилансил"
33:35 - про круг весело спасибо. И про огрызок смешно))
Спасибо за просмотр)
@@alexeybychkov_ всегда пожалуйста, спасибо большое за контент. Продолжай нас обучать с юморком))
Лучший бро
Спасибо
А чувак на всех диванах смешной получился))) Спасибо за разбор!❤
Спасибо за просмотр)
Это точно😂 посмеялась в голос!
Блин, в первый раз я смотрю разбор и ржу с него😆😆Огонь!!!
на канале уже много роликов с разборами, есть что посмотреть) рад, что нравится!
Видел такую деву как-то, которая выложила сайт с некого многим известного трёхдневного курса, только картинки поменяла и пишет что уже стала тут веб дизайнером 😂
Да уж 🙈
прочитала комменты, да, очень хочется хороших референсов, а пока жду разбора своей работы, страшно - аж жуть)
Спасибо за просмотр)
Кажется, нашёл время написать коммент :)
Спасибо!
фил Хуг! Досмотрела до конца, блин, я сейчас буду тоже делать блочный дизайн для сферы образования, с этого сайта лямзить не планировала, но сейчас смотрю и понимаю, что концепция похожа, ну это тренд, говорят))) а с этого сайта, признаюсь, как-то слямзила этот красивый синий цвет))
Фил Хуг)
Отличный разбор! Супер контент! Подскажите пожалуйста, что значит фраза «будстраповская сетка»?
Сетка из библиотеки Бутстрапа
На примере, где маски везде, скорее всего это было сделано не ручками, а через плагин, который экспортирует html страницу в макет в Figma =)
тогда вопрос, а что дизайнер вообще сам сделал)
Спасибо за видео! Единственное, не поняла, под ксероксом имеется в виду повторение одинаковых отступов, стилей и тд?
пожалуйста! да ксерокс = повторять повторы
24:24 Алексей, мастер легко ломается, достаточно выделить всю начинку внутри мастера и в панели слоев просто вытащить объекты за пределы мастера. В макете всё останется на месте, содержимое теперь не является мастером, а пустой слой мастера можно просто удалить. Давно так делала, после ваших слов начала сомневаться в своих воспоминаниях и проверила на актуальной версии фигмы, всё работает. Даже в двух сценариях проверила, когда мастер один, и когда по нему созданы компоненты - даже в этом случае получается способом описанным выше избавиться от мастера.
это вот столько всего сделать надо, чтобы избавиться от мастера и это называется легко?)) с таким успехом можно просто плагин запустить Detach Master и мастер исчезнет
@@alexeybychkov_ два действия - выделить начинку, вынести из слоя. По сути с плагином столько же. Тут уж кому как удобно, но главное, что это всё-таки возможно)
@@alexeybychkov_ а я мастер ломаю копированием. Просто копирую элемент рядышком, потом детач инстанс, мастер удаляю, а на его место ставлю этот скопированный элемент уже без мастера
Алексей, а обязательно ли показывать на странице состояние ховера, если есть ui-kit с разными состояниями элементов?
Конечно! В юайкитах обычно все показывают просто на белом фоне 👀 А макеты далеко не всегда просто белые. А значит и ховеры будут восприниматься совсем по-другому. И чтобы их подружить с оформлением (чтобы сочетались и были хорошо видны) показывать нужно именно в макете, а не отдельно в ю-ките. Иначе дизайнер вроде и сделал ховер, а его не видно. И спрашивается зачем нужен такой ховер.. и такой дизайнер)
Большое спасибо за столь подробный разбор, было очень полезно для меня, как для новичка❤👍 На данный момент собираюсь делать свой первый макет и параллельно смотрю Новый, Подробный, Бесплатный курс по Figma которому год, а вместе с ним еще еще и новейший😏(но там из тех уроков, что были я пока знаю 70-90% инфы). Зато, после просмотра этого видео у меня появился вопрос. Ты говоришь, что нужно делать макет с размером 1920 рх для hd мониторов. А есть у тебя на канале видео с размерами под все необходимые стандартные устройства (пк, мобилка ios, android, планшет и т.д.), чтобы можно было создать штук 5 устройств, а после для разных размеров экрана каждого устройства подгонять размер (т.е. как я понял из видео, мы создаем под пк только экран 1920 и этого хватает, чтобы адаптировать его для всех размеров экранов для пк)? Я видел у тебя такое видео, но актуальны ли еще те размеры о которых ты в нем говорил?🤔🙂 kzhead.info/sun/jN6bpamPfouVmKs/bejne.html
1920 не для hd, a для full hd мониторов. Про сетки есть 3 новых ролика у рамках нового курса по фигме. Там все вопросы отпадут
А эти ролики я так понял еще не вышли?@@alexeybychkov_
уже давно лежат на Бусти. Сначала все видео появляются в раннем доступе на Бусти и только месяца через 2 в ютубе. Сейчас там уже 18 роликов нового курса boosty.to/alexeybychkov
Топчик👍, а сколько всего планируется уроков по новому курсу?@@alexeybychkov_
может 40, может больше получится
У меня вопрос по поводу размера сайта. Если я делаю на ноуте, я обычно использую размер 1440. Какую сетку использовать, если делать размер 1920, чтобы потом у пользователей ноутов не обрезалась информация на сайте?
13, 14, 15 ролики нового курса про фигму как раз про сетки. Там ответы на вообще все вопросы связанные с сетками. Осталось только дождаться их, ну или ну бусти посмотреть, чтобы на пару месяцев не откладывать
Надо делать 1920-мантра😂
да!
подскажите плиз о каком плагине для текста идёт речь в обзоре второй работы?
если оттипографировать текст, то SBOL typograph
привет, на одном из твоих разборов, видел, где ты применяешь плагин, который переводит текст картинки в живой текст (есть и поддержка русского) забыл, что это был за выпуск, можешь пожалуйста наполнить названия плагина?)
привет не знаю что это за чудо плагин) никогда не слышал)
@@alexeybychkov_ типо кидаешь картинку где есть текст, плагин конвертирует текст в шрифт
👍
🎉
Алексей ругается на 1440, а верстальщики даже на свежих курсах по webflow используют преимущественно его для отработки навыков у джунов... как быть( Какой-то "диссонансный когнитив" получается... Иначе говоря - какой контейнер для размещения контента внутри фрейма 1920X1080 делать, чтобы было не пусто, не растянуто, не было пустых отступов на full hd и никто не ругался😁
я всегда говорю про размер файла. А у тебя в вопросе про контейнер по размещению контента. Это же разная ширина. Файл всегда 1920 пх, а ширина контента = ширине сетки. Смотря под какие мониторы заказчику нужно, под 1280? тогда контент где-то около 1200. Если под 1440 мониторы, тогда контент где-то 1360, но размер фрейма макета всегда один и тот же без исключения - 1920
когда посмотришь новые ролики про сетки нового курса по Фигме - все бы вопросы отпадут и больше 1440 никогда делать не будешь)
Спасибо! Просто и понятно. С нетерпением жду новые ролики - нового (же) курса pofigme про сетки! Не могу больше оставаться в лимбе неведения)
сел сразу на стол, на диван и в шкаф
ну)
1920px макет покрывает большинство мониторов, но есть QHD и 4К и т.д., соответственно на них будет обрезатся страница (полоски по краям). Не важно какой ширины макет, главное - контейнер в котором будет располагатся всё содержимое, либо делать резину. Пример: компания Apple выпускает 5К и 6К мониторы, я купил Apple 5К монитор и зашел на их сайт, что бы докупить еще что-то, весь контент находится в контейнере 1024px и отображаеться корректно, то что ниже 1024px (плашнет, мобилка) - делаем адаптив. К вопросу: на таких разрешениях открывают несколько программ, но разве пользователь не может открыть браузер во весь экран?
ты же уже задал этот вопрос, я на него ответил. Ты удалил и пишешь снова
на 5к монитора все вылазят в интернет в 2 браузера, а то и в 3. Если кто-то откроет 1 браузер, ну обрежется у него там что-то по краям и ладно. И то от верстки зависит, может просто отрезинится сайт в разные стороны
@@alexeybychkov_ переформулировал
Филхуг!
Фил Хуг
Леш, объясни в чем проблема людей, которые делают на ноутах не 1920? Я работаю на ноуте и сразу приучился делать 1920
Наверное у них ноуты с разрешением 1440 и их просто раздражает горизонтальный скрол макета. Либо ноут с разрешением 1920, но когда панели включены по бокам макет все равно целиком не видно. Наверное, протестуют
Вот точно, протестуют. Моя подруга протестует таким образом 😂
Привет, Алексей! Вот ты всегда говоришь, что нужно показывать все состояния елементов (ховеры, фокусы кнопкок, полей, пунктов меню...). А если сделать UI-Kit на отдельной странице со всеми компонентами и описаниями? Разработчики тоже смотрят туда и понимают как себя будут вести все элементы дизайна! Тогда не зачем показывать все состояния именно в макете. Также делают многие профессиональные дизайнеры и потом нет никаких проблем с разработкой! Пример тех же дизайн-систем Apple и Material, а также многих других UI-Kit в той же Figma Community! Также можно анимировать макет, експортировать в видео и скинуть разрарботчику. Так как быть тогда?
привет. Погоду можно посмотреть спустившись на улицу к подъезду, а можно просто посмотреть в окно. Каждый выбираем сам как сильно ему не любить свое свободное время. Верстальщик смотрит макет, чтобы оценить объем работы, тогда зачем сначала самому тратить время на отдельную страницу, а потом еще и верстальщика туда отправлять. Если изучая макет он может сразу прикинуть какие ховеры ему показать надо. К тому же показывая ховеры в макете - видно как они вписываются в дизайн
а пример с Apple и Material вообще как-то мимо. Это библиотеки которые используют другие, и естественно они собраны как отдельные ui-киты, ведь нет никаких макетов. А анимировать нужно только то, за что тебе платят. Иначе пока ты готовишь 1 макет, все уже сделают 2 или 3. Учись ценить свое время и быстро работать
@@alexeybychkov_ Благодарю! Дельные советы!
16:00 Сайт под арбитраж... это еще норм я видел и в разы хуже
Спасибо за просмотр)
Что вы имеете ввиду?)
чел 1440 люди часто прибегают к bootsrap по этому 1440 это ок это оптимальная ширина между большими мониторами и не большими и до сих пор выпускают мака примерно такой ширины
+ щас мини киты делают по по мимо ховера есть еще 5 состояний по этому это все смотрят не в макете а в отдельном доке
чел ничто абсолютно ничто не мешает верстать макеты с шириной фона 1920 на бутстрапе. Дизайнеры когда макеты делают, они даже не знают на чем верстаться все это будет
ничто не мешает показать все 5 состояний (которые показывали всегда, а не только сейчас) кнопки в отдельном фрейме (а не в доке, в ворде что ли) и при этом расставить ховеры в макете, ведь так видно вписываются они в дизайн или нет, видно подходят ли соседним элементам
Блястяще =)
😀
Первый чел явно обманщик, как же он смотрит тебя, и делает макеты на 1440...
Ну чет странно как-то да
Кажется я знаю кто украл дизайн сайта с животными 😂
👀
Интересно, за какую дизайнершу идёт речь, что своровала макет с аудиторией 110к подписчиков?
да какая разница
Сегодня слабенькие работы
Ну что прислали
Ну зато Виталик был гармоничен во всём - хуёвая тема, хуёвый дизайн, хуёвое исполнение) Не в обиду, все мы вначале были немного Виталиками )
)) Спасибо за просмотр)