Адаптив в веб-дизайне: какого размера делать файлы в Фотошопе (Фигме) при разработке макетов

Поділитися
Вставка
  • Опубліковано 21 вер 2024
  • #адаптив #adaptive #вебдизайн
    [ПЕРЕЗАЛИВ] Пока в отпуске был переделал еще один популярный видос, в котором «вещал из трубы», и на которой было стыдно давать ссылку из-за звука. А ссылку даю часто, почти всем заказчикам. Надо было собраться с мыслями и переделать. Вот пока я в отпуске - самое подходящее время для обновления :) Так вот: сколько и какой ширины нужно файлов при разработке адаптивного дизайна сайта.
    💰❤️ Поддержать канал:
    бусти - boosty.to/alex... - русский интерфейс, рубли
    патреон - / alexeybychkov - английский, доллары
    Подглядывать за мной можно тут:
    👉 Инстаграм: / alexeybychkov_
    👉 Беханс: www.behance.ne...
    👉 Телеграм: t.me/dsgn_tips
    👉 Фейсбук: / dsgn.tips
    👉 Твитор: / _alexeybychkov
    •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
    Меня зовут Алексей и я веб-дизайнер фрилансер из Минска. Мне чуть больше 30 лет, женат на прекрасном человеке и у нас чудесная дочка. Работаю на лучшей бирже в рунете - Weblancer.net. И делаю это хорошо, чего скрывать =) Ведь я люблю свою работу (уже 15 лет) и всех своих заказчиков. На этом канале делюсь опытом, рассказываю про всякие детали работы веб-дизайнером на фрилансе. Тут будет не только теория про веб-дизайн, но и много практики в фигме и фотошопе!
    Подробнее обо мне - alexeybychkov....
    15 лет опыта - alexeybychkov....
    Пишу - alexeybychkov....
    Дизайню - alexeybychkov....
    Отзывы - clck.ru/K5Mcc
    Мои книги:
    «Дизайн и фриланс. Начало» - clck.ru/JE8ku
    «Дизайн и фриланс. Новый уровень» - clck.ru/JE8jT
    Хелп по Фигме: уроки, видео, советы, фишки - figma.help
    Мир фейсов: faces.world/
    #figma #фигма #фотошоп #photoshop #дизайн #design #фриланс #freelance

