Спасибо, за урок, мужик! Я графический дизайнер со стажем, но только сейчас вливаюсь во всю ui/ux историю. Веб ложится на граф.дизайн со свистом и такие вот ролики с инфой строго по делу, разрешениями и т.д. - это просто бриллианты среди гор гуано. Вот ещё бы таймкоды подприсунуть, но момент с глубиной просмотров понятен и справедлив, так что ещё раз - моё почтение, комрад! Подзаценю аназер видеос фром ёр ченэл, тасазать)))
Пример на котором ты показываешь и так все очевидно: лого, менюшка, бургер (зачем не понятно, если меню уже есть). Ты бы лучше показывал на примере проектов, которые используются в современных реалиях в рунете, для бизнеса как правило такой сайт не подойдет, разьве что на беханс выложить, а так налетят маркетологи и залепят 1 экран акциями, напихают в шапку телефоны, вотсапы, соцсети, режим работы, адрес, обратный звонок, дискрипотр и т.п. и это будет правильно с точки зрения коммерции. И вот тогда начнутся проблемы, ведь надо что то уменьшать, что то скрывать, что-то отправлять в выпадающее меню, куда то это деть все в мобилке, вот это задача.
Благодарю за информативный урок! Хотел спросить, как часто вы адаптируете дизайн, когда вы выступаете и в роли дизайнера и в роли верстальщика? Не проще ли заниматься адаптацией непосредственно в webflow? Особенно, когда нет необходимости передавать макет верстальщику. Ещё заметил одну особенность при работе с текстом, с которой раньше в Figma не сталкивался (только в AI/PS). Что нужно сделать, чтобы масштабировать размер текста пропорционально с помощью мыши? Чтобы я не нажимал, у меня масштабируется только фрейм, в котором расположен текст, но не его размер (кегль).
Спасибо за отзыв) Я обычно рисую десктоп версию в Figma, а адаптирую сразу в Webflow. Чаще всего дизайнеры предоставляют макеты адаптивности, но в идеале верстальщик должен уметь сам адаптировать дизайн. Чтобы масштабировать объекты в Figma, нужно выбрать инструмент scale (горячая клавиша K)
@@webflowpro В идеале дизайнеру создавать адаптивность, так как он лучше понимает специфику того, что важно, а что менее важно по элементам на странице. В свою очередь верстальщик верстая ту или иную страницу в адаптиве может внести свои изменения, если нету задачи "Pixelperfect-верстки".
Привет Иван! У меня к вам вопрос, как например сделать *_"назад"_* Ну например, я работаю и вдруг что-то наляпал и как это исправить сделать назад. *_Либо создать новый проект, новую работу_* Если ответите буду вам очень благодарен
@@ГулжигитМелисбеков-б2й Если какие-то вопросы есть по функциям, в правом нижнем углу есть кружок со знаком вопроса - это раздел Help & Resources. Там есть все необходимые для работы shortcuts.
Большое спасибо! Супер полезное видео. И объяснили и показали наглядно. И озвучка супер, все коротко и по делу. На 1:13 увеличиваете холст и содержимое никуда не съезжает, как это сделать? Есть видео на Вашем канале?
Иван, добрый день! На 5:17 говорится о том, что те два блока можно перенести вниз, но у верстальщика могут из-за этого возникнуть проблемы. Почему? Объясните, пожалуйста.
Добрый день. Эти два блока скорее всего будут находиться в одном диве с картинкой, а при адаптивности они должны оказаться в диве с заголовком. Хотя эту проблему можно решить с помощью грида, тогда все эти блоки будут частью одного дива. Сейчас можно не особо задумываться о перестроении макета, потому что появилось много технологий для этого, так что верстальщик справится)
Некоторые верстают на em, а для body задают размер шрифта в vw, чтобы сайта скейлился. Вы упоминали meta viewport, но как вы его реализуете на определенном разрешении? Через JS?
Скажите, пожалуйста, а какая необходимость отрисовывать все размеры в фигме, если потом это все заново делать в Вебфлоу? Нет смысла сделать в фигме десктопную версию только, а адаптацию уже непосредственно в Вебфлоу?
Почему дизайнеры работая в векторе вообще опираются на цифры пикселей, а не на соотношение сторон как это делают верстальщики нормальные?) Ведь это же все ровно векторное всё. В браузере оно никак не будет смотреть на пикселизацию монитора, оно будет смотреть только на соотношение сторон.
![Адаптивный дизайн сайта в Figma [Уроки Веб дизайна]](http://i.ytimg.com/vi/jghijgFpFoE/mqdefault.jpg)
![Адаптивный дизайн сайта в Figma [Уроки Веб дизайна]](/img/tr.png)
Спасибо, за урок, мужик! Я графический дизайнер со стажем, но только сейчас вливаюсь во всю ui/ux историю. Веб ложится на граф.дизайн со свистом и такие вот ролики с инфой строго по делу, разрешениями и т.д. - это просто бриллианты среди гор гуано. Вот ещё бы таймкоды подприсунуть, но момент с глубиной просмотров понятен и справедлив, так что ещё раз - моё почтение, комрад! Подзаценю аназер видеос фром ёр ченэл, тасазать)))
Иван, вы лучший! Давно не видел таких качественных уроков! Спасибо вам за ваш труд и открытость!
Пример на котором ты показываешь и так все очевидно: лого, менюшка, бургер (зачем не понятно, если меню уже есть). Ты бы лучше показывал на примере проектов, которые используются в современных реалиях в рунете, для бизнеса как правило такой сайт не подойдет, разьве что на беханс выложить, а так налетят маркетологи и залепят 1 экран акциями, напихают в шапку телефоны, вотсапы, соцсети, режим работы, адрес, обратный звонок, дискрипотр и т.п. и это будет правильно с точки зрения коммерции. И вот тогда начнутся проблемы, ведь надо что то уменьшать, что то скрывать, что-то отправлять в выпадающее меню, куда то это деть все в мобилке, вот это задача.
точняк
Святая правда
Очень толково и доходчиво донёс информацию. Мне, как начинающему, всё понятно. Друг, ты прираждённый препад. Так держать. Плюсую и подписываюсь.
Иван, здравствуйте. Спасибо за все что вы делаете для нас!
спасибо большое, добавило немного организованности в моих хаотичных знаниях)
Очень понятно и доходчиво, и приятно слушать - спасибо!
Самое адекватное видео по этой теме.
Информативно, все наглядно и по делу. Благодарю 🙌
Спасибо за урок!!! Разобралась наконец-то с брейкпоинтамы!
Спасибо, очень толковое и понятное видео, подскажите пожалуйста, как вы маштабируете все сразу со шрифтом вместе?
Это делается через Scale (горячая клавиша - K).
Буду благодарен за подписку на мой канал 😉
Спасибо большое! ⚡ Очень хорошо объясняете.
Ты перепутал ширину и высоту в мобильном разрешении
Спасибо за урок, очень познавательно. На 11 минуте, 375px это ширина, а не высота экрана мобильного устройства.
Но если экран перевернуть, то станет высотой. А он делает для горизонтального экрана
@@evgeniavor91 емае, я вообще забыл что еще надо для горизонтального режиима делать
Благодарю за информативный урок! Хотел спросить, как часто вы адаптируете дизайн, когда вы выступаете и в роли дизайнера и в роли верстальщика? Не проще ли заниматься адаптацией непосредственно в webflow? Особенно, когда нет необходимости передавать макет верстальщику.
Ещё заметил одну особенность при работе с текстом, с которой раньше в Figma не сталкивался (только в AI/PS). Что нужно сделать, чтобы масштабировать размер текста пропорционально с помощью мыши? Чтобы я не нажимал, у меня масштабируется только фрейм, в котором расположен текст, но не его размер (кегль).
Спасибо за отзыв) Я обычно рисую десктоп версию в Figma, а адаптирую сразу в Webflow. Чаще всего дизайнеры предоставляют макеты адаптивности, но в идеале верстальщик должен уметь сам адаптировать дизайн. Чтобы масштабировать объекты в Figma, нужно выбрать инструмент scale (горячая клавиша K)
@@webflowpro В идеале дизайнеру создавать адаптивность, так как он лучше понимает специфику того, что важно, а что менее важно по элементам на странице. В свою очередь верстальщик верстая ту или иную страницу в адаптиве может внести свои изменения, если нету задачи "Pixelperfect-верстки".
@@Y-I Полностью согласен
Спасибо за годный контент. Очень детально.
Благодарю за видео) подскажите пожалуйста, как верстальшики относятся к дробным числам при использовании скейла?
Чаще всего относятся плохо, хотя это зависит от единиц измерения. Если верстать с помощью vw и em, то вёрстка тоже будет скейлиться
@@webflowpro вот и я тоже наслышана что плохо)) какой тогда выход? скейлить, а потом вручную править до целых единиц?
Привет Иван! У меня к вам вопрос, как например сделать *_"назад"_*
Ну например, я работаю и вдруг что-то наляпал и как это исправить сделать назад. *_Либо создать новый проект, новую работу_*
Если ответите буду вам очень благодарен
Ctrl+Z
@@ДжооДжо-ъ2м спасибо
@@ГулжигитМелисбеков-б2й Если какие-то вопросы есть по функциям, в правом нижнем углу есть кружок со знаком вопроса - это раздел Help & Resources. Там есть все необходимые для работы shortcuts.
Спасибо!
А у вас есть видео с адаптацией сайта, но уже в Webflow ?
Можете посмотреть базовый курс ua-cam.com/video/8eO5KFghD_w/v-deo.html
Чувак, ты крут ;-) ! Спасибо, наглядно, доходчиво, полезно!
В чём проблема сделать фрейм 1920x1080 и добавить 12-ти колонную сетку по середине?
Ага, можно и так
Было круто и суперпознавательно, спасибо!
Красавчик, все по делу и сжато.
07:30 где указать минимум и маусимум разрешения для растягивания, или пресеты вшиты программно?
Спасибо за видео. Почерпнул.
Большое спасибо! Супер полезное видео. И объяснили и показали наглядно. И озвучка супер, все коротко и по делу. На 1:13 увеличиваете холст и содержимое никуда не съезжает, как это сделать? Есть видео на Вашем канале?
Спасибо за комментарий) Холст увеличиваю вот этим инструментом yadi.sk/d/ZFzQcd49GmMTmQ горячая клавиша K английская
Иван, добрый день! На 5:17 говорится о том, что те два блока можно перенести вниз, но у верстальщика могут из-за этого возникнуть проблемы. Почему? Объясните, пожалуйста.
Добрый день. Эти два блока скорее всего будут находиться в одном диве с картинкой, а при адаптивности они должны оказаться в диве с заголовком. Хотя эту проблему можно решить с помощью грида, тогда все эти блоки будут частью одного дива. Сейчас можно не особо задумываться о перестроении макета, потому что появилось много технологий для этого, так что верстальщик справится)
@@webflowpro Спасибо большое за ответ!)
В мобильной версии перепутал размеры ширины с высотой. 375 это ширина
а сетку не проще просто с самого начала использовать?
Можно и сначала, но сетка ограничивает свободу. Я предпочитаю сначала создать основные блоки, а потом под них создавать сетку
Некоторые верстают на em, а для body задают размер шрифта в vw, чтобы сайта скейлился.
Вы упоминали meta viewport, но как вы его реализуете на определенном разрешении? Через JS?
В css создаётся правило для отображения элементов при определенной ширине экрана
Подскажите пожалуйста,а если шрифты закреплены уже, то как быть с мобильными версиями?Их нужно откреплять и уменьшать или как?
Да, нужно делать отдельные стили для мобильных
@@webflowproСпасибо огромное
Скажите, пожалуйста, а какая необходимость отрисовывать все размеры в фигме, если потом это все заново делать в Вебфлоу? Нет смысла сделать в фигме десктопную версию только, а адаптацию уже непосредственно в Вебфлоу?
Да, я обычно сразу в wf делаю адаптив
спасибо за ваш труд!
Как называется вторая прога в видео, где на темно сером экране, тянет за края и меняется адаптивность?
WebFlow
Видос - огонь!
спасибо за видео!
Почему 1376, а не 1366? И откуда берётся 667px?
привет, нашел ответ?
@@sokolov.legacy неа)
иконка бургера зачем когда меню и так не скрыта ?
Очень полезная информация, спасибо! Кстати, у меня на канале вы можете узнать как сделать анимированный пост для инстагарама.
Оговорка по Фрейду, 1366px, а не 1376px
Да, верно
Сетки бутстрапа видимо авто совсем не изучал
Классный урок! Тоже снимаю уроки по Figma, подписывайтесь!
Почему дизайнеры работая в векторе вообще опираются на цифры пикселей, а не на соотношение сторон как это делают верстальщики нормальные?) Ведь это же все ровно векторное всё. В браузере оно никак не будет смотреть на пикселизацию монитора, оно будет смотреть только на соотношение сторон.
Наверное потому что других единиц измерения в фигме нет) Я бы в EM делал макеты, но пока такой возможности нет
Y