Медиа-запросы в адаптиве или как подготовить макет к верстке? Часть 2

#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

[@alexeybychkov_]

Спасибо за вашу активность! Подписывайтесь в ТикТоке www.tiktok.com/@alexeybychkov_

[@productdesigner2085]

Наконец-то в 4К видеоролики, спасибо большое! 😊

[@invertedtriangle4301]

Как же круто, что ты шаришь не только за дизайн, но и за принципы верстки!

[@alexeybychkov_]

Спасибо за просмотр)

[@nadiahrebenyuk6230]

Работаю тим лидом и это те вещи, о которых постоянно говорю ребятам. Особенно пригорает, когда меняют высоту кнопки, было 50, а стало 48 в мобилке, например. Просто скину твой ролик, чтобы не повторяться 1000 раз, спасибо тебе за полезный контент!

[@alexeybychkov_]

спасибо)

[@arsyxa93]

Часто в каких-то чатах по UX скидывают ссылки на канал Алексея, что-бы люди смотрели и понимали, что нельзя плодить медиазапросы.

[@user-tu7iz6zr5t]

Огонь

[@2009tttttt]

Верстальщики тоже люди! P/S: На роликах Алексея больше узнаю, чем на платных курсах всевозможных скилбоксах )

[@alexeybychkov_]

очень рад)

[@user-sx7bm5ll5l]

Ахахах, жизааааа, это на самом деле так😂👍

[@arsyxa93]

Да, курсы найти прямо хорошие сложно, Алексей конечно все что сам применяет в работе делится с нами. Прямо ооочень повезло что такой контент есть.

[@user-tu7iz6zr5t]

да, крутяк

[@mmylnoe]

Я пришла на твой канал уже после курсов скилбокс, их благодарить можно лишь за то, что я наконец поняла чем мне нравится заниматься, но реальные знания я черпаю у тебя, смотреть их обучающие уроки после твоих без руки на лице невозможно)))) Спасибо за твой труд.

[@alexeybychkov_]

очень рад, что нравится! :)

[@veronikarevutskaya2362]

Вот теперь я понимаю, почему ты нам так много внимания уделял про повтор размеров, отступов и т.д на обучении! Как же это важно не только для восприятия, но и для верстальщика! очень полезно!

[@alexeybychkov_]

Вот именно!

[@SoulSparkST]

Хорошое утро, не просто пролежал 20 минут залипая в Инстаграме, а посмотрел этот классный и информативный видеоролик👍😄

[@alexeybychkov_]

супер)

[@veronikachernysheva1406]

я знала, как выглядит код и, как верстать, но никогда не думла, что это настолько взаимовязано, что даже стало самой интересно опробовать верстку

[@alexeybychkov_]

звучит как план

[@AnastasiyaMD]

Алексей, спасибо огромное за твой труд. Жду с нетерпением следующие видео по этой наболевшей теме!

[@alexeybychkov_]

Спасибо за просмотр)

[@user-wm7ir6kz6p]

Алексей бесплатно выдает больше чем некоторые курсы за 100к. Алексей Вы молодец.

[@alexeybychkov_]

нее, ну платный контент у меня тоже есть))

[@user-wm7ir6kz6p]

На платные денежка нужна ))) пока только осваиваем профессию. Как заработаю на колбаску вот там и можно подумать о повышении квалификации.

[@aleksand135]

Спасибо большое за твой труд!!! Спасибо, что учишь думать и о верстальщиках. Раньше тоже думала, что каждый раз надо всё уменьшать 😅

[@alexeybychkov_]

Спасибо за просмотр)

[@KaramelkaMega]

Очень классный ролик, по полочкам четко и быстро про медиазапросы. Спасибо, что объясняешь понятно и нескучно. От тебя узнала про медизапросы и что за этим нужно следить, а не плодить пиксели.

[@alexeybychkov_]

Спасибо за просмотр!

[@user-pu3ck2xs7x]

Офигенный ролик! Спасибо, Алексей! С нетерпением жду следующее видео из этой серии.

[@alexeybychkov_]

ну класс)

[@user-id3iw2vo8c]

Круто! Очень здорово, что показываешь всё на реальных примерах, так информация быстрее усваивается и переспрашивать не надо) спасибо за полезности! 😉

