UI/UX дизайн. Разбор работ дизайна подписчиков #90 уроки веб-дизайна в Figma
Вставка
- Опубліковано 19 чер 2024
- #alexeybychkov #figma #webdesign
Смотрим работы подписчиков
Карта канала - start.video
Прислать работу на разбор - alexeybychkov
Прислать работу: alexeybychkov
Бусти - boosty.to/alexeybychkov
Файл со скриншотами для насмотренности: boosty.to/alexeybychkov/posts...
UA-cam - / @alexeybychkov_
ТикТок - / alexeybychkov_
Rutube - rutube.ru/channel/24298564/
Дзен - zen.yandex.ru/alexeybychkov
Инстаграм - / alexeybychkov_
Телеграм - t.me/a1exeybychkov
Вконтакте - alexeybychkov
Обучение - alexeybychkov.study/
Мои цитаты - zapi.si/
Мои 404 - www.404.gallery/
Хелп по Фигме - figma.help/
💰❤️ Поддержать канал:
/ @alexeybychkov_
бусти - boosty.to/alexeybychkov - русский интерфейс, рубли
патреон - / alexeybychkov - английский, доллары
0:00 - дизайн сервиса про соц. сети
6:41 - дизайн сайта про создание дизайна сайта
10:55 - интернет-магазин футболок
18:06 - туры по Грузии
27:43 - сайт производителя мебели
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
Меня зовут Алексей и я веб-дизайнер фрилансер из Минска. Мне в районе 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
Как в одном человеке могут быть столько позитива, таланта преподнести информацию и творчества 🔥🔥🔥
🎉🥳🤭
Почему я раньше про вас не знала? Вы на разборах даете больше полезной информации, чем на курсах других школ
рад, что полезно и спасибо за подписку
Спасибо за видос, оч полезно, если кому интересно, то вот несколько выводов:
Несколько выводов
1.Обращай внимание на отступы (сделай красные линии чтобы посмотреть, что твой лендинг (Shift +r ) стоит по ним и вместо кучи пробелов сделай это в настройках
2.Делайте макет 1920 ширины для адаптивов
3.Смотри чтобы на всех кнопках было одинаковое скругление, одинаковая высота и одинаковый стиль, одинаковые отступы
4.Отступы у блоков тоже надо делать одинаковым
5.Внешние отступы от текста до конца блока везде надо делать одинаковыми
6.Когда делаешь тарифы можно заполнить место циферка, некст строка описание и т.д., чтобы полностью заполнить контентер, а не оставлять место
7.Все блоки равнозначные кроме самого первого - самого крупного, другие должны быть чуть меньше. Либо все заголовки одного размера, либо самый крупный крупнее H1, а другие H2, заголовок карточки H3.
8.Когда много текста лучше разделить на заголовок и текст, а не только текст
9.Анимашки на сайте спотифай, не просто там ноты, а нам интересно скролить контент (где-то фон изменился)
10.Надо ли сбоку куча графики летающей или можно сделать более минималистично?
11.От фона до фона одинаковые расстояния
12.От фона до заголовка тоже одинаковое расстояние
13.Бледно серым мы делаем то, что нельзя нажать (бледный цвет - неактивно), нажать можно - сделай активный цвет
14.Между заголовком и своим контентом не ставить девайдер, разделяй соседние блоки
15.Над заголовком всегда должно быть больше, чем под ним
16.Не бахать большой блок из заголовков и контента одним слоем, бахни через авто лайут
+ и удаление не ставь рядом, т.к. можно промахнуться
17.Всё куда можно нажать НЕЛЬЗЯ делать бледным, хотя бы 25%
18.24 - размер подзаголовка, а не кнопки
19.17-20 - обычный текст
20.Не надо ставить двоеточие в заголовке есть у тебя нет их во всём
21.Не борщи со стилями текста
22.В блоках текста надо чтоб в абзаце было минимум 2-3 слова
23.Цветом можно разделить контент, разделяем контрастом
24.Компоненти поля, кнопки, повторки
25.Комментарии плохая кнопка где нужно что-то написать, комментарии к чему? Лучше опишите суть вопроса или предложения
26.В иерархии первого уровня должно быть перечисление блоков
27.Подписывай в лайаутах все с нумерацией, все блоки так же подписывай!
28.Когда у тебя выбрана строчка в печати выдели её, чтобы сразу было понятно где мы печатаем
29.Покажи состояние полей и покажи состояние кнопок
30.Бургер тоже по линии ставим!
31.Абзацы везде должны быть одинаковы
Вау заметки! Огонь)
Как круто, что вышел новый разбор! Всем ставить лайки, смотреть, комментить и радоваться)))
Отличный план)
Класс, класс, класс. Отличный десерт к завтраку подвели. Наливаю кофеек... :)
Супер)
Хвалебный комментарий в поддержку контента) ❤🎉☝️
Спасибо! ❤️
Эти разборы включены в мой Обязательный список на каждый день. Спасибо, Алексей!
Круто) отличный план))
Великолепный юмор, просто спасибо😂
Ну класс)
Спасибище! И работы интересные и комментарии, как всегда полезные и юмор🔥 "Ну ты бабушка! Закутала внучку в два шарфика!" )))))))))
😀
Как всегда интересно смотреть что люди творят, а потом их за это ругают 😂
😀
смешно😆😆
"че ты растерялась" - так по доброму звучит) сразу кажется, что ты молодец то на самом деле)) но последний макет и правда был оч хорош)
Наверное)
Смотреть обзоры сплошное удовольствие, и полезно, и интересно и смешно! Очень приятно, что вы ошибки дизайнеров мягко и уважительно транслируете и смотреть приятно, и не обидно тем, кто получил критику.
Супер, рад, что нравится!
Последняя работа - ваааще агонь!
Алексей, а вам спасибо за подачу. Смотрю - душа радуется, что так интересно и есть таланты, и скупая мужская слеза скатывается, когда вспоминаю свои презентации (профессиональная деградация от РЖД дает о себе знать).
рад, что нравится!
Ого какой подзаряд с утра на целый день) спасибо огромное за обзоры!
пожалуйста!
Крутой разбор! Все ясно и понятно🔥
Супер 🥳
Как всегда, боженька красиво разложил все по полочкам😎😎😎😎
😀
Браво!! Очень познавательно и юмор Ваш настроение поднимает)
Очень рад!
Юбилейный выпуск! Фил Хуг!🎉🎉🎉
Ага) еще 10 и совсе хорошо будет 🎉
Спасибо за разборы. Лёха, ты крут!
Спасибо
Как всегда быстро, полезно и без воды, спасибо)
За карандашик отдельное респект, это прям ультимативная вещь для демонстрации мне кажется
Да главное привыкнуть его использовать в роликах и стримах
Комментарий в поддержку рубрики, люблю ее) Благодарю за работу!
Спасибо!
Большое спасибо!
Ваш подход превосходен, информация надолго запоминается через юмор 😁
отличные новости)
Не жалко❤ кстати про ровеую линию, если зажать шифт будет ровная😊 а если контр то будет самовыравниваться
супер)
Фиолетовая пудра в ней ты и яяя😀
Ох уж этот фиолетовый)
Спасибо, отличные работы и шикарный разбор)
))
Привет, Лёша😉 Прям супер-разбор, спасибо!
пожалуйста!
Самые нескучные разборы у Алексея Бычкова!!!!
🤟🥳🤟
Спасибо за эти разборы🤩 Так круто вместе с тобой обращать внимание на различные нюансы и учиться на "ошибках", плюс ты всё подробно проговариваешь, агонь🔥😁
Это всегда пожалуйста!
как классно, когда есть примеры хороших сайтов!
Да)
класс. спасибо за разбор. очень помгает
рад, что полезно
как всегда харизматичный разбор :)
Спасибо за просмотр)
Спасибо, посмотрела, нашла для себя много полезного
рад, что полезно
обожаю эту рубрику😍 спасибо тебе!
🎉 круто
Alexey+Shift+P спонсор программы - как правильно делать отступы?❤
Ага))
Наливка подъехала 🔥
🎉
Подчерпнул для себя полезное) Спасибо
пожалуйста!
Спасибо большое за твой труд! Это очень помогает и мотивирует! Алексей, Ты Лучший!!!!
Спасибо приятно
Очень ждала ваш обзор. Спасибо за знания
Интересные работы, ребята молодцы
Спасибо за просмотр)
Ждал новый разбор! Спасибо, лучший! Всё по факту!
рад, что нравится!
Классный разбор! Спасибо)
пожалуйста!
Спасибо за разборы! Очень интересно!
Получила удовольствие как от просмотра любимого сериала❤👍🏻
огонь) пожалуйста!
Дизайн ради дизайна - тут прям оч явный пример. Тоже теперь это вижу, раньше бы подумала: ну как же так, человек же придумывал, старался)))
Спасибо за просмотр)
Рубрика "зацени какие сайты" тоже классная🤩 Ждууу))
Ага)
Любимая рубрика👍👍👍
супер)
В очередной раз куча полезной информации 🤟 спасибо большое, утро начинается правильно ❤
Круто 🥳🎉
Алекей, так приятно на фоне птички поют ) Предлагаю тебе использовать такой фон в кажом видео. Умиротворяет )
Недавно наоборот барышня наехала, мол что за фигня, аж голова у нее разболелась 😂
Очень ждали разбор 😀 теперь ждём ещё 😄
😀
Спасибо за ролик. Много классных работ. Ребята молодцы! Ждём новых роликов о крутых дизайнах🔥🔥🔥🔥🔥
Ну класс 🥳
Спасибо за инфу и юмор! И полезно, и интересно
рад, что нравится!
Спасибо за ролик!
Как всегда очень полезно!
рад, что полезно!
спасибо за видеоролик! как всегда все быстро, по делу и понятно, очень интересно слушать и смотреть, жду не дождусь октября!🔥
Быстро время пролетит)
Алексей здравствуйте! Спасибо за ваши видеоуроки ,очень помогают . Сделайте пожалуйста видосик на примере одного из макетов, что и как должен показать дизайнер в дизайне сайта (кнопки,попапы и так далее ).
Привет. Может как-то сделаю
Крутяк, спасибо за разбор, правки в виде картинок и дизайна ради дизайна делала уже после отправки на разбор, мне показалось так красиво 😂
Но вы разложили все по полочкам 👍🏼
рад, что полезно
"UX\UI: Пиксели с характером!"💜
Леша, спасибо за твой труд и юмор!
Благодаря твоим разбором и свой макет поправила*)) А то не знаешь куда бежать, а ту раз и правь на здоровье)
пожалуйста!
Супер! Спасибо. Очень клевые сайты, отличные комментарии к ним. Офигенский заряд творчества и идей с этом роликом и прямо с утра :) ❤
Ну класс!
Спасибо большое за видео!
пожалуйста!
"Ну ты бабушка" 😂😂😂😂
😅
Как всегда суперский разбор, всё понятно, вы можете даже тумбочку научить 😂
Ребят, такой вопрос(кто знает), какой специалист перемещает готовый сайт(дизайн сайта) из Фигмы в другую платформу ? Веб-дизайнер,верстальщик? Кто?
Это называется натяжка. Обычно делает верстальщик. Но если другая платформа - конструктор вроде тильды, то может и сам дизайнер
Супер спасибо вдохновляет
очень рад!
спасибо за разбор (2 работа), правда фамилию неправильно прочитали, но получилось смешно))
прости)
Прям чую, почему людям хочется делать крупные заголовки и тексты. КАжется вот бахнешь 36 болд и сразу нажмут и купят)) если бы я не смотрела разборы полюбас бы делала так же))))
😅
Ждем продолжения рубрики
91 ролик уже записан
как круто, что в конце всегда есть над чем поржать))
Спасибо за просмотр)
Разбор работ супер 🤌🏻
ну класс)
Дякую,дуже крутий розбір)))
Спасибо за просмотр)
карандашик с шифтом делает прямые линии 😀
Супер 😂
Спасибо ❤
пожалуйста!
Голосую за возобновление рубрики "зацени какой сайт"))
ага надо бы
Огонечек как всегда!
супер)
Сплошной позитив😂
🎉
Компонент в компоненте. Комментарий в поддержку канала.
спасибо!
распродажа кнопок🤣это про меня!
😀
Алексей заменяет собой кучу платных курсов.
🤭
Спасибо за разбор! Очень крутой)
Я правильно понимаю, что не обязательно все кнопки и ссылки делать интерактивными через прототипы? Достаточно просто показать ховеры в макете с иконкой руки для верстальщика?
Да верно
Большое спасибо за разбор! Ваши комментарии как всегда 🔥 Алексей, а подскажите пожалуйста, в ролике вы говорите о том, что в слоях нужно подписывать блоки, но в таком случае как? По содержанию? Я просто иногда тоже подписываю их цифрами, а внутри уже расписываю
Да по содержанию в самый раз. Чтобы по названию было понятно о чем блок
Спасибо 🤗
Спасибо за разбор, кое что для себя подчеркнул, например то что блоки есть смысл компонентить, что-бы их можно было легко перемещать вверх или в низ.
Хотелось бы ещё спросить какие обычно размеры в Иерархии используется например начиная с h1 ( заголовок блока, как я понял ) какой у него плюс минус размер?
Нет формул. Хоть 32 пх, хоть 170
Леша, спасибо за ролик! Вопрос по поводу отступов. Допустим, однотонный отступ между блоками 180. А если рядом два блока с разными фонами, тогда мы каждый отступ делаем по 90? Мы же не ставим два отступа по 180?)
тогда оба по 180
🔥🔥🔥
🎉
Лёш, привет) слушай, а как тебе идея, перед тем как делать разбор макета, дать нам просмотреть его пару минут, найти косяки и сравнить потом их с твоим разбором? Это для того,что бы мы могли сами учится находить разные косяки или всякие не правильные штуки?
привет. Так поставь на паузу да разглядывай, потом снимай с паузы. Как по-другому реализовать - хз)
2:00 Алексей, можно пояснение откуда это правило что отступы должны быть _везде_ одинаковые?
Должна быть какая-то система для каждого типа блоков которая должна повторяться во всем макете, окей. Но почему нельзя сделать отступ между блоками одного размера, а внутренний отступ другого? Может я хочу добавить воздуха или наоборот напряжения для привлечения внимания к блоку.
Чтобы не быть голословным, можно пойти на какой-нибидь land-book или landingfolio за примерами хороших лэндингов и убедиться, что нет никакой проблемы в том что отступы у блоков могут разными.
Аналогично с библотеками типа tailwind где в плане отступов уже все вылизано до пикселя: разные отступы допустимы, рамках определенной системы.
потому что тут оба отступа внешние - от края начинки блока, до его границы до соседнего блока, а внешние равнозначные (одинаковые по иерархии) надо делать одинаковыми. И выглядит аккуратно, а не тяп-ляп, и на отвали, когда дизайнер вообще без какой-либо системы фигачит отступы налево и направо (в данном случае вверх и вниз), и верстать удобно одинаковые по иерархии отступы одинаковыми значениями, а не каждый раз новыми. А так-то да, внутренний меньше, чем внешний, все верно, правил ВВ так ии звучит. Но ты спрашиваешь про одно, а показываешь другое. Ты бы хоть звук включил) объясняю же что это отступы внешние, до другого блока. А не внутренние. А ты пишешь про внутренние, которые надо делать меньше внешних. Да надо, но по таймкоду оба отступа - внешние и одинаковые в иерархии. А значит и визуально должны быть одинаковыми.
Так же как и заголовки одного уровня делаем одним размером. Иерархия она везде. И один уровень в иерархии должен быть одинаковым стилем, значением, отступом. А не в каждом блоке каждый раз по новому, особенно когда все это еще и отличается на чуть-чуть. Не потому что у дизайнера логика была, а потому что у него прицел с алиэкспресса
@@alexeybychkov_ Нет, не оба отступа внешние. Голубой блок в примере отдельная сущность и отступ до текста "Получи больше подписчиков..." это внутренний отступ для этого блока.
Если у блока фон на всю ширину - то это равнозначный полноценный блок. А значит и его внешние отступы такие по иерархии же как в соседнем блоке, который тоже от края до края. А вот если бы голубой блок был в виде карточки (фон не от края до края) то тогда и отступы у него уже в иерархии другие. Не было бы внешнего, как у больших полноценных широких блоков. Так как это уже был бы карточный блок (как карточка товара, или карточка новости и то) тогда бы все сложилось как ты хочешь. Его внешний будет меньше, чем внешний у полноценного блока. Ты путаешь отступы отсюда и беда) и да, даже если бы блок был карточным, то все равно это были бы оба отступа внешние (от начинки до границы блока), а не внешний и внутренний. Просто это разная иерархия и разные уровни отступов уже
Они кстати по определению не могут быть внутренним и внешним, ведь относятся к разным блокам в структуре. На границе разных блоков 1 уровня встречаются два внешних отступа. Внутренний и внешний - это когда мы говорим про отступы одного из этих блоков. Т.е. когда пошла вложенность. Снаружи контейнера - внешний. А внутри уже внутренний. А в данном случае ты сравнил два соседних отступа разных блоков) а они уже не могут быть внутренним-внешним, так как блоки разные 😉 так что тут оба внешние. И если бы голубой был карточкой, а не фон от края до края - тоже оба внешние были бы, но уже разные уровни иерархии. Мы же говорим про отступы от начинки до границы блока - это только внешние отступы. Внутренние - это когда уже дальше по уровням проваливаешься
Надеюсь помог разобраться
На бусти кстати лежит большой гайд про вертикальный ритм, выносные элементы и внешние отступы. Правда доступен по подписке boosty.to/alexeybychkov/posts/2cbe8501-be09-4e68-897f-3da4b7e07a4b?share=post_link
29:24 "Отпрвить" вместо отправить
👏
Спасибо за разбор! ❤🍆 )))
пожалуйста!
Почаще бы)
91 уже записан)
@@alexeybychkov_ ооооо топ!))))
А балансировка отступов между блоками (у одного 100, у другого 80 для визуальной ровности) не добавляет головной боли верстальщикам?
Ну им конечно проще верстать всегда один отступ. Но если сверстают два - не развалятся 😅 зато сайт ровнее
Здравствуйте, подскажите пожалуйста! как в фигма сделать чтобы при скроле один блок сначала залип сверху( свойство sticky) а потом при дальнейшем скроле этот блок отлип и тоже прокрутился и исчез?
привет. Насколько я знаю пока не получится отлипнуть, так как нет триггера "скрол". Можно только чтобы другой блок перекрыл, т.е. сверху тоже залил, тогда первый блок скроется
👍👍👍
🎉
32:12 как самка своих усиков???😅😅😅
Сама сома)
Стесняешься, как самка сома своих усиков 🤣🤣🤣🤣🤣🤣 Леша, блин))))))))
😅
Ребят, а что это за сайт Спотифая такой?)
Не открывается?
Здравствуйте, подскажите пожалуйста, дизайнеру подойдет ноут с матовым экраном?
Был выбран ноутбук, устраивают все параметры💥, но экран матовый. Не знаю как поступить
Привет. Не знаю( не работал за матовыми
Ничего страшного в матовом экране нет. Большинство обычных мониторов(не ноутбуков) матовые или полуматовые. Единственный минус матовых экранов - они немного уменьшают контраст, но на общем качестве изображения это никак не сказывается. Самое важное в экране - соответствие стандартам цветопередачи. Для дизайнера цифровой графики для сайтов - 100% sRGB достаточно, расширенные цветовые охваты необходимы для создания макетов для печати. Для работы с 3Д графикой или видео расширенный охват полезен для создания HDR-контента
@@maximdenisyuk Спасибо за ответ!!!!
Приходит ежедневный дайджест с Медиум. Отличить какая картинка к какому блоку - заголовку, без крови из глаз невозможно. Казалось бы, серьёзные ребята которые, на ряду с прочим, постят дисигн, да и за деньги немалые, но нет - много лет прогресса нет.
Да уж)
С карандашом намного лучше👍🏻
И мне нравится!
Простите, а что такое: 'на бусте ходит'?
приходит на стримы на Бусти boosty.to/alexeybychkov
Соцсети пишется слитно.
Хорошо, босс
@@alexeybychkov_ 😂😂😂
Соц.сети - социальные сети , 2 слова
@@shushaa0 Ещё один дебил ;(((
Соцсеть это сложносокращенное слово. Всегда пишется слитно. Точка в этом слове не нужна.
Запчасть, терракт и т.д.
🔥🔥🔥
🥳🎉