Как сделать мобильную версию сайта? | Уроки Figma

แชร์
ฝัง
  • เผยแพร่เมื่อ 25 ธ.ค. 2024

ความคิดเห็น • 48

  • @Shadow_Leon_
    @Shadow_Leon_ 2 ปีที่แล้ว +3

    Сергей, очень продуктивное видео по созданию мобильной версии! Посмотрел с огромным удовольствием! Огромное спасибо!👍

    • @Chyrkov
      @Chyrkov  2 ปีที่แล้ว

      Здорово! Я рад!))

  • @anna_sss
    @anna_sss ปีที่แล้ว +3

    Очень приятная речь, большое Вам спасибо💙

    • @Chyrkov
      @Chyrkov  ปีที่แล้ว +1

      Благодарю!) Вам спасибо за отзыв!)

  • @sothatsthelemontea5154
    @sothatsthelemontea5154 2 ปีที่แล้ว +2

    Очень полезное видео, благодарю! Иногда испытываю трудности с созданием мобильной версии, поэтому такая информация всегда пригодится 🙏

    • @Chyrkov
      @Chyrkov  2 ปีที่แล้ว +1

      Спасибо, рад, что было полезно!) пишите если будут вопросы)

  • @geminice_k
    @geminice_k 2 ปีที่แล้ว +4

    Сергей, ваши видео очень крутые, наглядные и понятные! Спасибо!!!😇🙏🏻👍🏻👍🏻👍🏻

    • @Chyrkov
      @Chyrkov  2 ปีที่แล้ว

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

  • @Kristen903
    @Kristen903 6 หลายเดือนก่อน

    Спасибо! В моей первой работе вы очень сильно помогли своим видео! Удачи Вам!

    • @Chyrkov
      @Chyrkov  6 หลายเดือนก่อน +1

      Ура! Очень рад это слышать! 🤗 удачи вам в следующих проектах!

  • @MOONHOME-bl5oo
    @MOONHOME-bl5oo 2 ปีที่แล้ว

    Вас так приятно и интересно слушать, спасибо большое!!

    • @Chyrkov
      @Chyrkov  2 ปีที่แล้ว

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

  • @xenydraws
    @xenydraws ปีที่แล้ว +1

    Очень приятная грамотная речь! Спасибо большое, вас приятно слушать

    • @Chyrkov
      @Chyrkov  ปีที่แล้ว

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

  • @TyttuFrytu
    @TyttuFrytu 2 ปีที่แล้ว +2

    Сергей, я правильно понимаю - в конечном итоге фронтенд разработчикам всегда передается 3 макета (десктоп, мобильный и планшет)? Ведь нет необходимости в отрисовке макетов на множество разрешений?

    • @Chyrkov
      @Chyrkov  2 ปีที่แล้ว +1

      Да верно! Но если какой-то сложный дизайн и нужно отдельно показать как будет на 1920, то лучше отрисовать. Это обычно обсуждается с разрабами в конкретном случае.

    • @TyttuFrytu
      @TyttuFrytu 2 ปีที่แล้ว +1

      @@Chyrkov спасибо!

  • @SergiLaza
    @SergiLaza 2 ปีที่แล้ว

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

    • @Chyrkov
      @Chyrkov  2 ปีที่แล้ว +2

      Привет!) спасибо большое!) хорошо, сделаю)

  • @ra4oook
    @ra4oook 8 หลายเดือนก่อน

    Есть какое-то чёткое правило какой фрейм надо выбирать? Будет ли он сам подгоняться под другие экраны пользователей? Или надо отдельно для каждого размера экрана делать?

    • @Chyrkov
      @Chyrkov  8 หลายเดือนก่อน

      Не совсем понял о каком фрейме идет речь. Но делать мобильную версию нужно всех страниц отдельно. Автоматически может работать только если вы используете auto layout, блоки могут подстраиваться по размеру и переходить один под другой. На момент записи этого видео такого функционала в фигме насколько я помню еще не было.

    • @ra4oook
      @ra4oook 8 หลายเดือนก่อน

      @@Chyrkov есть разные фреймы под айфон, андроид и так далее. Если я хочу сделать например на айфон и на андроид, мне нужно делать отдельно для каждого вида фрейма или как вы написали auto layout? Я сейчас выбрал андроид фрейм и делаю на нём

    • @Chyrkov
      @Chyrkov  8 หลายเดือนก่อน

      Если вы делаете мобильное приложение тогда лучше выбрать самое популярное минимальное значение для iOS и android для которого будет доступно приложение. Если речь идет о мобильное версии сайта достаточно взять 390 по ширине, сейчас это самое популярное значение. Пару лет назад делали под 320 но сейчас такие телефоны редко уже встречаются.

  • @dostonjonbillionaire3186
    @dostonjonbillionaire3186 ปีที่แล้ว +1

    Здравствуйте Сергей.
    У меня есть две вопросов насчёт вашей презентации.
    1. Вопрос так. Есть такой сайт где я могу скинуть именно дизайн своего сайта и этот сайт может ли автоматически сделать любые версию нашего модели телефона.
    2. А что если наш телефон в другом формате, скажем другой модель ( Xiaomi, Samsung, Huawei и др ). В Фигме, могу ли найти другие модели, таких как телефонов.
    Спасибо Заранее :)

    • @Chyrkov
      @Chyrkov  ปีที่แล้ว +1

      Добрый день! По 1 вопросу - да есть эмуляторы которые показывают как ваш сайт смотрится на разных девайсах, но сам макет никто не поменяет за вас)))) 2 - вам нужно посмотреть размер экрана вашего девайса под который вы делаете макет и создать фрейм в этом размере. В целом в Фигме используются основные стандартные размеры самых распространенных экранов. Отдельно скорее всего есть плагины или шаблоны в коммьюнити Фигмы для Xiaomi, Samsung, Huawei и др. нужно поискать =)

  • @masha_shele
    @masha_shele 2 ปีที่แล้ว

    Сергей, спасибо большое за интересное видео! Подскажите, важно ли каждый отдельный блок сайта выделять в отдельный фрейм и для мобильной, и для десктопной версий? Я так понимаю, это облегчает жизнь верстальщикам? Плюс в Тильде сейчас появилась возможность импортировать фреймы из тильды в зеро-блок (пока демо), может и в других конструкторах такая возможность есть?

    • @Chyrkov
      @Chyrkov  2 ปีที่แล้ว

      Пожалуйста!) нет не важно, возможно для Тильды это удобно потому что в ней принцип работы такой - блочный. Верстальщик сам определяет как ему нужно дивы сделать.

  • @lemonade-yz2qk
    @lemonade-yz2qk 5 หลายเดือนก่อน

    К материалу вопросов нет, но ещё чуть-чуть и будет АСМР. Хотелось бы чтобы вы говорили немного по громче

    • @Chyrkov
      @Chyrkov  5 หลายเดือนก่อน

      спасибо! на тот момент были сложности со звуком 😉

  • @ПавловРоман-ф7г
    @ПавловРоман-ф7г 2 ปีที่แล้ว +1

    Здравствуйте прикольно получилось . Я на 320 обычно делаю адаптив

    • @Chyrkov
      @Chyrkov  2 ปีที่แล้ว

      спасибо!) да 320 это самый маленькие размер, с него надо начинать

  • @PCBH
    @PCBH 11 หลายเดือนก่อน +1

    Сергей, что-то не вижу сетки

    • @Chyrkov
      @Chyrkov  10 หลายเดือนก่อน

      Если они у вас добавлены в макете, попробуйте нажать shift G чтобы их отобразить

  • @Вацлав-н2ю
    @Вацлав-н2ю 10 หลายเดือนก่อน

    Доброй ночи. Я правильно понимаю, что это адаптив исключительно под расширение 7 айфона и на телефонах с более большим расширением экрана весь макет съедет?

    • @Chyrkov
      @Chyrkov  9 หลายเดือนก่อน

      Добрый! Обычно делается брейкпоинты 390 (телефон) 768 (планшет вертикальный) 1024 (планшет горизонтальный) и далее десктопы. Рисовать отдельно под каждую модель телефона конечно нет смысла))) обычно этих брейкпоинтов хватает чтобы макеты хорошо смотрелись.

  • @pixel9841
    @pixel9841 7 หลายเดือนก่อน

    А не доставляет проблем ,что после Scale всё дробное ?

    • @Chyrkov
      @Chyrkov  7 หลายเดือนก่อน

      есть такое, бесит жутко!)) вручную потом можно размеры подправить немного

  • @alennaalena
    @alennaalena 2 ปีที่แล้ว

    Сергей, очень полезное видео! спасибо! и всё-таки - моб версию требуется отрисовывать на 320 или 375? а если это будет iphone Pro Max?

    • @Chyrkov
      @Chyrkov  2 ปีที่แล้ว

      Спасибо за отзыв! Лучше делать под минимальное разрешение 320. Под про Макс можно сделать отдельно если в этом есть необходимость

  • @julia_389
    @julia_389 8 หลายเดือนก่อน

    А что делать, если у меня при создании моб. версии фото становятся очень пиксельными? Работаю в фотошопе. Качество фото хорошее (5500х3700рх, 10мб), но при переносе их на макет мобилки с размером 320 все в жутких пикселях. Не могу понять в чем проблема. Это проблема в самих фотках или я что-то делаю не так?

    • @Chyrkov
      @Chyrkov  8 หลายเดือนก่อน

      Вы макет в фотошопе делаете? Если в фигму переносите тогда это слишком большой размер и она его сжимает. А зачем такие большие размер? Вообще для сайтов рекомендую использовать размеры фото не более 1920х1080 и весом до 500кб, иначе пользователи могут по пол часа грузить ваши фотографии 😂 и не забывайте про трафик)

    • @julia_389
      @julia_389 8 หลายเดือนก่อน

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

    • @julia_389
      @julia_389 8 หลายเดือนก่อน

      @@Chyrkov и мне загрузили эти фото на сайт и все прекрасно открывается и никаких проблем с трафиком нет

    • @Chyrkov
      @Chyrkov  7 หลายเดือนก่อน +1

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

  • @aftolmolog
    @aftolmolog 9 หลายเดือนก่อน

    Recrent в сфере дизайна

    • @Chyrkov
      @Chyrkov  8 หลายเดือนก่อน

      👌

  • @ДенисПиксель
    @ДенисПиксель 2 ปีที่แล้ว +1

    Музыку нужно чуть тише

    • @Chyrkov
      @Chyrkov  2 ปีที่แล้ว

      Спасибо, учту!