[@alexeybychkov_]

пожалуйста)

[@hatredxdd]

Как всегда, ролик наполнен позитивом и полезным контентом, а что еще нужно для счастья!)

[@alexeybychkov_]

Спасибо за просмотр)

[@khachatur9826]

Кстати да, очень жду 3 часть про фотки😍😍😍

[@alexeybychkov_]

И я жду 😅

[@arsyxa93]

С утра пару Ваших видео и день прошел не зря. Верстальщики тоже люди.

[@alexeybychkov_]

О, круто)

[@user-el3rg5zt8v]

Верстальщики тоже люди! Даешь свободное время для верстальщиков!

[@alexeybychkov_]

Спасибо за просмотр)

[@LeonidKaratay]

Просто офигенное и полезнейшее видео ❤❤❤

[@alexeybychkov_]

супер 🎉

[@user-gc2dm1zr2u]

Леш, ты как всегда лучший. Спасибо за полезную информацию!

[@alexeybychkov_]

ого, давно не виделись) пожалуйста!

[@user-xz5zd4nm8m]

Алексей, тема очень интересная и полезная. Было бы очень здорово увидеть серию видео в принципе о корректном дизайне, который вызывает минимум вопросов у верстальщиков. Особенно актуальна эта тема для дизайнеров, еще не изучивших верстку и постоянно сталкивающихся с "выяснением отношений" с верстальщиками. Одна из самых актуальных тем в принципе на мой взгляд! Ждем новых видео по этой теме!)

[@alexeybychkov_]

Спасибо за просмотр)

[@user-lu3ng8gn1t]

В платных курсах, которые проходила, не было практически никакой информации касательно передачи макета на вёрстку, поэтому в очередной раз спасибо за такой полезный контент! 🔥 Верстальщики тоже люди :)

[@alexeybychkov_]

пожалуйста)

[@kate_tsvetkova]

Классная инфа, особенно было мне полезно про отступы, оказывается они тоже могут быть одинаковыми)))

[@alexeybychkov_]

рад, что полезно

[@Soffikko]

Вау! Супер полезное видео, спасибо! Открыла для себя массу полезной информации, теперь буду стараться контролировать медиа-запросы, а не делать как учили "если макет уменьшается, уменьшаем все в нем"

[@alexeybychkov_]

Ничесе, так даже учил кто-то)

[@user-ju1pp3bf9j]

Верстальщики тоже люди (кто бы мог подумать). Спасибо,что рассказываете о таких важных моментах в работе!

[@alexeybychkov_]

Спасибо за просмотр)

[@user-xo2xo3xe1d]

Спасибо! полезная и важная информасьон!! А когда новое видео про картиночки? Ощущение, что жду серию нового интересного сериала)🤣

[@alexeybychkov_]

😀☺️ Наверное ролика через 3-4

[@onemorenastya]

@@alexeybychkov_ очень жду и надеюсь ждать осталось недолго, потому что уже 5 роликов вышло😉

[@user-zl1zm9ss4n]

Спасибо, Леша! Как всегда все четко и по делу, с юмором. Будем стараться освобождать время верстальщикам для PS😊

[@alexeybychkov_]

Да! 🎉

[@user-zp8td9su3o]

Спасибо что осветили этот вопрос, не имея опыта мне было важно начать с самого начала и правильно!

[@alexeybychkov_]

Пожалуйста)

[@user-bv7hc1iq2f]

Это должен знать каждый дизайнер)) Полезное видео, спасибо!

[@alexeybychkov_]

тоже так думаю)

[@Alexandraizotova727]

Очень полезное видео! Больше нигде такому не научат🔥 Как делать адаптивы и чтобы верстальщики на руках носили🤌 Спасибо!

[@alexeybychkov_]

И я так думаю))

[@Anna-jz4ic]

Очень полезно! На курсе по вебу, который я заканчивала, вообще не слова про это не говорили. Спасибо, что делишься опытом.

[@alexeybychkov_]

пожалуйста!

[@user-zc4hr9tw3o]

