Дизайн лендинга по реальному проекту. UI UX. Стрим #16
ฝัง
- เผยแพร่เมื่อ 28 มิ.ย. 2024
- #alexeybychkov #ityoutubersru #webdesign
В прямом эфире будем делать дизайн лендига по реальному проекту.
0:00 - начало
2:27 - смотрим бриф
3:58 - создаем цветовые стили для проекта
5:25 - как я начинаю работу над проектом
14:07 - создаем элементы сайта
23:25 - заказчик не знает, чего хочет. Что делать?
26:25 - структура готова, начинаем раскрашивать
38:30 - дизайн блока с услугами
43:10 - за каким монитором работаю?
54:00 - смотрим историю версий дизайна
1:01:32 - как подбирал фото для первого блока
1:05:40 - блок с преимуществами
1:10:05 - блок о проверке качества электропроводки
1:15:00 - смотрим блок с отзывами и футер
1:21:00 - лайфхаки по подбору иконок
1:23:45 - дизайн галереи работ
1:25:50 - готовый блок с услугами
1:29:58 - где я беру иконки?
1:31:32 - почему я правлю тексты после копирайтера?
1:38:40 - где посмотреть о моем курсе?
1:40:52 - как я быстро вызываю плагины в фигме?
1:44:57 - как я добавляю градиент на фото?
1:46:49 - еще немного про иконки
1:55:30 - анонс стрима с UX-дизайнером
Доступ к закрытом чату: советы, лайфхаки, ответы на вопросы, ранний доступ к видео и тд:
бусти - boosty.to/alexeybychkov - русский интерфейс, рубли
патреон - / alexeybychkov - английский, доллары
Подглядывать за мной можно тут:
👉 Инстаграм: / alexeybychkov_
👉 Беханс: www.behance.net/alexeybychkov_
👉 Телеграм: t.me/dsgn_tips
👉 Фейсбук: / dsgn.tips
👉 Твитор: / _alexeybychkov
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
Меня зовут Алексей и я веб-дизайнер фрилансер из Минска. Мне в районе 35 лет, женат на прекрасном человеке и у нас чудесная дочка. Работаю на лучшей бирже в рунете - 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
Если было полезно - поддержите лайком! Спасибо, что приходите! ☀️
Доступ к закрытом чату: советы, лайфхаки, ответы на вопросы, ранний доступ к видео и тд:
бусти - boosty.to/alexeybychkov - русский интерфейс, рубли
патреон - www.patreon.com/alexeybychkov - английский, доллары
Класс! Контент, не теряющий актуальность даже через 3 года.
Супер
Спасибо, самое полезное видео по лендингу в Ютубе
Круто)
Как же я благодарна, что в твоих роликах нет агрессивных продаж, все внимание на контенте!🔥🫶🏻
ну класс)
Спасибо большое, что столько всего рассказываешь по делу. Без всякой ерунды про мотивацию, фриланс под пальмой и желания всем подряд продавать свои курсы. Наверное самый полезный канал для дизайнеров))
Спасибо) Рад, что нравится 🚀
Вот, кстати, да. Притомили торгаши.
Алексей, вы такой клевый! Вотпрям жить хочется после ваших видосиков! И как всегда, суперинформативно и полезно! Респект вам и уважууууха!!!
Круто) спасибо!
Кайфовый стрим, блин!
Спасибо за просмотр!
Просто льешь, массу полезной информации.... Благодарю.
Всегда пожалуйста)
Каждый день уже смотрю хотя бы одно твое видео) Бесценный контент. Без воды, так насыщенно. Спасибо за прокачку меня. Просто мой добрый друг уже)
рад, что нравится)
Классный стрим. Очень люблю смотреть за работой других дизайнеров, когда у самой творческий кризис :) Интересна другая логика, другое видение. И вообще. Спасибо за такие стримы :)
Спасибо за просмотр)
пришлось специально зарегистрироваться тут что бы лайки ставить, а не в тихую смотреть))) спасибо большое за уроки))очень круто
Спасибо большое))
полезно - не то слово, я бы сказала, что это потрясающий формат❤
круто!
Благодарю вас за ваш труд! Ваш канал для меня более полезен и интересен, чем курсы дизайна, которые я проплатила! ❤️
очень рад, что нравится)
Спасибо за мастер-класс! Получился хороший урок по редактированию текстов.
супер)
Ну Вот! приятно! нашла человека-блогера идеально объясняющего. все очень жизненно, говорит по сути, подписчиков не обзывает тупыми, все на позитиве - посмотрел и взялся за дело! пАсИба агромнае!
Спасибо за подписку!
Все, нашел все сам у тебя)), спасибо огромное за твои труды!
молодец) пожалуйста!
Кнопка: «Прочитайте все отзывы наших довольных клиентов, которые заказали у нас нашу профессиональную работу высшего качества, которой мы гордимся» ✊
😄👍
отличный обзор отличного проекта
супер
Алексей Батькович ты- классный мужик. Все доходчиво и просто огненно, многое у тебя подчерпнул в дизайне.
спасибо))
Спасибо за стрим- полезно и интересно!
Супер) Рад, что полезно!
Алексей, спасибо за то, что делишься опытом. Всё на высоте!
Вууухууу! Рад, что нравится!
Здорово посмотреть на весь процесс изнутри! Поздравляю с покупкой мониторов! Как всегда полезно и интересно😊
Спасибо за просмотр)
Круто-круто!
спасибо)
Очень здОрово, что рассказываешь не только про дизайн, но и про работу с клиентами, про полезные программы и моменты, которые упрощают работу)
спасибо за просмотр)
Доброе утро! Всегда интересно наблюдать за реальным процессом "сборки" сайта)
привет))
Спасибо большое за ваши труды!
Пожалуйста большое)
Алексей, спасибо за стрим, как всегда нахожу что-то интересное, новое для себя. Отдельное спасибо, что рассказываешь про всякие плюшки, например про иконки в коммьюнити, про полезные программы. Спасибо!
Спасибо за просмотр)
Алексей Вы молодец! Ваши уроки в топе! А главное это все применимо в реале! Спасибо Вам за работу!
Супер) Рад, что нравится!
Каждый раз захожу на канал Алексея и каждый раз нахожу что-то полезное, чего раньше не видела. Удивительно, просто!
отличные новости)
Класнный стрим получился! И макет тоже!
ну класс) спасибо за просмотр!
Спасибо! Как всегда, полезно и интересно)
Супер) Спасибо за просмотр!
Классно спасибо
пожалуйста!
Круто! Никак не могла понять как лучше оформить рабочий процесс. Вот, как раз то, что нужно👍
спасибо за просмотр)
полезный наглядный ролик, спасибо большое, бегу смотреть дальше ролики))) надеюсь вашим глазам уже луче)) у меня была беда с глазами после родов, еле спасли,но год еле жила- и ко всему очень болели глазные яблоки и все плыло - глаза не воспринимали телефон комп. Помогла нутрициология- при этом занималась провалами в анализах и дефицитах глаза пришли в норму достаточно быстро на фоне восстановления всего организма
Спасибо за просмотр)
Классная работа получилась!
Ну класс)
Интересный дизайн получился
Спасибо)
Вы крутой! Всегда учусь по Вашим видео
спасибо!
Классный стрим) 2 часа пролетели очень быстро) очень информативно получилось!
Ну класс) Спасибо за просмотр!
Только закончила смотреть. Мне как новичку было очень много полезных вещей!
спасибо за просмотр)
И без очков хорошо) Классный дизайн получился
Спасибо))
Вот всё встало на свои места. На чужих ошибках учиться всегда приятнее))
круто) спасибо за просмотр!
Всё отлично! Спасибо.
И тебе)
Было бы очень полезно посмотреть, какие вопросы указываются в брифе для сайта.)
Спасибо за видео Алексей!)
Пожалуйста. Как-нибудь обсудим эту тему)
Осторожно! Если будете часто заходить на этот канал и видосики смотреть, а потом еще после этого и кнопки в фигме нажимать, можете нарваться на то, что станете хорошим дизайнером!
есть такое дело)
Спасибо что показываешь на реальных проектах как всё происходит)) Копирайтер здесь конечно постарался 😂
спасибо за просмотр!
Лёха, поздравляю с 30-очкой :)
Вууухууу! Спасибо! Ночью не дождался, а утром уведомление с твоим комментом увидел раньше, чем комп включил :)
Alexey Bychkov: веб-дизайн и фриланс получается первый)
@@nikitalarionov-edmin3163 получается так :)
@@llelya радуюсь за Леху как за себя)
Очень вдохновляющая работа, вроде бы ничего суперпривлекающего внимания и особенного нет но вспоминается фраза «хороший дизайн - дизайн который незаметен» или что-то в этом роде, не помню дословно.. Спасибо за твою работу!🤩🫶
пожалуйста)
Алексей, спасибо за детальный разбор работы.Если бы можно было "Сборка щитов распределительных", заголовок уложился бы в две строки.
Пожалуйста) Да, так было бы лучше!
Удобный макет. Как говорится, я б сверстал)
Супер)
Спасибо за обзор. Лайк!!)
🥳
Спасибо большое
🥳
👍👍👍
Спасибо)
Можно еще попробовать очки для работы за компьютером поносить. Они отражают часть лишних лучей обратно в фигму и глаза не так устают :)
а разве они не искажают цвета?
@@alexeybychkov_ Синий могут искажать - это да
тогда дизайнеру не подойдут
UI kit нужен, если разрабатываешь продукт, для обычных сайтов он действительно не нужен, разве что для того, чтобы состояния элементов показать
про текстовые стили то же самое, я работаю в b2b, поэтому наши продукты могут купить другие клиенты и кастомизировать под себя. само собой у них бывает запрос на замену шрифта, и через стили поменять шрифт во всем проекте дело 1 минуты)
Спасибо за подробный коммент
огонь) было бы интересно, если бы у вас на завершении курса по видео ) было какое нибудь задание ) что бы можно было себя попробовать )
что за курс по видео? У меня курс по вебу есть)
@@alexeybychkov_ извиняюсь, не правильно выразился, по фигме курс :)
@@Oficialquse так полно же заданий - на любой бирже куча проектов - открываешь любой и пробуешь) или конкурсы
@@alexeybychkov_ просто как начинающий, еще не шарю где,что, куда искать )
👍😄
😀
Этот вырезанный руководитель Максим Качан прям как Горец получился )))) Максим Маклауд)))
😀
404-ый лайк!
супер)) спасибо!
Про цвет сеток. Меня розово-красный (по умолчанию который) раздражает . Серый бледноват, а вот голубенький как раз нравиться ) Вот такая вкусовщина )))
спасибо за мнение)
Скриншотер clip2net норм, с лайтшот мучился 2 года.
да у него бывают перепады настроения)
@@alexeybychkov_ но это замедляет работу)
Алексей, спасибо большое за подробный урок! Вы можете, пожалуйста, скинуть бриф, который вы заказчику отправляете (который вы вначале видео показывали)?
спасибо за просмотр) Бриф у меня на сайте в открытом доступе alexeybychkov.com/brief/
@@alexeybychkov_ Спасибо!
Может я и не права, но у меня такое ощущение, что на Behance сидят либо новички, либо профи. Одним интересно в свободное время сделать, что-то эдакое для себя. А другие делают хоть что, но надо выложить, потому что у каждого дизайнера должно быть портфолио. Большая же часть работает и им некогда выкладывать свои работы и лайкать других. ИМХО (как писали в 2000-х )))
тоже так думаю) в крупных компаниях есть отдельные дизайнеры чисто под Беханс)
...и пишут до сих пор)))
Пробую сделать градиент как у вас в хедере, но все равно получается видна четкая граница( что со мной не так?
Границы (метки) градиента должны совпадать с границами фигуры, к которой он применяется. Либо быть меньше, но не больше. Когда вылазят за фигуру - получается резкий край
Я в первые
Спасибо за просмотр)
Какой должна быть высота первого экрана?
Спасибо за контент! Подача радует)
Пожалуйста) Вот тут проводили наглядный эксперимент th-cam.com/video/0Tbr-WT7OeM/w-d-xo.html
23:50 Про триггеры
ага)
@@alexeybychkov_ Там все просто - такая безобидная фраза, но сколько за этой фразой скрыто... Полтора года проработал с таким человеком, ужас... Сохранил таймлайн, как источник великой истины)
А как сделать набор сеток для себя?
В этом видео рассказал как подключить th-cam.com/video/PPyU8Wi_pLA/w-d-xo.html
А тут как сделать: th-cam.com/video/QCcw_Xx4wLo/w-d-xo.html
Привет а какие модели мониторов ты купил? Все три монитора интересно узнать.
привет
Dell AW3420DW
и Dell AW2720HF
@@alexeybychkov_ спасибо
@@user-pt2uz5st7i пожалуйста
А где вы ищите клиентов? И с каким программистом работаете?
Уже прошел тот период, когда я искал клиентов) А работаю вот с кем alexeybychkov.com/team/
Алексей, а почему вы работаете на Windows? Пробовали Mac OS? Гораздо более приятная, шрифты лучше, интерфейс более приятный, нежели кривой Windows.
И не говорите, что у вас еще и Андроид))
не, у меня много лет айфон. А макось - нет, раздражают пропорции и не безрамочные мониторы эпла
Спасибо за эфир. Очень познавательно. И огромное спасибо за ccылку на Liteshote. Очень ускорило работу.
спасибо за просмотр)
Алекс привет, можно попросить у тебя твой шаблон брифа для сайта
для заполнения клиентом информации.
Заранее благодарю!
привет. Можно, а можно сделать себе свою версию)
Сегодня смотрю лендинг - хочу принципы понять.
спасибо за просмотр!
1:32:00
Подскажите, а каким плагином вы поправляете текста (чтобы предлогов в конце строки не было)?
SBOL typograph называется плагин
@@alexeybychkov_ опробую, спасибо! :)
Глаза могут не от Гц монитора уставать, а от ШИМ подсветки. ( тоже Гц но другие)
может, но мониторы обновил и стало хорошо
новые мониторы 240Гц оправдали себя?)
да, перестал так щуриться как раньше
Алексей, привет! А можешь дать примерный шаблон опросника для клиента? Чтобы не забыть ничего важного. Правда я знаю, что есть клиенты которые отказываются его заполнять - типа люди занятые, некогда таким страдать.
тут мой бриф alexeybychkov.com/brief/
@@alexeybychkov_ спасибо! а если заказчик говорит что не будет заполнять и кидает коротенькое тз с посылом "ты дизайнер - ты и думай" - тут только на свой страх и риск брать? :)
@@AnnushkaMoro без ТЗ проекты лучше не начинать)
Это может быть ШИМ-эффект. Нужно искать мониторы без ШИМа вообще. Это старые моники. Возможно глаза реагируют на ШИМ. Я вообще не могу сидеть с современными мониторами.
Возможно)
Алексей, 1:14:43 у вас открыты символы, где их взять ,что за сайт ?спасибо)
плагины из фигмы, вот пост про них instagram.com/p/CUh9cdrjeaD/
Где достать такой же бриф?
Самому сделать?)
1
👀
Таак, вопрос, конечно, не про дизайн, но всё же. Если глаза "две единички", то для чего очки. Может они берегут глаза от компа, а я и не знаю?
Для красоты) это не очки, а просто стеклышки. Ну как часы на руке. Говорят мне в очках лучше. В жизни без очков хожу
@@alexeybychkov_ аа, понятно. Я тоже такие по настроению и под луки ношу. Вам правда идут
Часть два - одизание писайна
Спасибо за просмотр)
Подскажите,пожалуйста, какой программой можно делать такие скриншоты?
да любым скриншотером. Их десятки разных. Lightshot например
Алексей, все шрифты которые представлены на fonts.google.com, они все бесплатные?
большинство бесплатные, нужно на странице шрифта снизу смотреть - там есть блок лицензии
@@alexeybychkov_ Тоесть если там указано Open font License это значит что шрифт бесплатный?
да так
Вот вы копируете текст со стилями,а в него копируете новый текст и новый текст вставляется с теми же стилями,что у старого.
а у меня слетают стили? Может вы какими-то комбинациями клавиш вставляете?
ctrl + V - вставить текст с его стилями
ctrl + shift + V - вставить текст и применить ему стили текстового контейнера, куда он вставляется
@@alexeybychkov_ вот! Спасибо.я через первый вариант вставляла!
не за что)
А где автор находит картинки подобные этом мужику 1:13:00 и всякие другие, для сайта?
Вот подборка бесплатных стоков instagram.com/p/CElzcoFgKJL/
@@alexeybychkov_ Спасибо!🐾🙌
Чего злиться на тех кто пишет всякую фигню, в меня обезьяна в зоопарке пыталась какашкой кинуть, я же не злился на нее, а это посерьезнее будет)))
😅 согласен, серьезнее))
А мобильное приложение будет?
на этом канале нет
На какие мониторы поменяли?
По бокам такие Dell AW2521HF
В центре AW3420DW
@@alexeybychkov_ спасибо
У меня были проблемы если монитор не ips и 100% не хватает какие то витаминов и микроэлементов
вот я и устал мучаться, глаза не выдерживают больше
Что, прям купил картинку на фотостоке?! Ну деревня.. можно ж в фотошопе затереть знаки за 20 минут)
а можно купить за минуту и сэкономить 19 минут жизни :)
@@alexeybychkov_ а вы за свой счет покупаете или заказчик банкет оплачивает?Леша, а сколько времени вы тратите на стоках,чтобы найти фотографии? Посмотрела уже кучу роликов,но нигде вы про это не говорили, а если вы любите экономить время,то и тут наверняка))))
@@b.7212 Привет. За свой. А про количество времени, вчера как раз пост написал и на последнем слайде расписал про 30 минут instagram.com/p/CJRMLL8AMqH/
@@alexeybychkov_ у меня на сегодня план был на вас подписаться и на девочку с иконками)почитаю
вы стоя работаете?
да, где-то год назад начал стоя ролики записывать, стримы проводить, ну и работу чередовать сидя/стоя. Спина больше не болит
@@alexeybychkov_ у меня бы голова стоя не думала😅
@@mykyta.yerynskyi 😄
спасибо за вашу работу
☀️
Спасибо за удовольствие посмотреть стрим в записи, спасибо за интересную информацию
пожалуйста!