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