Верстальщики тоже люди! Лёша, так повезло, что ты освещаешь и вопросы верстки, учишь нас делать так, чтобы потом и перед верстальщиками стыдно не было))...Я просто пробовала интересоваться у нашего программиста, всё ли хорошо в макетах, которые я передаю в верстку, может быть есть вещи, которые я делаю неправильно и его это подбешивает, но он такой у нас тихоня, сложно из него вытащить даже пару слов, ему проще сказать, что всё ок)).. Поэтому, спасибо тебе, Лёша большое, что рассказываешь такие полезные вещи👍👍

[@alexeybychkov_]

пожалуйста! дело полезное!

[@yzefinayanovska8211]

Видос зашёл под попкорн на ура! если бы в универе тоже так интересно и доступно доносили темы, я бы из него не вылазила... А пока не хочется вылезать из мира дизайна в который я погрузилась благодаря тебе! спасибо !

[@alexeybychkov_]

Круто) рад, что нравится!

[@olgaccc5094]

Спасибо огромное! отличный ролик!!!! Как всегда лучший контент в KZbin!

[@alexeybychkov_]

спасибо) 😊

[@anku_onku]

13:20 какой отличный наглядный пример как делать не надо. Это сто процентов надо увидеть всем, потому что по незнанию такого наворотить можно))

[@alexeybychkov_]

💯

[@user-qn2lf1wk7h]

Класс! Теперь понятно, что такое медиа-запрос)

[@alexeybychkov_]

Супер!

[@user-uf2cz2pp1q]

Боже мой, сколько инфы в одном видосике...🤤

[@alexeybychkov_]

Ну))

[@user-wh2wz5dr2y]

Сколько полезной информации, мне прям нравится впитывать все эти знания! спасибо!!!

[@alexeybychkov_]

пожалуйста)

[@user-iq8ij6by5k]

Ну что сказать, что добавить ко всем дифирамбам, которые тут в отзывах уже есть, ко всем присоединяюсь 🤩Действительно, очень полезная информация, спасибо! 🤗

[@alexeybychkov_]

Очень рад!

[@Dilemma_18]

Ещё не посмотрела, но лайк влепила ))) Как будет время, все видео посмотрю)

[@alexeybychkov_]

спасибо))

[@Dilemma_18]

@@alexeybychkov_ Это тебе спасибо )

[@mira_st]

Очень полезные примеры, и круто, что ты рассказываешь про вёрстку - шикарный ролик!

[@alexeybychkov_]

а какой пример больше всего понравился?

[@user-pz3bi1bt3b]

важный информасьон))Класс, как всегда всё самое полезное))

[@alexeybychkov_]

Ну класс)

[@hemulenn]

Классно! Даже и не задумывалась о некоторых нюансах до этого! Спасибо, что показываешь на реальных примерах, потому что даже в начале было не совсем понятно, а на реальных макетах сразу все разложилось по полочкам :)

[@alexeybychkov_]

🥳

[@dianaignatova442]

Спасибо за видео. Очень информативно, как всегда)

[@alexeybychkov_]

И тебе спасибо)

[@user-nl4tb9xk4i]

Классный ролик!!! Позитивно , просто и понятно. Спасибо!

[@alexeybychkov_]

супер)

[@Anna44191]

Полезно! Жду следующую часть!

[@alexeybychkov_]

спасибо за просмотр)

[@alinariabchenko5417]

Спасибо за видео, ждём следующее)))

[@alexeybychkov_]

спасибо за просмотр)

[@dashak6487]

Я сейчас только изучаю веб-дизайн на онлайн курсах и очень рада, что нашла Ваш канал вовремя )) на курсах о таких нюансах не рассказывают, а так в учебных работах теперь буду учитывать все Ваши советы, чтобы уже на автомате все это происходило.

[@alexeybychkov_]

ага, деньги платим там, а учимся здесь)

[@juliaisaeva1229]

Спасибо за видео) Не знала раньше, что такое медиазапросы) Теперь буду думать и о верстальщиках, они же тоже люди))

[@alexeybychkov_]

🥳

[@user-el5rs7uy2w]

Спасибо! Все максимально четко объяснил!

[@alexeybychkov_]

пожалуйста!

[@maximum_12]

Спасибо за познавательное видео на примерах! Ждем 3-ю часть про изображения )

[@alexeybychkov_]

пожалуйста!

[@golovina-wp]

Одобряю видео)) Я для себя делаю макеты и потом по ним же и верстаю) И да, это круто, когда медиа запросов минимум выходит