КОМЕНТАРІ • 793

  • @anku_onku
    @anku_onku 2 роки тому +7

    Как непривычно слушать тебя в старой записи))) Спасибо за полезный ролик 🤗

  • @iraerin
    @iraerin 2 роки тому +1

    Прекрасна візуалізація такої теми, легко і доступно пояснено! Дякую за цінну інфу 😍

  • @annamozgovaya104
    @annamozgovaya104 Рік тому +6

    Вот наконец-то понятно стало, откуда все эти размеры, разрешения и про множитель плотности пикселей первый раз услушала)) Спасибо👍

  • @Poetich77
    @Poetich77 Рік тому +10

    Старые ролики так контрастируют с новыми в хорошем смысле! Не теряй искру, без твоих полезных видосов на ютубе будет пусто

    • @alexeybychkov_
      @alexeybychkov_  Рік тому +3

      раньше был унылой улиткой

  • @marochka007
    @marochka007 5 років тому +66

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

    • @alexeybychkov_
      @alexeybychkov_  5 років тому +7

      Пожалуйста :) Приходите еще ))

    • @bibimoi_ru
      @bibimoi_ru Рік тому

      Однозначно!

  • @natalyaevstratova
    @natalyaevstratova 2 роки тому +5

    Ох, сколько цифр! Я так поняла, что главное надо запомнить 5 значений. Про множитель вообще первый раз слышу. Благодарю за информацию: чёткую и наглядную. 💕💕💕💕

  • @ЕкатеринаБаранова-е3и

    Спасибо! Впервые узнала про множитель пикселей, теперь адаптивы стали понятнее))

  • @velocatcher
    @velocatcher 2 роки тому +2

    Спасибоогромное! Пора ролик обновлять на 360 :)

  • @marinaviktorova4767
    @marinaviktorova4767 2 роки тому +1

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

  • @ЮлияЯкубюк-п1з
    @ЮлияЯкубюк-п1з 2 роки тому +1

    Теперь я знаю что такое множитель плотностей пикселей, и как объяснить заказчикам про адаптивы. Спасибо!

  • @vadim_yakushenko
    @vadim_yakushenko 2 роки тому +2

    заказчики в восторге - теперь они не боятся разговоров про разрешения и адаптивы)) спасибо!

  • @nadyavalin
    @nadyavalin Рік тому +1

    Алексей, только по Вашим видео поняла, как работают адаптивы! И я теперь всем, кто спрашивает у меня, всегда направляю к Вам. У Вас есть три замечательных видеоролика, которые дают ответы на все вопросы: данное видео "Адаптив в веб-дизайне", видосы "Почему нужно делать 4 файла адаптива вместо 2?" и "Нужно ли делать 320пх?" ❤❤❤ Вы супер! Что бы мы делали без Вас!

    • @alexeybychkov_
      @alexeybychkov_  Рік тому +2

      Круто) спасибо за рекомендации!

  • @ellviira
    @ellviira 2 роки тому +1

    ого, такая важная и полезная информация - буду кидать видео будущим заказчикам, ибо на словах всё то же самое объяснить и показать практически невозможно))

  • @KaramelkaMega
    @KaramelkaMega 2 роки тому

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

  • @anastasiiya3674
    @anastasiiya3674 2 роки тому +3

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

  • @TheAlenaVolkova
    @TheAlenaVolkova Рік тому

    Первый раз услышала о коэффициете множителя пикселей. Благодаря видео прояснилось в голове что такое все эти разрешения и диапазоны. Спасибо большое за полезную информацию!

  • @icurly18
    @icurly18 3 роки тому +5

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

    • @alexeybychkov_
      @alexeybychkov_  3 роки тому +1

      круто)) большое пожалуйста)

    • @РодионГолованов-щ7е
      @РодионГолованов-щ7е 3 роки тому +2

      О, привет! А я тебя знаю (с)

    • @АлександрМинаев-е3п
      @АлександрМинаев-е3п 3 роки тому +1

      Как ты можешь заказы брать, если подобных вещей не знаешь.

    • @РодионГолованов-щ7е
      @РодионГолованов-щ7е 3 роки тому +5

      @@АлександрМинаев-е3п Ну кто-то только видосики смотрит и по факту годами сидит без работы, т.к. очкует начать, т.к. еще "не все знает".
      А кто-то сразу начинает и добирает навыки в процессе
      Я тоже за второй вариант. Пока работать не начинаешь - хуле толку с теории.

      Опыт приходит через шишки, правки и практику.
      Чего то не знать - не стыдно. Стыдно ничему не учиться и нихрена не делать)

    • @yulia9274
      @yulia9274 2 роки тому +1

      Классно, что не побоялась. На практике все знания лучше усваиваются)

  • @myrmeladonron391
    @myrmeladonron391 4 роки тому +6

    Алексей, это реально круто! Сценарий, простые эффекты, доступный текст, чтобы даже дятел смог понять! Спасибо, за труд.

    • @alexeybychkov_
      @alexeybychkov_  4 роки тому +3

      Супер) рад, что понравилось!

  • @alexeybychkov_
    @alexeybychkov_  5 років тому +22

    [ПЕРЕЗАЛИВ] Отпуск, такой отпуск. Оставался один видос, в котором «вещал из трубы», и на которой было стыдно давать ссылку из-за звука. Так вот:
    0:26 Раньше была отдельная мобильна версия сайта
    1:10 Мобильная версия попросту устарела
    2:15 Как вымер монитор 1024 пх
    2:53 Делаем адаптивы шириной 1000, 768, 480 и 320 пх
    3:40 Как устроены диапазоны адаптива (точки преломления)
    4:21 Почему плохо делать только 2 разрешения адаптива: 768 и 320 пх (надо делать 4)
    5:08 Какой макет подгрузится на современный смартфон с большущим разрешением?

  • @katerinamikhaylova4964
    @katerinamikhaylova4964 Рік тому +1

    Спасибо большое за ролик, Леша!! А про множитель плотности пикселей знала, но вообще не знала даже, как это понятие правильно именуется)

  • @taivanskaya
    @taivanskaya 2 роки тому +2

    Спасибо за полезное видео. Про множитель плотности пикселей особо интересно было. С первого взгляда такой сложный термин, но доходчиво все объяснил.

  • @ogogoeva6787
    @ogogoeva6787 2 роки тому +2

    Уже не первый раз возвращаюсь к этому видео, очень помогает с объяснениями для других ⚡️

  • @olgaya-ud5ps
    @olgaya-ud5ps Рік тому

    Алексей, спасибо большое за понятное объяснение про контентную область и ширину сайта!

  • @obalatsun
    @obalatsun 2 роки тому +23

    Осторожно! Если будете часто заходить на этот канал и видосики смотреть, а потом еще после этого и кнопки в фигме нажимать, можете нарваться на то, что станете хорошим дизайнером 😏

    • @alexeybychkov_
      @alexeybychkov_  2 роки тому +5

      ага, и такое может случиться)

    • @bibimoi_ru
      @bibimoi_ru Рік тому +1

      Я на этом пути

  • @ОльгаЗенькович-я7ж
    @ОльгаЗенькович-я7ж 2 роки тому +1

    Спасибо большое за такое хорошее объяснение. Теперь с размерами адаптивов все понятно

  • @alisaprokofyeva8361
    @alisaprokofyeva8361 2 роки тому +3

    Так наглядно, без визуального шума и емко. Спасибо большое, все на свои места в голове!)

  • @userinaxue
    @userinaxue 2 роки тому +2

    Ааа, так вот как работают эти множители плотности пикселей в фигме. Спасибо, что помог во всём разобраться. Очень понятный ролик без лишней воды👍

  • @tetianafrolova505
    @tetianafrolova505 2 роки тому +1

    Спасибо, теперь знаю как объяснять свои будущим заказчикам)

  • @yuliyapershina825
    @yuliyapershina825 2 роки тому +1

    Спасибо, очень полезное видео, теперь понятно как объяснить заказчику))

  • @ViktoriiaLutsyk
    @ViktoriiaLutsyk 2 роки тому +3

    Все же 5 адаптивов куда лучше, чем 3 👌🏻 иду смотреть дальше, как адаптировать главные страницы 🙌 🤞

  • @Juliya_dzh
    @Juliya_dzh Рік тому

    ❤‍🔥 я наконец-то поняла про разрешения и макеты и адаптивы, посмотрев твой ролик) благодарю!

  • @obalatsun
    @obalatsun 2 роки тому +1

    Вот как для чайников прям инфа, хоть я не совсем чайник, спасибооо))

  • @Татьяна-ю1р2м
    @Татьяна-ю1р2м 2 роки тому +4

    Спасибо за этот небольшой но очень информативный экскурс )

  • @_vitik_
    @_vitik_ 2 роки тому +2

    Очень полезный ролик! Такую информацию не встречала, особенно про множители😅
    Всё очень просто и понятно, спасибище!

  • @meo_me_ira
    @meo_me_ira Рік тому +1

    Супер! Все четко и по полочкам разложил и показал, спасибо!

  • @Lady7Rain
    @Lady7Rain Рік тому +1

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

  • @ИнгаКривоблоцкая

    О теперь понятно все с разрешением экрана,и здорово что наглядно все показано)супер

  • @alinafrolkina5832
    @alinafrolkina5832 2 роки тому +1

    По твоим видео легко можно набрать уверенную базу знаний!

  • @magadan2310
    @magadan2310 Рік тому

    Супер! Всё понятно и главное наглядно, не то что мои школьные уроки по химии. Там всё на пальцах объясняли)

  • @ilmira8019
    @ilmira8019 2 роки тому +4

    Смотрю видео по 3 кругу, чтоб закрепить)) Очень подробно и понятно объяснил)

    • @alexeybychkov_
      @alexeybychkov_  2 роки тому +3

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

  • @valeriiashcherbina1436
    @valeriiashcherbina1436 2 роки тому +2

    Такой формат напоминает мне лекцию в универе, но интересную))
    Все просто и понятно, спасибо!)

    • @alexeybychkov_
      @alexeybychkov_  2 роки тому +2

      супер) спасибо за просмотр!

  • @innasapegina7068
    @innasapegina7068 2 роки тому +1

    Теперь буду ссылку на твой ролик кидать заказчикам!🔥

  • @rimmachobanian02
    @rimmachobanian02 2 роки тому +2

    смотрю уже не помню какой раз этот ролик и после каждого просмотра выношу что-то новое для себя, спасибо! 😉🚀

  • @Lera_tvoiagent
    @Lera_tvoiagent Рік тому +1

    Совсем другой Лёша😁 Такая колоссальная разница в подаче материала, если сравнивать с видео из 2023! Классно, когда прослеживается такой рост🔥

  • @ВикторияЧернякова-п8ф

    Мой любимый канал, и днём и ночью уже тут, спасибо вам большое)

    • @alexeybychkov_
      @alexeybychkov_  4 роки тому +3

      Вуууухууу! Рад, что нравится!

  • @user-ic7uy7we5u
    @user-ic7uy7we5u 2 роки тому +2

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

  • @nikitalarionov-edmin3163
    @nikitalarionov-edmin3163 2 роки тому +1

    Уже не привычно видеть эту заставку криповую у тебя))

  • @irinalinuza6197
    @irinalinuza6197 2 роки тому +1

    это лучшее что я видела по этой теме, спасибо!

  • @hey_designer
    @hey_designer Рік тому

    ШОб я делала без вашего канала! Спасибо за такие грамотные и качественные разборы :)

  • @Татьяна-ю1р2м
    @Татьяна-ю1р2м Рік тому +1

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

  • @irinatostanovskaya3717
    @irinatostanovskaya3717 2 роки тому +2

    Алексей, я так рада, что встретила Вас в интернет-пучине. Вы преподаватель от Бога. Всё простым "бытовым" языком с фишечками, которые знания проводят в мозговое хранилище. Очень благодарю!!!🤗 Стараюсь пересмотреть все Ваши уроки.

  • @EvgeniaKrivonosova
    @EvgeniaKrivonosova 2 роки тому +1

    Самое понятное видео про адаптивы! Любые вопросы отпадут моментально 🔥

  • @plrchk
    @plrchk 2 роки тому +2

    Это мое самое любимое видео про адаптивы) Наглядно и понятно, спасибо за контент❤

  • @wayvector
    @wayvector 2 роки тому

    какое клевое и наглядное объяснение)) Я теперь поняла с этими экранами)

  • @olgasemenova1960
    @olgasemenova1960 10 місяців тому +1

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

  • @julalll
    @julalll Рік тому

    Классно, что есть такое наглядное объяснение) Спасибо большое!

  • @МарияБутримова-е2е
    @МарияБутримова-е2е 2 роки тому +2

    спасибо за краткое и очень понятное объяснение про адаптивы, наконец все встало на свои места)

  • @АннаДанчук-д9в
    @АннаДанчук-д9в 2 роки тому +1

    Пару раз посмотрела чтобы хорошенько все запомнить!Дякую!

  • @helena_selena
    @helena_selena 2 роки тому +1

    Спасибо за понятное видео и доступное объяснение) отличный контент без лишней воды

  • @Anna-hi4dk
    @Anna-hi4dk 2 роки тому +2

    Много информации разной смотрела, но про множитель плотности пикселей слышала впервые. Теперь еще на один каверзный вопрос от заказчика можно с легкостью дать ответ. Спасибо!)

  • @ДарьяВасилевич
    @ДарьяВасилевич 2 роки тому +1

    Спасибо за ролик! Теперь знаю, что говорить заказчику, если спросят про смартфоны с огромным разрешением экрана и не только

  • @fashionhurma
    @fashionhurma Рік тому +1

    Этот ролик смотрела год назад еще - периодически к нему возвращаюсь)

  • @nikitalarionov-edmin3163
    @nikitalarionov-edmin3163 2 роки тому +2

    Благодарю, расставил все точки над i с адаптивами)

  • @AnnaVolkova-w3f
    @AnnaVolkova-w3f Рік тому

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

    • @alexeybychkov_
      @alexeybychkov_  Рік тому

      Самый первый ролик на канале)

  • @ilmira8019
    @ilmira8019 2 роки тому +2

    Теперь понятно, почему именно такие размеры)

  • @yurlova_nastya
    @yurlova_nastya Рік тому

    Теперь всё понятно стало! И если у заказчиков появятся вопросы, то легко смогу объяснить) спасибо!

  • @ОльгаКарась-ъ6щ

    Теперь все максимально понятно. Что и для чего, и как это донести до заказчика. СпасибО.

  • @EvgeniaKrivonosova
    @EvgeniaKrivonosova 2 роки тому +3

    Помню раньше долго не догоняла про множители пикселей :) Но теперь вроде понятнее, спасибо! 🔥

  • @konkova_eks
    @konkova_eks 2 роки тому +1

    Спасибо за понятное объяснение👍 Вопросов не остается🙂

  • @SinwiseAM
    @SinwiseAM 4 роки тому +8

    Самое толковое видео по адаптиву!

    • @alexeybychkov_
      @alexeybychkov_  4 роки тому +4

      Ну класс :) Скоро будет еще целая серия видео про адаптив

  • @evgeniasein6376
    @evgeniasein6376 2 роки тому +1

    Какой полезный контект, +в копилочку! Спасибо!

  • @rudavina_svg
    @rudavina_svg 2 роки тому +1

    отличная визуализация, всё сильно понятно)

  • @OlgaMakukha
    @OlgaMakukha Рік тому +3

    Всё сложное твоими словами становится лёгким 🤗 Спасибо!

  • @vladfedorov1027
    @vladfedorov1027 Рік тому

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

  • @МарияПро-й1х
    @МарияПро-й1х Рік тому

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

  • @max-ivanov
    @max-ivanov Рік тому +1

    Множитель плотности пикселей - одна из самых ценных вещей, что я узнал недавно) Спасибо, Леша!

  • @АнастасияТруман-т5ь

    Огромное спасибо за материал! Для меня, как новичка в дизайне эти 7 минут невероятно информативны и полезны!

  • @АннаПетрова-у1ы
    @АннаПетрова-у1ы 2 роки тому +2

    Не первый раз уже смотрю ролик, но снова с большим удовольствием! Ты так круто, красиво и наглядно показал как там что происходит с разрешениями и меняется, это безумно полезное видео 👍 👍

    • @alexeybychkov_
      @alexeybychkov_  2 роки тому +3

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

  • @viktorchernichenko
    @viktorchernichenko 2 роки тому +1

    Благодарю за четкие и понятные объяснения)

  • @shkida9930
    @shkida9930 Рік тому +1

    Разложил всё по полочкам, просто супер, а главное - наглядно! Спасибо за полезный контент)

  • @user-zl1zm9ss4n
    @user-zl1zm9ss4n 2 роки тому +1

    Спасибо за подробное разъяснение по полочкам.

  • @yuliaopolska3991
    @yuliaopolska3991 2 роки тому +1

    Спасибо за видео и за объяснение множителя пикселей ☺

  • @tatianas3634
    @tatianas3634 2 роки тому +2

    Супер понятно и супер подробно)) Спасибо)) Всё как по полочкам разложено!)

  • @dianaugnivenko4792
    @dianaugnivenko4792 2 роки тому +2

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

  • @juliayarema8128
    @juliayarema8128 4 роки тому +2

    Спасибо вам за ваши уроки! Столько видеоблогов пересмотрела по теме и ваш - самый толковый!

    • @alexeybychkov_
      @alexeybychkov_  4 роки тому +2

      Ну класс) Рад, что нравится!

  • @МарияКузьмина-з3б
    @МарияКузьмина-з3б 2 роки тому +2

    Еее, класс) Опять добавила заметочек в свою коллекцию!😄👍 Теперь хоть стало понятнее про множитель плотности пикселей) А то раньше прям как-то сильно заумно звучало🤣

  • @ЕленаСамарцева-л6з

    Сколько нового я узнаю за сегодня!) Спасибо за информацию!

  • @kseniamomot9810
    @kseniamomot9810 2 роки тому +1

    Когда нужна полезная инфа быстро четко и емко - иду к Леше на канал !))) все просто ))) фил хуг! Спасибо, за твой труд!

  • @maridesim
    @maridesim 3 роки тому +1

    За два года у тебя голос прям изменился :))) как всегда все понятно и полезно, без воды. Спасибо большое :)

    • @alexeybychkov_
      @alexeybychkov_  3 роки тому +2

      Да тот же голос) Просто стоя начал ролики записывать и стримы вести. Интонация совсем другая, когда стоишь

    • @maridesim
      @maridesim 3 роки тому

      @@alexeybychkov_ ух ты, не знала :)

  • @elenapopova5135
    @elenapopova5135 2 роки тому +1

    Теперь многое стало понятнее)) Спасбо!

  • @СевильГусейнова-э7м

    Как интересно! Я как будто только что исторически фильм посмотрела!

  • @inal5527
    @inal5527 2 роки тому +2

    Это огромная работа, и отличное объяснение как визуально так и информативно)) Спасибо большое :о

  • @ЕленаЖуравель-ь6л
    @ЕленаЖуравель-ь6л 2 роки тому +1

    спасибо, разобралась с размерами. Все четко и по полочкам

  • @sashademidchick4791
    @sashademidchick4791 Рік тому +1

    Спасибо огромное! Лучший человек эва!

  • @Mar_marinka
    @Mar_marinka Рік тому +1

    Очень доступно все объяснено! Спасибо! Фил Хуг🤗

  • @innasapegina7068
    @innasapegina7068 2 роки тому +1

    Спасибо за подробное разъяснение! Освободил дизайнерам время для работы, ведь теперь не надо рассказывать это самой!🔥🔥🔥

  • @kyryldrozdov5904
    @kyryldrozdov5904 Рік тому +1

    Thanks a lot Alex, watching all the time your content 😉☺️☺️☺️☺️ THE BEST!!!!!

  • @Анастасия-я1ц2у
    @Анастасия-я1ц2у 2 роки тому +3

    Спасибо, что помог всё по полочкам разложить, как всегда контент и подача 🔥

  • @kate_the_pianist
    @kate_the_pianist 2 роки тому +2

    Спасибо за классное видео! Мне очень понравилось как ты оформил видео, как анимация работает. Кайф)) Ну и контент конечно очень полезный. Отсыпала себе в заметочки :)

  • @polly.procenko
    @polly.procenko Рік тому

    Классненько! Уметь такие сложные вещи объяснять простым языком - это талант!