Адаптив в веб-дизайне: какого размера делать файлы в Фотошопе (Фигме) при разработке макетов
HTML-код
- Опубликовано: 22 июн 2019
- #адаптив #adaptive #вебдизайн
[ПЕРЕЗАЛИВ] Пока в отпуске был переделал еще один популярный видос, в котором «вещал из трубы», и на которой было стыдно давать ссылку из-за звука. А ссылку даю часто, почти всем заказчикам. Надо было собраться с мыслями и переделать. Вот пока я в отпуске - самое подходящее время для обновления :) Так вот: сколько и какой ширины нужно файлов при разработке адаптивного дизайна сайта.
💰❤️ Поддержать канал:
бусти - boosty.to/alexeybychkov - русский интерфейс, рубли
патреон - / alexeybychkov - английский, доллары
Подглядывать за мной можно тут:
👉 Инстаграм: / alexeybychkov_
👉 Беханс: www.behance.net/alexeybychkov_
👉 Телеграм: t.me/dsgn_tips
👉 Фейсбук: / dsgn.tips
👉 Твитор: / _alexeybychkov
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
Меня зовут Алексей и я веб-дизайнер фрилансер из Минска. Мне чуть больше 30 лет, женат на прекрасном человеке и у нас чудесная дочка. Работаю на лучшей бирже в рунете - Weblancer.net. И делаю это хорошо, чего скрывать =) Ведь я люблю свою работу (уже 15 лет) и всех своих заказчиков. На этом канале делюсь опытом, рассказываю про всякие детали работы веб-дизайнером на фрилансе. Тут будет не только теория про веб-дизайн, но и много практики в фигме и фотошопе!
Подробнее обо мне - alexeybychkov.com/about/
15 лет опыта - alexeybychkov.com/experience/
Пишу - alexeybychkov.com/blog/
Дизайню - alexeybychkov.com/cases/sites/
Отзывы - clck.ru/K5Mcc
Мои книги:
«Дизайн и фриланс. Начало» - clck.ru/JE8ku
«Дизайн и фриланс. Новый уровень» - clck.ru/JE8jT
Хелп по Фигме: уроки, видео, советы, фишки - figma.help
Мир фейсов: faces.world/
#figma #фигма #фотошоп #photoshop #дизайн #design #фриланс #freelance
Как непривычно слушать тебя в старой записи))) Спасибо за полезный ролик 🤗
Да уж))
Осторожно! Если будете часто заходить на этот канал и видосики смотреть, а потом еще после этого и кнопки в фигме нажимать, можете нарваться на то, что станете хорошим дизайнером 😏
ага, и такое может случиться)
Я на этом пути
Вот наконец-то понятно стало, откуда все эти размеры, разрешения и про множитель плотности пикселей первый раз услушала)) Спасибо👍
отличные новости)
Ох, сколько цифр! Я так поняла, что главное надо запомнить 5 значений. Про множитель вообще первый раз слышу. Благодарю за информацию: чёткую и наглядную. 💕💕💕💕
пожалуйста)
Старые ролики так контрастируют с новыми в хорошем смысле! Не теряй искру, без твоих полезных видосов на ютубе будет пусто
раньше был унылой улиткой
Когда нужна полезная инфа быстро четко и емко - иду к Леше на канал !))) все просто ))) фил хуг! Спасибо, за твой труд!
еее круто)
заказчики в восторге - теперь они не боятся разговоров про разрешения и адаптивы)) спасибо!
ну класс)
Это огромная работа, и отличное объяснение как визуально так и информативно)) Спасибо большое :о
спасибо за просмотр)
Мой любимый канал, и днём и ночью уже тут, спасибо вам большое)
Вуууухууу! Рад, что нравится!
Как всегда супер полезный контент 😍 Безумно нравится подача и как обычно очень много полезной инфы)
очень рад!
Спасибо вам за ваши уроки! Столько видеоблогов пересмотрела по теме и ваш - самый толковый!
Ну класс) Рад, что нравится!
Алексей, только по Вашим видео поняла, как работают адаптивы! И я теперь всем, кто спрашивает у меня, всегда направляю к Вам. У Вас есть три замечательных видеоролика, которые дают ответы на все вопросы: данное видео "Адаптив в веб-дизайне", видосы "Почему нужно делать 4 файла адаптива вместо 2?" и "Нужно ли делать 320пх?" ❤❤❤ Вы супер! Что бы мы делали без Вас!
Круто) спасибо за рекомендации!
Спасибо за классное видео! Мне очень понравилось как ты оформил видео, как анимация работает. Кайф)) Ну и контент конечно очень полезный. Отсыпала себе в заметочки :)
пожалуйста!
смотрю уже не помню какой раз этот ролик и после каждого просмотра выношу что-то новое для себя, спасибо! 😉🚀
супер)
Это мое самое любимое видео про адаптивы) Наглядно и понятно, спасибо за контент❤
ну класс)
Так наглядно, без визуального шума и емко. Спасибо большое, все на свои места в голове!)
Пожалуйста)
Уже не первый раз возвращаюсь к этому видео, очень помогает с объяснениями для других ⚡️
Спасибо за просмотр)
Спасибо, что помог всё по полочкам разложить, как всегда контент и подача 🔥
супер) пожалуйста!
Очень полезный ролик! Такую информацию не встречала, особенно про множители😅
Всё очень просто и понятно, спасибище!
пожалуйста)
Не первый раз уже смотрю ролик, но снова с большим удовольствием! Ты так круто, красиво и наглядно показал как там что происходит с разрешениями и меняется, это безумно полезное видео 👍 👍
супер) только оно малость устарело) завтра выйдет ролик, в котором расскажу, что 320 больше не нужно. А надо начинать с 360 пх
Всё сложное твоими словами становится лёгким 🤗 Спасибо!
пожалуйста!
С каждым роликом про адаптивы в голове всё лучше укладывается информация. Спасибо за твой труд!
Отличные новости)
Спасибо за понятное видео и доступное объяснение) отличный контент без лишней воды
пожалуйста!
Ааа, так вот как работают эти множители плотности пикселей в фигме. Спасибо, что помог во всём разобраться. Очень понятный ролик без лишней воды👍
рад, что понятно)
Спасибо вам, добрый человек, за такой офигительный разбор материала! Ничего лучше не встречала!
Пожалуйста :) Приходите еще ))
Однозначно!
Алексей, это реально круто! Сценарий, простые эффекты, доступный текст, чтобы даже дятел смог понять! Спасибо, за труд.
Супер) рад, что понравилось!
растешь вместе с нами)) канал -прям 😍😍😍😍образовывай дизайнеров и дальше)) здорово видеть видео и прошлых лет)
Спасибо за просмотр)
❤🔥 я наконец-то поняла про разрешения и макеты и адаптивы, посмотрев твой ролик) благодарю!
рад, что полезно!
спасибо за краткое и очень понятное объяснение про адаптивы, наконец все встало на свои места)
пожалуйста!
Спасибо большое за ролик, Леша!! А про множитель плотности пикселей знала, но вообще не знала даже, как это понятие правильно именуется)
пожалуйста)
Спасибо за полезное видео. Про множитель плотности пикселей особо интересно было. С первого взгляда такой сложный термин, но доходчиво все объяснил.
пожалуйста)
Спасибо за этот небольшой но очень информативный экскурс )
спасибо за просмотр)
Огромное спасибо за материал! Для меня, как новичка в дизайне эти 7 минут невероятно информативны и полезны!
ну класс) пожалуйста!
Про адаптивы - доступно, полезно, огонь🤩. Про МПП вообще первый раз слышу, надо еще поразмыслить, чтоб понять до конца, но в общем смысл уловила. Как обычно, большое спасибо за полезнятину🤗
Спасибо за просмотр)
Спасибо) Видео посмотрела уже раза 3 и каждый раз узнаю что то новое)
круто))
Крутое видео, все разложено по полочкам и разжевано, взяла на заметочку чтоб если что заказчикам кидать, спасибо))
Ну класс)
Классно, что есть такое наглядное объяснение) Спасибо большое!
🎉
Спасибо за понятное объяснение👍 Вопросов не остается🙂
супер
Спасибо, пересмотрю ещё раз и запишу в блокнотик)) То, что искала👍
Супер) спасибо за просмотр!
Супер понятно и супер подробно)) Спасибо)) Всё как по полочкам разложено!)
спасибо за просмотр)
Ух ты, наконец-то эта вся математика с плотностю пикселей, разрешением экрана и подходящим адаптивом начала как-то приобретать смысл в моей голове)) Спасибо!
отличные новости)
Прекрасна візуалізація такої теми, легко і доступно пояснено! Дякую за цінну інфу 😍
ну класс)
Очень подробный материал и визуально красиво и понятно оформлен 😍
ну класс 🚀
Разложил всё по полочкам, просто супер, а главное - наглядно! Спасибо за полезный контент)
пожалуйста!
Спасибо, было очень познавательно и интересно)))) монтаж крутой!🤘
пожалуйста))
Браво! Лучшее объяснение, что я встречала!
Супер) Спасибо за просмотр)
Отличное видео! Очень удобно, что всё показал наглядно 😉
супер
Спасибо, когда-то ты мне очень помог и по полочкам все разложил, какие же все таки нужны адаптивы. Пересматривая твои видео все равно нахожу новую и полезную информацию для себя))
очень рад!
Леша, какая же огромная разница в твоих роликах. Нереальный прогресс! Ты такой молодец, что идешь в ногу со временем, рада, что учусь у тебя!
Ну класс)
Теперь я знаю что такое множитель плотностей пикселей, и как объяснить заказчикам про адаптивы. Спасибо!
спасибо за просмотр!
Все же 5 адаптивов куда лучше, чем 3 👌🏻 иду смотреть дальше, как адаптировать главные страницы 🙌 🤞
ну класс)
Спасибо, что наглядно показал как все растягивается! Стало все понятно :)
супер! Рад, что пригодилось
Спасибо за подробный и понятный разбор! Видео полезное как и для заказчиков, так и для дизайнеров!
Спасибо за просмотр)
Такой формат напоминает мне лекцию в универе, но интересную))
Все просто и понятно, спасибо!)
супер) спасибо за просмотр!
За два года у тебя голос прям изменился :))) как всегда все понятно и полезно, без воды. Спасибо большое :)
Да тот же голос) Просто стоя начал ролики записывать и стримы вести. Интонация совсем другая, когда стоишь
@@alexeybychkov_ ух ты, не знала :)
Спасибо за ролик! Наконец-то кто-то понятно объяснил эту тему! Не представляю что б делала без ваших роликов!!😃😃😃😃
Спасибо за просмотр)
Спасибо за такое подробное объяснение! Все четко и понятно,а еще полезно,впрочем как всегда!годный контент!
ну класс) рад, что нравится!
Я очень долго вообще не могла запомнить, каких размеров должны быть адаптивы. А тут наглядно и доступно ты объяснил от самых истоков. Так прояснилось. Про множитель плотности пискелей раньше не слышала. Спасибо за контент)
рад, что ролик помог!
Классное видео, а главное очень полезное, и слушать очень приятно))
супер)
[ПЕРЕЗАЛИВ] Отпуск, такой отпуск. Оставался один видос, в котором «вещал из трубы», и на которой было стыдно давать ссылку из-за звука. Так вот:
0:26 Раньше была отдельная мобильна версия сайта
1:10 Мобильная версия попросту устарела
2:15 Как вымер монитор 1024 пх
2:53 Делаем адаптивы шириной 1000, 768, 480 и 320 пх
3:40 Как устроены диапазоны адаптива (точки преломления)
4:21 Почему плохо делать только 2 разрешения адаптива: 768 и 320 пх (надо делать 4)
5:08 Какой макет подгрузится на современный смартфон с большущим разрешением?
Круто, когда есть абсолютно логичное обоснование почему лучше так, а не иначе. Спасибо за информацию. Лайк🤩🤩🤩
Супер пожалуйста!
Этот ролик смотрела год назад еще - периодически к нему возвращаюсь)
Супер
Много информации разной смотрела, но про множитель плотности пикселей слышала впервые. Теперь еще на один каверзный вопрос от заказчика можно с легкостью дать ответ. Спасибо!)
Ну класс)
это лучшее что я видела по этой теме, спасибо!
Супер)
Спасибо за мега полезную информацию!🔥 Особенно полезной была инфа про смартфоны с очень высоким разрешением, для меня это всегда было большим вопросом))
Рад, что полезно!
Спасибо за такое быстрое и классное объяснение! Снова заметки пополнила :))
супер)
Алексей, спасибо большое за понятное объяснение про контентную область и ширину сайта!
пожалуйста!
Благодарю за четкие и понятные объяснения)
пожалуйста!
Спасибо за полезный материал! Так подробно, быстро и понятно)
пожалуйста!
Алексей, я так рада, что встретила Вас в интернет-пучине. Вы преподаватель от Бога. Всё простым "бытовым" языком с фишечками, которые знания проводят в мозговое хранилище. Очень благодарю!!!🤗 Стараюсь пересмотреть все Ваши уроки.
спасибо за подписку!
Спасибо) Теперь не будет вопросов о том, какие нужно делать адаптивы!
ееее пожалуйста! 🚀
Классненько! Уметь такие сложные вещи объяснять простым языком - это талант!
🥳 рад, что нравится!
Леша спасибо! Как всегда все просто и доступно!🔥
пожалуйста)
ого, такая важная и полезная информация - буду кидать видео будущим заказчикам, ибо на словах всё то же самое объяснить и показать практически невозможно))
отличный план)
Вау! Супер! очень понятно и подробно! Лайк!
спасибо)
Супер! Все четко и по полочкам разложил и показал, спасибо!
Ну класс
Сколько нового я узнаю за сегодня!) Спасибо за информацию!
пожалуйста!
Помню раньше долго не догоняла про множители пикселей :) Но теперь вроде понятнее, спасибо! 🔥
пожалуйста!
Такой подробный обзор🔥 Круто, спасибо)
пожалуйста))
Спасибо! Впервые узнала про множитель пикселей, теперь адаптивы стали понятнее))
ну класс)
О теперь понятно все с разрешением экрана,и здорово что наглядно все показано)супер
отличные новости!
Спасибо за такой подробный разбор! Можно больше ни чего и не искать, ведь Леша как всегда все рассказал!
пожалйста!
Самое толковое видео по адаптиву!
Ну класс :) Скоро будет еще целая серия видео про адаптив
Еее, класс) Опять добавила заметочек в свою коллекцию!😄👍 Теперь хоть стало понятнее про множитель плотности пикселей) А то раньше прям как-то сильно заумно звучало🤣
Супер)
Спасибо за ролик! Очень полезная и нужная информация ❤
пожалуйста!
Смотрю видео по 3 кругу, чтоб закрепить)) Очень подробно и понятно объяснил)
спасибо за просмотры))
Множитель плотности пикселей - одна из самых ценных вещей, что я узнал недавно) Спасибо, Леша!
супер) пожалуйста!
Спасибо большое за такое хорошее объяснение. Теперь с размерами адаптивов все понятно
Пожалуйста большое!
Спасибо, все сразу становится понятно после твоих видео!))
Спасибо за просмотр)
Алексей огромное спасибо за видео. Все разложил по полочкам
спасибо за просмотр)
Круто, спасибо за полезный контент, теперь осталось разобраться с темой множителя пикселей )
пожалуйста!
Спасибо за видео! Все понятно, хотя и сложно) Смотрю уже наверно раз 20! 😄
Спасибо за пересмотр))
Спасибо за подробное разъяснение! Освободил дизайнерам время для работы, ведь теперь не надо рассказывать это самой!🔥🔥🔥
пожалуйста!
Совсем другой Лёша😁 Такая колоссальная разница в подаче материала, если сравнивать с видео из 2023! Классно, когда прослеживается такой рост🔥
да было дело))
Спасибо! Клёвое видео, всё очень подробно и понятно! 😊
супер)
ну такого качественного обучающего контента я еще не видел!
может подам пример другим и полетим)
какое клевое и наглядное объяснение)) Я теперь поняла с этими экранами)
Супер!
Какой полезный контект, +в копилочку! Спасибо!
супер)
Крутой контент, крутая подача, очень полезно 🚀🚀🚀
еее круто)
Спасибо! полезно и понятно👾 очень помогает разобраться в теме адаптивов
спасибо за просмотр