[@alexeybychkov_]

ну класс!

[@elenakotova1672]

Спасибо за советы, классно, что показываешь на реальных примерах, так проще понять и запомнить))

[@alexeybychkov_]

Пожалуйста!

[@user-zp8td9su3o]

Алексей, все хорошие дизайнеры из различных чатов часто вас хвалят)). Не попасть на ваш канал невозможно)

[@alexeybychkov_]

Круто) очень рад!

[@vg__ru]

Очень полезный ролик! Спасибо! Про изображения очень-очень нужен🙏🏻

[@alexeybychkov_]

Очень рад!

[@its_no_way]

Отличный ролик 🔥 Круто когда показываешь все на конкретных примерах)

[@alexeybychkov_]

Спасибо за просмотр)

[@nastyaartamonova6726]

Спасибо, Леша, очень полезная инфа, как и всегда!

[@alexeybychkov_]

пожалуйста!

[@lythegreat2182]

Я прямо не успеваю за контентом, и это очень круто🔥 Спасибо за качество и позитив!

[@alexeybychkov_]

Пожалуйста))

[@user-qx5wq3ph5m]

Вооо, теперь по полочкам. Не плодить неоправданные изменения. Спасибо ❤

[@alexeybychkov_]

пожалуйста!

[@anku_onku]

Благодаря твоим видео про взаимодействие с верстальщиками, появились знания и грамотность как лучше делать и поступать) Спасибо ещё раз))

[@alexeybychkov_]

Думаю завтра новый ролик из этой серии записать

[@anku_onku]

@@alexeybychkov_ Круто!!)) Буду ждать)

[@JAlianaHoop]

Супер-информация! Я все записала, теперь запомню, что даже все отступы надо проверять )))

[@alexeybychkov_]

Отличный план))

[@ellviira]

усвоила суть медиазапросов, раньше даже не думала о таких мелочах) буду учиться не повторять своих ошибок!

[@alexeybychkov_]

супер!

[@evaevam5072]

Алексей, ты лучший! Любимый дизайнерский канал эвэр) Спасибо за полезности

[@alexeybychkov_]

ееее супер))

[@user-qw8yk9oi8i]

Верстальщики тоже люди!!! Спасибо что открыл глаза!🔥

[@alexeybychkov_]

пожалуйста!

[@kiraalexandrova8411]

жесть, в жизни бы не догадалась до этого, суперская инфа. Пуляю лайки))

[@alexeybychkov_]

спасибо)

[@yurlova_nastya]

Очень полезное видео! Спасибо, как всегда всё понятно объясняешь ещё и с примерами 🙂

[@alexeybychkov_]

Спасибо за просмотр)

[@ogogoeva6787]

После просмотра ещё раз выписывал для себя ещё много всего полезного 💯

[@alexeybychkov_]

Ну класс)

[@irinasuslova8832]

Вставки в конце видео - это отдельный вид искусства от Лёши)))

[@alexeybychkov_]

😄

[@annazlonska5821]

Согласна, изменения должны быть оправданы!

[@alexeybychkov_]

супер)

[@anvordesigner]

Огонь, позже гляну макет и буду смотреть у себя такие нюансы . Ускоряем не только свою работу, но и другого человека :)

[@alexeybychkov_]

отличный план)

[@user-rn7cz2mr4b]

Спасибо за видео, познавательно! Верстальщики то же люди😊

[@alexeybychkov_]

💯

[@loalitaa]

Было интересно, а главное полезно снова рассмотреть дизайн с точки зрения верстальщика. Спасибо за эту серию роликов :) Да и в целом за то, что готовишь для нас разнообразный контент - скучать не приходиться!

[@alexeybychkov_]

это всегда пожалуйста!

[@user-nm6yg3wc2s]

Верстальщики тоже люди))) спасибо тебе! Вот это контент)))Не перестаю восхищаться)))

[@alexeybychkov_]

❤️🥳🎉

[@hannapapova2175]

Спасибо,Леша! Все очень доступно объяснил!✌

[@alexeybychkov_]

пожалуйста)

[@user-fk8rs3ld7d]

эта для меня вообще новая информация и все очень подробно,спасибо)!!

[@alexeybychkov_]

