Медиа-запросы в адаптиве или как подготовить макет к верстке? Часть 2
HTML-код
- Опубликовано: 9 июл 2024
- #alexeybychkov #ityoutubersru #webdesign
Верстальщики не могут испортить настроение дизайнерам, а вот дизайнеры..)) Как подготовить макет к верстке? За что верстальщики не любят дизайнеров? Часть 2 На этот раз про медиа-запросы в адаптиве
0:00 - как устроены медиа-запросы
7:26 - смотрим реальные примеры
Наши чатики в дискорде - / 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
Спасибо за вашу активность!
Подписывайтесь в ТикТоке www.tiktok.com/@alexeybychkov_
Наконец-то в 4К видеоролики, спасибо большое! 😊
Как же круто, что ты шаришь не только за дизайн, но и за принципы верстки!
Спасибо за просмотр)
Верстальщики тоже люди!
P/S: На роликах Алексея больше узнаю, чем на платных курсах всевозможных скилбоксах )
очень рад)
Ахахах, жизааааа, это на самом деле так😂👍
Да, курсы найти прямо хорошие сложно, Алексей конечно все что сам применяет в работе делится с нами. Прямо ооочень повезло что такой контент есть.
да, крутяк
я знала, как выглядит код и, как верстать, но никогда не думла, что это настолько взаимовязано, что даже стало самой интересно опробовать верстку
звучит как план
Работаю тим лидом и это те вещи, о которых постоянно говорю ребятам. Особенно пригорает, когда меняют высоту кнопки, было 50, а стало 48 в мобилке, например. Просто скину твой ролик, чтобы не повторяться 1000 раз, спасибо тебе за полезный контент!
спасибо)
Часто в каких-то чатах по UX скидывают ссылки на канал Алексея, что-бы люди смотрели и понимали, что нельзя плодить медиазапросы.
Огонь
Я пришла на твой канал уже после курсов скилбокс, их благодарить можно лишь за то, что я наконец поняла чем мне нравится заниматься, но реальные знания я черпаю у тебя, смотреть их обучающие уроки после твоих без руки на лице невозможно)))) Спасибо за твой труд.
очень рад, что нравится! :)
Алексей бесплатно выдает больше чем некоторые курсы за 100к. Алексей Вы молодец.
нее, ну платный контент у меня тоже есть))
На платные денежка нужна ))) пока только осваиваем профессию. Как заработаю на колбаску вот там и можно подумать о повышении квалификации.
Вот теперь я понимаю, почему ты нам так много внимания уделял про повтор размеров, отступов и т.д на обучении! Как же это важно не только для восприятия, но и для верстальщика! очень полезно!
Вот именно!
Хорошое утро, не просто пролежал 20 минут залипая в Инстаграме, а посмотрел этот классный и информативный видеоролик👍😄
супер)
Верстальщики тоже люди! Даешь свободное время для верстальщиков!
Спасибо за просмотр)
Спасибо большое за твой труд!!! Спасибо, что учишь думать и о верстальщиках. Раньше тоже думала, что каждый раз надо всё уменьшать 😅
Спасибо за просмотр)
Верстальщики тоже люди!
Лёша, так повезло, что ты освещаешь и вопросы верстки, учишь нас делать так, чтобы потом и перед верстальщиками стыдно не было))...Я просто пробовала интересоваться у нашего программиста, всё ли хорошо в макетах, которые я передаю в верстку, может быть есть вещи, которые я делаю неправильно и его это подбешивает, но он такой у нас тихоня, сложно из него вытащить даже пару слов, ему проще сказать, что всё ок)).. Поэтому, спасибо тебе, Лёша большое, что рассказываешь такие полезные вещи👍👍
пожалуйста! дело полезное!
13:20 какой отличный наглядный пример как делать не надо. Это сто процентов надо увидеть всем, потому что по незнанию такого наворотить можно))
💯
Круто! Очень здорово, что показываешь всё на реальных примерах, так информация быстрее усваивается и переспрашивать не надо) спасибо за полезности! 😉
пожалуйста)
Как всегда, ролик наполнен позитивом и полезным контентом, а что еще нужно для счастья!)
Спасибо за просмотр)
С утра пару Ваших видео и день прошел не зря. Верстальщики тоже люди.
О, круто)
Вставки в конце видео - это отдельный вид искусства от Лёши)))
😄
Алексей, тема очень интересная и полезная. Было бы очень здорово увидеть серию видео в принципе о корректном дизайне, который вызывает минимум вопросов у верстальщиков. Особенно актуальна эта тема для дизайнеров, еще не изучивших верстку и постоянно сталкивающихся с "выяснением отношений" с верстальщиками. Одна из самых актуальных тем в принципе на мой взгляд! Ждем новых видео по этой теме!)
Спасибо за просмотр)
Я верстальщик, и я тоже человек! У меня немного опыта в вёрстке, но есть что вспомнить из ужасного.
1) Мне пока не попадались макеты с промежуточными адаптивами. Только десктоп + 320, остальное сама придумай.
2) Замена шрифта на адаптиве (подстава подстав), если так делаете, то предупредите в комментариях в фигме.
3) Пропавший дизайнер. Иногда нужно что-то спросить или попросить изменить в силу объективных причин, а спросить не у кого. В идеале дизайнер проверяет вёрстку, потому что верстаку не всегда понятно, что хотел сказать автор, особенно в плане интерактива.
Короче, мне часто приходится фигму ковырять, поэтому смотрю ваши видосы, Алексей, и слезы счастья вытираю, спасибо!
Спасибо за подробный коммент! рад, что нравится контент
Видос зашёл под попкорн на ура! если бы в универе тоже так интересно и доступно доносили темы, я бы из него не вылазила... А пока не хочется вылезать из мира дизайна в который я погрузилась благодаря тебе! спасибо !
Круто) рад, что нравится!
Верстальщики тоже люди (кто бы мог подумать). Спасибо,что рассказываете о таких важных моментах в работе!
Спасибо за просмотр)
В платных курсах, которые проходила, не было практически никакой информации касательно передачи макета на вёрстку, поэтому в очередной раз спасибо за такой полезный контент! 🔥
Верстальщики тоже люди :)
пожалуйста)
Кстати да, очень жду 3 часть про фотки😍😍😍
И я жду 😅
Алексей, все хорошие дизайнеры из различных чатов часто вас хвалят)). Не попасть на ваш канал невозможно)
Круто) очень рад!
Спасибо! полезная и важная информасьон!! А когда новое видео про картиночки? Ощущение, что жду серию нового интересного сериала)🤣
😀☺️ Наверное ролика через 3-4
@@alexeybychkov_ очень жду и надеюсь ждать осталось недолго, потому что уже 5 роликов вышло😉
Вау! Супер полезное видео, спасибо! Открыла для себя массу полезной информации, теперь буду стараться контролировать медиа-запросы, а не делать как учили "если макет уменьшается, уменьшаем все в нем"
Ничесе, так даже учил кто-то)
Верстальщики тоже люди!!! Спасибо что открыл глаза!🔥
пожалуйста!
Это очень похоже на медвежью услугу: хочешь как лучше, а получится колобок. И вроде старался сделать лучше, а в итоге по незнанию стыдно будет. Спасибо большое, теперь я понимаю как не стоит усложнять жизнь верстальщику.))
Пожалуйста))
Алексей, спасибо огромное за твой труд. Жду с нетерпением следующие видео по этой наболевшей теме!
Спасибо за просмотр)
Ну что сказать, что добавить ко всем дифирамбам, которые тут в отзывах уже есть, ко всем присоединяюсь 🤩Действительно, очень полезная информация, спасибо! 🤗
Очень рад!
Спасибо что осветили этот вопрос, не имея опыта мне было важно начать с самого начала и правильно!
Пожалуйста)
Очень классный ролик, по полочкам четко и быстро про медиазапросы. Спасибо, что объясняешь понятно и нескучно. От тебя узнала про медизапросы и что за этим нужно следить, а не плодить пиксели.
Спасибо за просмотр!
Это обязательно должны знать все дизайнеры!) ну и верстальщики ведь тоже люди))
снова куча полезной инфы, спасибо!
спасибо за просмотр)
Спасибо за ролик! Теперь в адаптивах минимум изменений, чтобы верстальщик не ругался))
супер)
Это должен знать каждый дизайнер)) Полезное видео, спасибо!
тоже так думаю)
Спасибо, Леша! Как всегда все четко и по делу, с юмором.
Будем стараться освобождать время верстальщикам для PS😊
Да! 🎉
Сколько полезной информации, мне прям нравится впитывать все эти знания! спасибо!!!
пожалуйста)
классный ролик!) Получается, чем меньше медиа-запросов, тем больше счастливых верстальщиков😄
именно так!
Очень полезное видео! Больше нигде такому не научат🔥
Как делать адаптивы и чтобы верстальщики на руках носили🤌
Спасибо!
И я так думаю))
Боже мой, сколько инфы в одном видосике...🤤
Ну))
Огонь, позже гляну макет и буду смотреть у себя такие нюансы . Ускоряем не только свою работу, но и другого человека :)
отличный план)
Классная инфа, особенно было мне полезно про отступы, оказывается они тоже могут быть одинаковыми)))
рад, что полезно
Спасибо за видео, ждём следующее)))
спасибо за просмотр)
Благодаря твоим видео про взаимодействие с верстальщиками, появились знания и грамотность как лучше делать и поступать) Спасибо ещё раз))
Думаю завтра новый ролик из этой серии записать
@@alexeybychkov_ Круто!!)) Буду ждать)
усвоила суть медиазапросов, раньше даже не думала о таких мелочах) буду учиться не повторять своих ошибок!
супер!
Я прямо не успеваю за контентом, и это очень круто🔥 Спасибо за качество и позитив!
Пожалуйста))
Спасибо за видео) Не знала раньше, что такое медиазапросы) Теперь буду думать и о верстальщиках, они же тоже люди))
🥳
Полезно! Жду следующую часть!
спасибо за просмотр)
Спасибо за видео. Очень информативно, как всегда)
И тебе спасибо)
Леш, ты как всегда лучший. Спасибо за полезную информацию!
ого, давно не виделись) пожалуйста!
Было интересно, а главное полезно снова рассмотреть дизайн с точки зрения верстальщика. Спасибо за эту серию роликов :) Да и в целом за то, что готовишь для нас разнообразный контент - скучать не приходиться!
это всегда пожалуйста!
Офигенный ролик! Спасибо, Алексей! С нетерпением жду следующее видео из этой серии.
ну класс)
Верстальщики тоже люди. Такой подход к адаптивам и дизайнерам жизнь упрощает
очень рад!
Спасибо, что делишься ценнейшим опытом, до которого можно доходить годами. Твое обучение ускоряет процесс раз в 10! Инфа 100%
этош пожалуйста)
ФилХуг!) Здорово, что теперь есть понимание, как лучше будет и дизайнеру, и верстальщику! Спасибо!
ну класс)
Одобряю видео)) Я для себя делаю макеты и потом по ним же и верстаю) И да, это круто, когда медиа запросов минимум выходит
ну класс!
Как всегда все чётко и по делу, да ещё и с прекрасным чувством юмора, спасибо за видео!))
пожалуйста)
Верстальщики тоже люди))) спасибо тебе! Вот это контент)))Не перестаю восхищаться)))
❤️🥳🎉
Конечно, верстальщики - тоже люди 😄 Спасибо за полезный контент!
пожалуйста!
Очень полезный ролик! Спасибо! Про изображения очень-очень нужен🙏🏻
Очень рад!
Спасибо, Леша, очень полезная инфа, как и всегда!
пожалуйста!
Ланхейт на 2пх 🤣
А если серьезно, то это какое-то вселенское заблуждение, что все макеты надо менять. Я раньше никогда с адаптивами не сталкивалась и тоже так думала. Спасибо, что объясняешь и разрушаешь это заблуждение.
Спасибо за просмотр)
Супер-информация! Я все записала, теперь запомню, что даже все отступы надо проверять )))
Отличный план))
Верстальщики тоже люди! Спасибо, что подумал о нас и о них)
спасибо за просмотр)
Очень полезно! На курсе по вебу, который я заканчивала, вообще не слова про это не говорили. Спасибо, что делишься опытом.
пожалуйста!
Классный ролик!!! Позитивно , просто и понятно. Спасибо!
супер)
про отступы особенно - прямо включаем шапку внимательности и думаем о том, кто тоже вечером хочет отдохнуть
спасибо за просмотр)
Спасибо,Леша! Все очень доступно объяснил!✌
пожалуйста)
Даешь хорошее настроение верстальщику! Леша, спасибо! Утром в Инстаграме кратенько карточки пролистала, сейчас более подробно посмотрела и прослушала - и вот уже полезный материал закрепился на полочках)
спасибо за просмотр)
Класс! Теперь понятно, что такое медиа-запрос)
Супер!
Было интересно! Теперь надо на практике применить)
супер!
да, хотим еще ролик из этой серии роликов!
☀️
Медиа запросы в адаптиве, что и как очень интересная тема, но еще есть одна тема которую не возможно сегодня обойти. Поздравляю тебя с Днем твоего Рождения Алексей!!!! Поздравляю!!! Поздравляю!!! Поздравляю!!! Урааааа!!!
спасибо! ☀️🎉
Спасибо огромное! отличный ролик!!!! Как всегда лучший контент в RUclips!
спасибо) 😊
Спасибо! Пересмотрела этот ролик, многое записала себе, какая же полезная информация! ❤
пожалуйста!
Обожаю ролики от Алексея, полезный и разный контент)
рад, что нравится!
Ещё не посмотрела, но лайк влепила ))) Как будет время, все видео посмотрю)
спасибо))
@@alexeybychkov_ Это тебе спасибо )
благодарю! те самые 20 мин, которые мне были необходимы) жду следующие видео на эту тему! (и не только)
спасибо за просмотр)
Очень полезное видео! Спасибо, как всегда всё понятно объясняешь ещё и с примерами 🙂
Спасибо за просмотр)
В начале пути о таком даже не задумываешься... А ведь и правда так всем удобней, и дизайнерам, и верстальщикам. Спасибо за полезное видео!
рад, что полезно
эта для меня вообще новая информация и все очень подробно,спасибо)!!
Спасибо за просмотр)
Спасибо! Будем беречь нервы верстальщика)
Отличный план!
Круто!!! Благодарю за полезный контент!!!❤
Ну класс
Лучшее, что можно посмотреть утром, чтобы зарядиться и запустить работу мозга. Спасибо за крутой контент.
Ты дизайнер-мечта любого верстальщика и заказчика)). Хорошего дня. Лайк)
спасибо, взаимно))
Верстальщики тоже люди!😁
Спасибо, Леша!
пожалуйста!
Спасибо,много новой информации для себе узнала!
Супер! Пожалуйста!
Просто офигенное и полезнейшее видео ❤❤❤
супер 🎉
Хорошо, когда человек думает не только о себе, но и о дальнейшей работе с его макетом
вот и я так думаю)
Спасибо за познавательное видео на примерах!
Ждем 3-ю часть про изображения )
пожалуйста!
Спасибо тебе большое тебе это видео! Очень круто, что ты помогаешь нам разобраться в теме "корректного" дизайна и взаимоотношений с верстальщиками (они ведь тоже люди). С нетерпением буду ждать больше роликов на эту важную тему!!!
До этого видео никогда не задумывалась о медизапросах. А теперь когда осознала, что любое изменение в адаптивах - это новая строка кода, которую, как ты сказал верстальщику нужно "набарабанить" + "туда-сюда" мое не забыть описать - стараюсь этого избегать.
На практике оказалось это не так трудно. Думаю, что многие дизайнеры поступают так, просто потому что не знают. Спасибо за просвещение 😁
пожалуйста большое)
Спасибо за такой полезный ролик 🤗❤ Ведь многие новички (а может и не только они) даже не представляют что происходит с макетом после передачи на верстку, и как себя там чувствует верстальщик видя весь ужас) А ты грамотно разложил по полочкам как надо делать, и как не надо) 💪
И тебе спасибо! ❤️
жесть, в жизни бы не догадалась до этого, суперская инфа. Пуляю лайки))
спасибо)
Спасибо за советы, классно, что показываешь на реальных примерах, так проще понять и запомнить))
Пожалуйста!
Спасибо за такие полезные советы и наглядные примеры!
пожалуйста!
Огонь! Благодаря вам, проверила свой макет раз 100!
Рад, что полезно!
Отличный ролик 🔥 Круто когда показываешь все на конкретных примерах)
Спасибо за просмотр)
Как всегда информативно и полезно! 👍
очень рад!
Классный позитивный ролик) спасибо
супер
Красавчик! Спасибо за такой контент!
пожалуйста!
Верстальщики тоже люди )))) СПАСИБО! На самом деле, ведь и дизайнеру переносить из основного макета в адаптив, сохраняя, по возможности, размеры и отступы, гораздо проще, чем каждому шрифту менять размер/отступ и т.п Получается уже четверная работа: и дизайнер переделывает, и верстальщик матерится 😁
Да! Делать одинаковые отступы и свойства проще, чем новые отличные выдумывать))