Как подготовить макет к верстке? За что верстальщики не любят дизайнеров? Часть 1
HTML-код
- Опубликовано: 8 дек 2021
- #alexeybychkov #ityoutubersru #webdesign
Верстальщики не могут испортить настроение дизайнерам, а вот дизайнеры..)) Как подготовить макет к верстке? За что верстальщики не любят дизайнеров? Часть 1
Наши чатики в дискорде - / discord
Обучение - alexeybychkov.study/
Мои цитаты -
💰❤️ Поддержать канал:
/ @alexeybychkov_
бусти - boosty.to/alexeybychkov - русский интерфейс, рубли
патреон - / alexeybychkov - английский, доллары
Подглядывать за мной можно тут:
👉 Инстаграм: / alexeybychkov_
👉 Беханс: www.behance.net/alexeybychkov_
👉 Телеграм: t.me/dsgn_tips
👉 Фейсбук: / dsgn.tips
👉 Твитор: / _alexeybychkov
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
Меня зовут Алексей и я веб-дизайнер фрилансер из Минска. Мне в районе 36 лет, женат на прекрасном человеке и у нас две прекрасные дочки. Работаю на лучшей бирже в рунете - 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
Спасибо за вашу активность!
Подписывайтесь на инстаграм instagram.com/alexeybychkov_/
Привет, а табличка крутая с названиями слоев можно позаимствовать?)
Здравствуйте, а какую горячую клавишу вы используете когда смотрите на элементы как под ренгеном?
@@royskopp8215 привет. Ctrl + shift + 3 или shift + O
@@alexeybychkov_ спасибо, получилось)
Я верстальщик, люблю когда в дизайне порядок, лайк отсыпал )
спасибо за лайк))
Хах, не ожидал тебя так быстро здесь увидеть) Учился верстке по твоим урокам (и даже в лс писал один раз), и уже беру заказы, поэтому спасибо тебе) И да, когда дизайн удобный, я всегда говорю об этом заказчику, чтобы тот понял, что он не прогадал и закал дизайн у знающего человека)
Да я тоже верстальщик и поэтому рекомендую дизайнерам слушать его, иначе ад дизайнеров вам обеспечен
Благо я тот человек который учится не только по другим курсам. Но и по этим урокам
Только начинаю карьеру веб дизайнера и, спасибо, за такое отличное видео! Ведь лучше сразу приучать себя к правильному формату, чем потом переучиваться ;) А еще и муж на верстальщика учится! Так и до развода будет не далеко ))) Ты спас одну семью этим видео )))
круто)) спасибо за просмотр и коммент!
как успехи?
Надеюсь, у вас сейчас большие успехи в дизайне! Я совсем недавно начала этим заниматься, было бы классно пообщаться с людьми, которые прошли или проходят тот путь, что я только начинаю
@@liamonor8437 я тоже начала совсем недавно, где- то месяц назад) Каждый день сижу по 10 часов за компом и у меня такая каша в голове, жуууть 🥲
@@marklinn2293как успехи?
Много полезных фишек, о которых сразу и не догадаешься, например, про то, как меню показывать) Спасибо
супер, пожалуйста!
Очень интересно и в веселой манере! Я начинающая в веб-дизайне, поэтому многие ошибки, о которых вы сказали в видео, были для меня неочевидными) Спасибо за полезную информацию 😁
И спасибо что освещаешь такие моменты, ведь можно много в макете наворотить, а кому-то потом разгребать ночами и днями. И получишь потом привет на коврике под дверью)))
100% позвонит и убежит 😄
Твой подход к работе это что-то нереальное. Очень мотивирует и восхищает. Спасибо за ролики. Лайк и хорошего дня)
ну класс)
Круто)) Я только учусь верстать и это дико не удобно - ездить по всей площади Фигмы, чтобы ориентироваться в адаптивном изменении дизайна макета. А еще очень часто встречаются макеты, в которых вообще не понятно, как сверстать ту или иную часть сайта, плясать с бубном или как? Спасибо за видео, поднял настроение) Подписываюсь)
спасибо за просмотр) 😊
Спасибо за ролик! С каждым просмотром где-то появляется один более опытный дизайнер и более счастливый верстальщик 😁
Отличные новости))
Я однажды делала делала многостраничник, и мне заказчик прислал видео от верстальщика, где тот показывал, что и как он сверстал, что как работает. И как же он меня хвалил на протяжении всего видео, я аж растаяла! Хотя когда я передавала макет, то аж коленки дрожали - была готова отгребать, потому что мне казалось, что там все крайне плохо)) Жаль только, что сарафанки так и не произошло)))
может он тебя и рекомендовал, да ты не знаешь) Бывают люди, конечно, сами пишут: мол, можно тебя порекомендую или отправил к тебе знакомого. Но чаще даже и не узнаешь про это
@@alexeybychkov_ Я сомневаюсь, что у верстальщика вообще были мои контакты) Но вообще сарафанка пару раз была, и это так приятно, оказывается))
Кажется это лучшие обучающие видосы, которые я когда либо смотрела)
отличные новости)
Мне нравится, что ты всегда думаешь не только о своем комфорте, но и о других людях, которые будут работать с твои макетом) И учишь этому других! Спасибо за видео))
☀️☺️
очень полезно) коммуникация между верстальщиком и дизайнером - это очень важно, поэтому единый язык общения - наше все
100%!
Видео огонь, все по делу, ни чего лишнего! Сам верстальщик, но иногда не понимаю, как донести дизайнеру что не так с макетом. Теперь есть выход - скидываю ссылку на видео Алексея😀
отличный план)) 😊
Конечно Цэ (только хардкор!), что ещё за СИ 😂 даже представить не могу человека, который так скажет)) Ну и французский в конце шикарен 😄😄
😄🤣
Каким-то извращением кажется говорить Контрол-Си😂
Круто, мало того что обучаешь веб дизайну, так еще и как правильно делать макеты чтоб верстальщики не писали письма с угрозами👍
спасибо за просмотр)
то самое видео, которое поднимет настроение всем верстальщикам! Спасибо огромное за видео, аж душа радуется. Что я только не видел в дизайн макетах, сколько я тратил время на поиск шрифтов, а сколько раз приходилось "играть в дизайнера", когда адаптив был не доработан или же его просто не было.
Дизайнеры, смотрите обязательно Алексея и делайте счастливее своих верстальщиков!
ну класс) будет еще несколько видео из этой серии 🚀
Благодарю тебя за то, что рассказал как расставлять макеты по феншую. Я частенько этим вопросом задавалась, но так как самоучка, то проконсультироваться особо не с кем было. 🤗🤗🤗
спасибо за просмотр!
Это видео облегчает жизнь не только дизайнерам, но и верстальщикам их макетов! Спасибо за полезную информацию👍
спасибо за просмотр!
Как же радует, что я наткнулась на этот канал сразу "на взлёте"😄 Максимум информации, скорость речи и профессионализм - просто вау
супер) спасибо за подписку!
Отправлять шрифт верстальщику такая удобная и очевидная идея, ТЕПЕРЬ 😂
Смешно признаваться, но я даже и не думала о таком до этого ролика, спасибо за полезный ролик!
рад, что полезно!
0:18 100% Именно благодаря тебе в ходе разработки проекта начала заботиться и о верстальщике, чтобы потом и ему было приятно и удобно моими каракулями))
ну класс 😊
Здравствуйте Алексей!
У вас отличный канал и уроки, спасибо за вашу работу!
10:37 (кстати про шрифты) Хотелось бы ещё от вас урок по шрифтам =)
Какие гарнитуры сейчас актуальные и современные (а какие уже устарели и их лучше не использовать), какие сочетаются между собой, какие лучше для заголовков или основного текста, какие лучше подходят под определенные тематики и т.д. ...
привет
спасибо за просмотр) 😊
Важный навык дизайнера - наводить порядок и красоту в макете. Классно, что в самом начале своего пути я посмотрела твое видео. Теперь буду знать и применять на практике. Отличные советы. Спасибо)
Тоже так думаю
Классно, что акцентируешь внимание на заботе о верстальщике 🔥 К сожалению, не все об этом говорят... Спасибо! ❤
🎉🥳
Удивляюсь всегда твоему умению поднимать мне настроение. Какое бы плохое оно не было, но после просмотра то сторис то видео -- всегда повышается 👍💥
О как круто! 🎉
Я верстальщик, бесит когда слои не сгруппированы, когда названия групп или на русском или вообще frame 345 или layer copy copy. А еще сильнее бесит когда иконки в png или когда изображение вписано в дизайн допустим 600х200, вытягиваешь картинку а она 1000х700 (просто перекрыта слоями), и приходится открывать PS подрезать там что-то.
О, спасибо за мнение! Чем больше таких комментов будет, тем лучше 🚀
Я только начинаю изучать дизайн. Под "изображение вписано в дизайн" вы имеете ввиду случай с масками? Когда например контейнер одного размера, а картинка по факту гораздо большего?
@@elenalagoshniak3267 да, именно. Сделать то при верстке по нормальному не проблема, но вот каждый такой случай и любые нюансы в дизайне которые требуют доработки - это задержки, торможение в верстке. Ну и такие верстальщики как я, которые застали верстку из фотошопа без дополнительных тулз, имеют большой скилл в графических редакторах, но как выразился выше - по хорошему верстке должна идти без отвлечений на редакторы. Но со всяким сталкиваться приходится , особенно когда клиент сэкономил на дизайнере :)
@@IlyaKolin то есть в случае с маской дизайнер должен выгрузить фото и загрузить его в макет уже обрезанным?
@@lexiesanders929 в фигме можно кропнуть сразу, если не ошибаюсь
Супер. Хочется уважать труд всех, поэтому хочется сразу делать хорошо. Все подписывать, группировать. Всеже это командная работа
Отличный план)
Контрл цЭ, и никак иначе 😃 про то, как можно показать Поп-апы с помощью пнг, супер удобно, спасибо!
Ну класс)
Леша, спасибо тебе большое за ролики! Фрилансерам, которые не работают в студиях, и многое не знают и дизайн-процессах, твой канал как спасение! Благодарю за крутой контент, ждем следующий выпуск! )))
пожалуйста большое)
невероятно, сколько полезной информации можно узнать за 12 мин
спасибо за просмотр)
Никаких адаптивов далеко от дексопных версий, будем экономить себе и верстальщикам время)) И спасибо за лайфхак по ссылкам!
Спасибо за просмотр)
Лайфхак на лайфхаке, не успеваю записывать даже!!) Спасибо большое за полезную информацию и желание делиться ею. ❤🔥
спасибо за просмотр)
Без некоторых видео я бы точно была головной болью верстальщиков 😅 Хорошо что в курсе по Фигме ты сразу эти моменты подсвечиваешь 💥
спасибо за просмотр)
Уже интересно посмотреть вторую часть!
там фигму нужно дальше обновлять, а потом можно и 2 часть записывать 🚀
Спасибо! Ждем следующие части)
завтра выйдет)
@@alexeybychkov_ Спасибо!) Посмотрел) Очень полезный раздел видео!) Будет очень круто, если раскроете тему правильного дизайна для верстки, максимально ёмко!)
Спасибо! Как всегда актуально) Не первый и не последний раз буду смотреть чтобы в будущем не косячить)
Спасибо за просмотр)
Какой же ты красавец, Алексей....наслаждаюсь...из сердца моего мёд....спасибо огромное, за то, что ты делаешь...
спасибо)) ☀️😊
Спасибо, что учишь работать и делать сразу правильно 😊 после просмотра твоих видео, где-то становится счастливым верстальщик)
Это пожалуйста!
Круто, что рассказываешь про такие важные детали и крутые советы, которые облегчаю жизнь)) Спасибо, что делишься своим опытом и как работать удобно для всех
Это пожалуйста!
Полезное видео, спасибо) жду вторую часть!
спасибо за просмотр)
Вы супер! Очень полезно, всегда хочется сделать четкое и комфортное взаимодействие, чтобы минимализировать проблемы)
спасибо)
хочется, чтобы не стыдно было за свою работу)) спасибо, что приучаешь к порядку!
отличная хотелка!
Когда порядок в макете и самому удобнее работать) Еще и верстальщикам хорошо😉Спасибо, что делишься полезным))
💯пожалуйста!
Спасибо огромнейшее! С нетерпением жду вторую часть🔥
пожалуйста))
Как раз готовлю макет верстальщику, и вот таки нашла один косяк)) Хотя уж казалось, что учла все. Спасибо, что всегда рядом с дельными советами, а Ютуб в любой непонятной ситуации выдаёт нужную рекомендацию 😅
круто) очень рад!
Леха, спасибо за науку
Все законспектировано (давно),
загружено в память и применяется.
Важные и неочевидные моменты практики
Очень годный контент
Молодец
Контрол + Цэ
Однозначно:)
и тебе спасибо)) твои комменты вижу издалека 😄
@@alexeybychkov_ пересмотрел:) спасибо еще раз. все до мелочей рассказываешь. гуд!
Как верстак, отвечаю, все советы мега актуальны)) Иногда приходится работать с ужасным ужасом.
Ну а железо, к слову, и верстакам нужно, так как мы используем всякие сборки (gulp, webpack) для ускорения верстки, и это добро так же прилично кушает проц и оперативку. Хотя, если сюда еще и не оптимизированный макет в figme добавить, то нужно не менее 32гб озу. Я себе, например, докупал 16гб, что бы было 32гб, так как фигма крашилась из-за недостатка озу.
спасибо за подробный коммент)
Спасибо за ролик, за полезности👍 интересны подход по меню и шрифты👋 Жду следующий ролик💯
спасибо за просмотр)
Спасибо большое, что освещаешь для нас эту важную тему - взамодействия с верстальщиками. Мне, например, не сложно будет собрать все макеты в определенном порядке для удобства верстальщика, просто раньше я не знала, как это сделать правильно 😀
Спасибо, что из видео к видео прививаешь нам порядок в слоях, в названиях, в адаптивах. Теперя я уже не могу по-другому😂😂😂
супер, пожалуйста большое!
Полезная информация и отличная подача) Всё как всегда супер🔥🔥🔥
Спасибо)
ну класс) спасибо)
Класс, тема очень актуальна. На пути к идеальным макетам)спасибки
Пожалуйста)
Спасибо за отличную тему! 🔥🔥🔥 Буду ждать вторую часть!!
За порядочек в слоях отдельное спасибо🙏 Потому что смотря твои видео ролики, я зазубрила уже это правило и не могу жить без этого, за что постоянно получаю благодарности от верстальщиков за порядок в слоях, даже было через заказчика!
Всегда с гордостью думаю: это меня Леша научил!!
Спасибо тебе!! 🔥🔥🔥
круто, когда верстальщики благодарят)
Как всегда, спасибо за полезную инфу!!! 👍👍
пожалуйста)
Спасибо, что рассказываешь про такие моменты! :) И спасибо, что поднимаешь настроение))
Спасибо за просмотр)
Здравствуйте Алексей, Ваш канал просто находка. Каждое,даже самое короткое видео, это масса информации. Ещё очень нравится подача, без лишних затягиваний Вы переходите к сути. Только полезная информация, только хардкор!
P.S.: Давно Вас смотрю и часто хотела оставить отзыв, но всегда что-то отвлекало. Ваши видео очень мотивируют и вдохновляют, спасибо Вам за это.
привет. Очень рад! Комментарий -- лучшая благодарность) они помогают каналу развиваться 😊
В видео столько заботы и доброты, что однозначно 👍
спасибо ☀️
Круто, спасибо! Полезно такое знать перед отправкой макета)
Ну класс 🚀
Спасибо! Жду следующие видео =)
супер)
Уже жду вторую часть, первая топ))
Спасибо за просмотр) частей может быть будет много)
обожаю неудачные дубли в конце, спасибо за видео)
😄
Как обычно, благодарочка за полезную информацию! ❤
Спасибо за просмотр)
расстановка постранично а не по размерам экрана это гениально, почему я до этого не додумался раньше)
Теперь будешь быстрее работу работать
Очень интересно и полезно рассматривать макет с точки зрения верстальщика (коим ты хоть и не являешься, но всё же, безусловно, имеешь достаточно богатый опыт, чтобы говорить от их лица). Не хочется, конечно, трепать нервы верстальщикам)) Жду продолжения серии! Спасибо за классный контент :)
с верстальщиками лучше дружить!
Удобство и порядок в слоях и расположении макетов с адаптивами, можно как фишку прописывать. Фишку, на которой можно с экономить на работе верстальщика.
ну а чего нет)) можно!
Обожаю твой вайб и подачу! Спасибо за полезности🖤
Огонь)
спасибо, много полезной инфы всегда!))
пожалуйста!
Очень понравилось твоё видео, Алексей. Все по теме и без воды, особенно понравился лайфхак с png-шкой и с французским🤣🤣🤣...
супер) ☀️
Огромное спасибо за такие видео уроки! Конструктивно и четко! Я специализируюсь в основном на полиграфии и фирмстилях, но прилетела заявка на создание сайта и ваши уроки стали просто спасением! Благодарю за вашу работу!😘
ееее очень рад!
copy as PNG - потрясающая вещь. И в макетах порядок) Спасибо!
пожалуйста)
круто! важная инфа, которую мало кто рассказывает) спасибо за полезный контент
пожалуйста)
Как подготовить макет к верстке? Многие заказчики даже не задумываются о том что его нужно готовить. На фрилансе уже встречал заказы по наведению порядка в слоях, и компонентах, так как верстак сказал "я с этим работать не буду"
ничесе! Ни разу не встречал)
@@alexeybychkov_ вот так, задача была: поместить все иконки в фреймы, навести порядок в слоях, создать и настроить компоненты и варианты, автолайауты.... И ещё что то, не помню
@@ItchefRu фига се 😯 так это и в правду порядок в макете можно как свое преимущество писать
Когда адаптивишь блок, все разрешения стоят рядом: просто переносишь блок за блоком на новый фрейм. Тоже не понимаю, зачем потом менять положение макетов и группировать их по разрешениям (сначала компы, потом планшеты и т.д.). Это жутко неудобно. Лучше всего расставлять по страничкам - от большего разрешения к меньшему🚀
тоже так думаю!
спасибо за видео! куча полезной информации, без воды 🔥🔥🔥
рад, что полезно
Открыла для себя много нового, особенно понравился лайфхак про ссылки на шрифт, спасибо огромное! 💜
супер
Ставить адаптивы рядом с макетом когда-то у тебя подсмотрела в ролике, а так раньше группировала как плохой дизайнер 🙈
вот, хорошо что ролики смотришь))
@@alexeybychkov_ да я уже от стольких плохих привычек избавилась, что не сосчитать)
Спасибо вам большое, Skillbox отдыхает! Выложите файлик с правильными названиями плз. Ваши имеют отношение к БЭМ, о котором все говорят? На днях сдавать первую работу фронтендеру ) Заранее спасибо!
Пожалуйста) выложил в бложиках
Благодарю!
Спасибо , как всегда очень полезная инфа, ёмко и по делу 💯
ну класс)
Ура, спасибо большое за полезную информацию ❤️
Долгожданный ролик и такой полезный! С нетерпением жду следующую часть. Спасибо вам!
спасибо за просмотр)
Очень полезная информация особенно для новичков, которые понятия не имеют как подготавливать макет к вёрстке, а некоторые и вообще не были в курсе, что его нужно подготавливать🙀🔥
рад, что полезно 🎉
Господи, как же давно я ждал этого видео!!!! я ещё не посмотрел видео но радость полные штаны, THANKS VERY MUCHHH ALEXEY BYCHKOV!!!||!|!|!!!
(посмотрел, ЖДУ 2 ЧАСТЬ)
😄 ничесе))
Контрол ЦЭ🦍🦾😁 Полезнейший ролик, спасибо!)
Ну класс 🤟
Спасибо, что посвящаешь в такие моменты) классный ролик))👍👍👍
Спасибо за просмотр)
Спасибочки за ролик🤗 Полезно как всегда)
пожалуйстачки)
Здорово, что ты учишь ещё заботиться и о верстальщиках. Крутой ролик💥
спасибо за просмотр)
Здорово, что ты записал такой ролик! Очень четкие рекомендации. Важно чтобы было не только красиво, но и порядок был и верстальщик свою работу работал удобно)Спасибо
Спасибо за просмотр)
Леша, в очередной раз большое спасибо! Все очень подробно объясняешь и еще так бодро, живо с харизмой! Все записываю, пока смотрю! ❤
🥳
Я уже привыкла попапы показывать на картинке макета, а не просто на его куске) Так удобно, и ничего лишнего заблочивать не надо, чтоб не сдвинулось)
Супер!
Огромное спасибо за ролик👍🏼🙌🏼
Спасибо за просмотр)
Спасибо за видео! Как всегда все супер полезно, информативно и крууто!
спасибо за просмотр)
Леша под конец аж подвис от полезности информации, огон 🔥🔥♥️
😀🎉
Приятное впечатление от просмотра и услышанного. Благодарю Вас за качественный контент и полезный материал. Успехов!
спасибо)
спасибо за то, что делишься своими знаниями! Каждое видео учит чему-то полезному, и всё без воды и в максимально понятной и интересной форме!
Это всегда пожалуйста!
классная идея со ссылкой на шрифт прям в макете в фигме. надо было этот ролик посмотреть до домашки по ал) тогда бы мы не натупили с кастомными шрифтами😁😂
Ага надо было))
спасибо, что учишь думать об удобстве тех, кто на другом конце провода и наглядно демонстрируешь как надо и не надо. Лайк!
Спасибо за просмотр)
Просмотрено, усвоено! Спасибо за полезную информацию, о которой раньше не задумывалась.
пожалуйста!
Очень полезно! Как и все твои ролики! спасибо))
Очень рад!
Спасибо за видео! Наконец-то получила ответ на вопрос, как правильно передать макет на верстку)) Будем заботиться о верстальщиках 👍
Отличные новости!
Ну вот спасибо от всего сердца, столько полезности в одном ролике))) а главное с юмором)
Спасибо за просмотр)