Спасибо за просмотр)

[@ekaterina_th]

Алексей, вы и ваш контент просто космос!

[@alexeybychkov_]

Очень рад!

[@dianakurbatova1461]

да, хотим еще ролик из этой серии роликов!

[@alexeybychkov_]

☀️

[@Lera_tvoiagent]

Спасибо за такое подробное объяснение с наглядными примера🤗 Стало всё на свои места👍🏻

[@alexeybychkov_]

Спасибо за просмотр)

[@markovichmax8853]

Ухххх ты супер полезно)) знать про верстку лишним не будет))

[@alexeybychkov_]

тоже так думаю!

[@olgatereshko8447]

Было интересно! Теперь надо на практике применить)

[@alexeybychkov_]

супер!

[@antoninaevtukhovskaia6168]

спасибо, думаю после ролика и обучения верстальщики тоже скажут спасибо 😁

[@alexeybychkov_]

Заучит как план!

[@LiliaSeleznyova]

Так интересно, спасибо. На прошлых моих курсах нас этому не учили, видимо, не сильно заботились о труде верстальщика.

[@alexeybychkov_]

На многих курсах и о дизайнерах не заботятся 😀

[@lisaboronnikova3134]

Конечно, верстальщики - тоже люди 😄 Спасибо за полезный контент!

[@alexeybychkov_]

пожалуйста!

[@TZharova]

Круто!!! Благодарю за полезный контент!!!❤

[@alexeybychkov_]

Ну класс

[@polly.procenko]

Спасибо! Пересмотрела этот ролик, многое записала себе, какая же полезная информация! ❤

[@alexeybychkov_]

пожалуйста!

[@rimmachobanian02]

будем учиться экономить время верстальщиков)) спасибо! 🚀🚀🔥🔥

[@alexeybychkov_]

Отличный план!

[@obalatsun]

Спасибо, что делишься ценнейшим опытом, до которого можно доходить годами. Твое обучение ускоряет процесс раз в 10! Инфа 100%

[@alexeybychkov_]

этош пожалуйста)

[@user-ij5yn7vg5j]

Спасибо за такие полезные советы и наглядные примеры!

[@alexeybychkov_]

пожалуйста!

[@svetlanaarnold7233]

Обожаю ролики от Алексея, полезный и разный контент)

[@alexeybychkov_]

рад, что нравится!

[@user-lc8if3wm2o]

классный ролик!) Получается, чем меньше медиа-запросов, тем больше счастливых верстальщиков😄

[@alexeybychkov_]

именно так!

[@user-bb5lq5vf3m]

Огонь! Благодаря вам, проверила свой макет раз 100!

[@alexeybychkov_]

Рад, что полезно!

[@QUWERSSERS]

Как всегда все чётко и по делу, да ещё и с прекрасным чувством юмора, спасибо за видео!))

[@alexeybychkov_]

пожалуйста)

[@zassdaniil]

благодарю! те самые 20 мин, которые мне были необходимы) жду следующие видео на эту тему! (и не только)

[@alexeybychkov_]

спасибо за просмотр)

[@anastasiamihodenko1663]

ФилХуг!) Здорово, что теперь есть понимание, как лучше будет и дизайнеру, и верстальщику! Спасибо!

[@alexeybychkov_]

ну класс)

[@WeaverUKy]

Как всегда информативно и полезно! 👍

[@alexeybychkov_]

очень рад!

[@yuliaopolska3991]

Спасибо,много новой информации для себе узнала!

[@alexeybychkov_]

Супер! Пожалуйста!

[@Masloboynikova]

Это обязательно должны знать все дизайнеры!) ну и верстальщики ведь тоже люди)) снова куча полезной инфы, спасибо!

[@alexeybychkov_]

спасибо за просмотр)

[@igortsudin4475]

очень полезный материал, продолжай в том же духе)

[@alexeybychkov_]

☀️

[@user-ww4ye5cj6b]

Полезный ролик, правильно, верстальщики тоже люди)) будем о них заботиться, спасибо за подробное видео, да ещё и с примерами, кайф !!))

[@alexeybychkov_]

ну класс)

[@user-kj3nd6km9m]

Очень полезная информация, спасибо за такой контент!

[@alexeybychkov_]

супер