Как делать адаптив сайта с автолейаутом на самом деле, а не вот это вот всё 😂 Стрим #68
HTML-код
- Опубликовано: 27 июл 2024
- #alexeybychkov #ityoutubersru #webdesign
Делаем адаптив реального проекта и прокачиваем autolayout
Вторая часть - • Как делать адаптив сай...
Файл из ролика - www.figma.com/file/QRmeDMIE3s...
Файл со скриншотами для насмотренности: boosty.to/alexeybychkov/posts...
ТикТок - / alexeybychkov_
Дзен - zen.yandex.ru/alexeybychkov
Инстаграм - / alexeybychkov_
Телеграм - t.me/a1exeybychkov
Вконтакте - alexeybychkov
Обучение - alexeybychkov.study/
Мои цитаты -
Мои 404 - www.404.gallery/
Хелп по Фигме - figma.help/ или @
💰❤️ Поддержать канал:
/ @alexeybychkov_
бусти - boosty.to/alexeybychkov - русский интерфейс, рубли
патреон - / alexeybychkov - английский, доллары
00:00 технические моменты
03:29 почему нужно делать четыре макета
22:30 адаптив главного экрана
34:01 адаптив ради адаптива
39:26 адаптив блока преимуществ
01:14:04 адаптив футера
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
Меня зовут Алексей и я веб-дизайнер фрилансер из Минска. Мне в районе 37 лет, женат на прекрасном человеке и у нас две прекрасные дочки. Работаю на лучшей бирже в рунете - 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
Вторая часть - ruclips.net/video/v5Q-AtlySHw/видео.html
Файл из ролика - www.figma.com/file/QRmeDMIE3sK8E2BpsbVgEP/adaptives-template
Зашла однажды случайно, осталась жить на канале. Спасибо вам за ваш труд
Супер 💯
Спасибо, что заглянули! :) А за комменты и лайки отдельные обнимашки ♥
Посмотрела в записи! Спасибо большое! Скорость удобная, логика понятная, советы и рекомендации по адаптации взяла на заметку в следующие проекты) Еще раз - огромная благодарность за такие разборы!
спасибо за просмотр!
Пожалуй это самый лучший канал о Фигме. Благодарю автора за проделанную работу. Буду ждать продолжения😉
очень рад! 🥳
Огромное спасибо тебе за возможность посмотреть стрим в записи .
пожалуйста!
Спасибо! Алексей, смотрю Вас теперь постоянно. Классная подача, просто, живенько.
рад, что нравится! 🎉
Супер. Обожаю такие видосы. Пересматриваю по несколько раз. Жду продолжения 👍
рад, что нравится!
Большое спасибо! Как на лекциях) ждём следующую пару)))
пожалуйста)
Спасибо! Впервые смотрела стрим))) я обожаю верстку - посмотреть расположение контента от дизайнера- полезная штука. Хорошо , если моб.версию приложат, а планшет -это ж глаза в кучу- как все расположить (для меня).. вместо того , чтоб кайфофать от написания кода- сидишь и ломаешь голову- куда все этт впихнуть🤪 и действительно, когда голова сломалась- планшет выглядит как мобилка а-ха-хах))) Вообщем , спасибо! Полезно посмотреть перестроение. Обязательно посмотрю следующий стрим)) нет.. жду с нетерпеньем!!!!👌👍👍👍
спасибо за просмотр)
Посмотрела стрим, буду ждать продолжение и макет! Очень много полезной информации, обязательно потренируюсь) Спасибо!👐🏻
Отличный план!
Просто шикардос, продолжай в том же духе ☀️
Спасибо за просмотр)
Каййййф! Супер-стрим. Обожаю твою манеру и скорость изложения - это пушка-ракета! Благодарю за полезности 🔥🙃👍
рад, что нравится! 🥳
Спасибо за полезный стрим. Очень много важной инфы и отличный формат, когда можно наблюдать за твоей работой и еще вопросы задавать!!!! Агонь=))
Агонь))
Ждем продолжения, спасибо за стрим! 🔥
Спасибо за просмотр!
Спасибо большое! Было очень полезно, настройка автолейаутов особенно 🔥
Пожалуйста большое!
Адаптивы это отдельная непростая история. Спасибо, что показываешь , как их делать правильно! 🔥
пожалуйста!
Очень информативные ролики. Даже запись стрима, самый бичевый формат, но смотрится бодро, хоть и перематываю некоторые моменты. По большей части, нуждаюсь в демонстрации. Поэтому, такая скорость донесения материала - однозначный плюс. Самое важное, придерживаться последовательности , что "из А, сделав Б, получаем В". Но фигма не так уж сложна, чтобы пропуск некоторых моментов стал критичным. Однако, полезно делать отсылки, где о пропущенном рассказывается подробнее. Хотя, на канале, похоже, есть просто всё и обо всём. Смотри и преисполняйся знаниями
круто) Рад, что нравится!
Отличный канал, всё очень понятно объясняешь. Спасибо большое!
очень рад)
Супер!! Столько полезной информации, спасибо огроменное))))
пожалуйста!
Супер, очень полезный стрим, время проходит быстро и интересно, жду следующий🔥
Рад, что нравится!
Вчера успела на кусочек стрима, остальное в записи смотреть буду. А вот с буквой б - в точку, сама недавно в такую ситуацию попала.
Спасибо за просмотр!
Спасибо за интересный и познавательный стрим💜💜 чувствовала себя как на в универе, когда преподаватель говорит про одну тему, затрагивает следующую и в итоге столько информации, что в голове не помещается!!! Очень круто, спасибо 💜
рад, что нравится!
у нас был такой препод в универе. Только он постоянно забывал исходную тему и вопрошал "к чему я это приплел" 😄
Очень интересно наблюдать за работой профессионала!👍🏼👍🏼
🥳
37:36 Алексей, называйте всё своими словами.....не обманули, а на хутор послали за дикообразами (LOL).
Бомба, адвайсы и типсы, просто шик.
Сколько не пересматриваю, отрываю для себя всё новые и новые моменты, огонь-огненный!!!
)) спасибо за просмотр 🥳
Полезно и понятно, ждём вторую часть)
вот и хорошо)
Как всегда познавательно и зажигательно! Спасибо))
Ну класс! 🎉
Постоянно смотрю, нахожу здесь кучу полезной информации и сразу можно параллельно пробовать самому, а так бывает разве ,бесплатно и так много качественной и реальной инфы!
супер)
Кто-то уже написал про «кавычки-ёлочке» на Маке? Лёш, есть специальный хоткей: включаешь РУ-раскладку на маке и жмёшь option+shift+= («) или option+= (») 🙂
Это если раскладка Бирмана не установлена. А она установлена
Как хорошо что продолжение завтра и мне не придется ждать его три месяца 😄
да уже завтра)
Спасибо за стрим! Было очень интересно
пожалуйста! 🥳
Спасибо за вашу работу! Жду продолжение! Спасибо!
Пожалуйста
Спасибо большое, Алексей) очень жду вторую часть)
Пожалуйста!
Спасибо! Всё ещё интересно, с удовольствием слушала.
вот и замечательно!
Два часа на одном дыхании! Огонь 😍
ну класс)
Классный стрим всё суперкруто, отдельное спасибо всем в чатике
Спасибо за просмотр!
Опоздал на стрим, теперь с чайком пересматривать буду))
Хорошо, что запись есть!
@@alexeybychkov_ это прекрасно
Благодарю! Супер полезный стрим!😃
Ну класс, пожалуйста!
смотрю) правда в записи=) но уже норм. вспомнила всё) спасибо)
🥳
Жду файлик и второй стрим ♥
Тема супер!
Скоро 2 стрим проведу
18:49 Прям неожиданный момент про литеры в адресе: 12б. Действительно можно в суете на маленьком экране телефона перепутать б и 6. Никогда об этом не задумывался...
да, есть такое дело)
Алексей,спасибо! Отличный эфир. Даже вроде болтаете, а все равно по делу. И куча полезной инфы. Пошла смотреть продолжение
Спасибо за просмотр)
Мой самый любимый канал, подача материала просто огонь 🔥
Ееее ❤️ спасибо!
Супер полезный стрим, спасибо!
Много полезного для себя узнала)
вот и замечательно!
спасибо, очень полезный стрим!
🥳
Спасибо за контент)🙏🏻
Пожалуйста!
Алексей, спасибо за интересную информацию!
пожалуйста!
Спасибо! Интересно и очень полезно, как всегда😄
спасибо за просмотр!
Спасибо за такой полезный стрим!
пожалуйста!
Когда же научусь пользоваться автолейаутом нормально))) пока частенько все "ломается". Но после курса думаю все станет ясно))) жду апрель. Спасибо!
Время быстро пролетит)!
Я не новичок, поэтому ваши видео обычно смотрю х2 и все понимаю😁 а для новичков у вас отличный курс на канале есть😏
Спасибо за ролик👍🏻
На х2 прям очень хорошее восприятие🙄. Я пока максимум на х1,5 😜
@@elenashchotkina1602 чем больше роликов смотришь, тем быстрее хочется их воспроизводить) инфы много везде, а времени на все не хватает, вот и приходится ускоряться)
@@AL_V_P поддерживаю🔥
спасибо за просмотр)
Очень крутой и интересный стрим!
Спасибо большое 🔥
Вот и хорошо 🥳
Алексей, благодарю! Отличный видос и канал🤜🏻🤛🏻
Спасибо за просмотр)
Крутой стрим❤, все понятно, жду продолжение! Леха филл хуг!🎉
Фил Хуг)
Спасибо большое! 👍👍👍 Очень полезно. ☀️☀️☀️
пожалуйста!
Было очень полезно, спасибо!
пожалуйста!
Крутое видео! Ты лучший🤗
спасибо 🥳
спасибо!!!!!!))) за все видео!!! огонь!!! от души
пожалуйста!
Спасибо за труд, очень познавательно!!!
пожалуйста!
Спасибо, невероятно понравилось. Очень информативно и полезно)
темп шикарный, есть такие ораторы, что уснуть можно, а тут весело и динамично)
Есть вопросы, как Вы включаете режим контура?
рад, что понравилось
сtrl + shift + 3
или shift + O (о, не ноль)
Алексей, ёлочки на клавиатуре мака, включаем русскую раскладку: Option + ] это будет "«", а Option + Shift + ] это будет "»". Только что сам прописал на этом же примере. Если не получается, возможно ваша раскладка не Russian PC, нужна именно такая.
у меня раскладка Бирмана установлена. Это у многих так на маке - в фигме кернинг текста перехватывает елочки. В других программах елочки ставятся без проблем
@@alexeybychkov_ Так, бирман. В целом возможно сделать кастомную раскладку под себя, и убрать кавычки в другое место. Можно отредактировать пакет с сайта бирмана и переместить символы на другие кнопки, чтобы и фигма не хватала и они доступны были. Файл с .keylayout в установщике легко редактируется через Text Edit.
Спасибо большое!!!
Пожалуйста 🎉
какой же вы чертовски полезный ! не знаю как иначе сказать ) блин , обняла приподняла , спасибо !
рад, что полезно
Спасибо за классный стрим🔥
пожалуйста!
дядько !!!!
ТОБІ респект
ти так гарно розазуєш шо дух захватує
Круто))
Привет Алексей! Видео того года, не знаю узнал ты о кавычках ёлочки или нет, напишу на всякий)) На маке на английской раскладке ставится option+\=« и shift+option+\=» и на русской shift+option+(+/=)=« и option+(+/=)=» )))
👋 не у всех работает(
Спасибо за контент 👍🏽
пожалуйста!
Спасибо классное инфо ❤
пожалуйста!
2:11 о, это то что нужно, а то я в последнее время сажусь тренироваться и далеко не всегда АЛ ведет себя как мне надо, столько нервов на это уходит))
ну класс)
Здравствуйте, спасибо бесконечное за стрим ! Не могу понять только где вторая часть, этот 68, новогодний 70, а 69 не могу найти на канале. хотелось бюы тоже понажимать кнопки) Спасибо!
Привет. Второй части еще не было. После праздников уже продолжать будем
Спасибо, про адаптивы как раз вовремя) На счет скорости, это огромный плюс, только смотря твои видео мне не хочеться включать х2!
рад, что нравится!
Два часа стрима, ого, как долго)
Обо всех ты думаешь ...и верстальщики бедные мучаются от наших дизайнерских способностей, а теперь ещё и курьеры бедняги) эти знания из собственного опыта, наверно)) 😀
курьеры печатного центра, в котором работал страдали от дизайнеров 😂
Спасибо за полезный стрим. А можно больше узнать как переключаетесь в режим просмотра без картинок, где все фиолетовое или голубое ))
Режим контуров шифт + О
Спасибо бро, за годный контент
пожалуйста!
Привет! Я вот вижу в этом видосе промелькнул кадр с макетом где написано elements_open_catalog. И народ в чате спрашивал, как показывать заказчику,
где все эти всплывашки, наведения и тд.
У меня возникла просьба.
Сделай пожалуйста видео,
как и где создавать эти пояснялки для верстальщика, чтобы показать разные состояния элементов (дропдауны-аккордеоны, ховеры, всплывашки, цвет при наведении и тд)
Что именно должно находится в файле фигмы который отдается заказчику? Должны ли там лежать дополнительно все компоненты, UI-Kit, - их прикладывать как-то отдельно или прямо в этом же файле?
Можно ли создавать пояснялки (аккордеон/иконка курсора/и тд) прямо в адаптивах? Хорошо бы на примере реального файла увидеть своими глазами а то по этому моменту
в голове немного уже каша.
Нужно ли писать заказчику PDF-ку, обьясняя каждое своё решение?
Пожалуйста сделай урок по этим техническим моментам 🙏
привет. на бусти есть такой файлик. А на курсе есть отдельный стрим про все это) на канале нет, и не знаю появится ли
Режим контура в плане поиска всякого ненужного очень актуален при переносе в Тильду, а то я там раньше (до ваших видео) после переноса находила странные объекты :)
Спасибо за просмотр)
Пришла пора готовиться к завтрашнему стриму 😅
да!
спасибо большое за стрим! если не сложно, можешь рассказать, как правильно делать неразрывную строку, я всегда туплю здесь. не понимаю что мне нажать, shift enter или что-то другое
Есть ролик на канале про висячие предлоги, там рассказал
жду продолжения
Спасибо за просмотр)
Алексей, огромное спасибо! Столько полезной информации, я ни на одном курсе столько инфы не получала как с ваших видео! :)
Говоря про адаптивы, если у меня на главной странице есть анимация (слайд шоу из картинок) которая привязана к отдельно вынесенному компоненту, правильно ли я понимаю, что для каждого размера я должна буду делать отдельный блок с компонентом? Я же не могу использовать один и тот же компонент учитывая, что размер слайд шоу на каждом разрешении должен быть разный...
Или можно надублировать через component cloner и потом подстроить под каждый размер экрана?
Просто за вопрос, как бф тупо не звучало, но не могу не спросить...
часто 1 мастер позволяет использовать компонент на несколько разрешений. А с обновленным АЛ так и вовсе 2 мастер не нужен) 1 хватает почти всегда на все разрешения
Компонент клонер не запускал уже несколько месяцев)
@@alexeybychkov_ сколько всего я еще не знаю…Леша, огромное тебе еще раз спасибо! 👏🏻👏🏻👏🏻
Алексей, спасибо за классный материал. Глупый вопрос: надо ли для каждого макета (360, 400, 768, 1000, 1280) создавать отдельный kit с компонентами и вариантами? 🙂
Нет, не надо
Алексей, подскажы как в реальном проекте клиент передает тебе тексты под сайт? Не совсем понимаю этот процес, чтобы правильно понять где и что должно быть. Спасибо за то что делишся своими знаниями.😇
Если тексты финальные, то это отличный план. Если их нет, нуууу терпим, и делаем с временными
@@alexeybychkov_ еммм, не поняла🤪
90% случаев
когда касается дело адаптива
быстрей / проще / понятней
сделать адаптив самому чем по дизайну мобилки
наверное)
Спасибо за полезный и нескучный стрим! Волшебное слово «буби» означает компонент?
Тоже так думаю))
Здравствуйте, можете подсказать что за плагин вы используете для разбора макета на блоки
рад, что полезно
Если на сайте используются одинаковые карточки товаров, которые частично меняются на другом разрешении, разве не нужно по прежнему использовать component cloner чтобы сделать независимый мастер и настраивать на новом разрешении отступы и все остальное отдельно как того требует новое разрешение?
теперь можно адаптивить через настройки АЛ. Раньше нельзя было менять отступы не зависимо от мастера и приходилось запускать компонент-клонер. Теперь не надо)
Я вас слушаю на скорости или 1,75 или 2 ))
быстро)
дякую за урок!
Спасибо за просмотр)
Привет! У меня есть вопрос. Насколько хорошо делать группирование елементов, автолейаут, группирование контента во фрейм для верстальщика? Ведь со множеством группировок верстальщику неудобно смотреть на свойтва, он пока провалится к нужному елементу то потеряет много времени. Буду благодарна ответу с:
привет. С зажатым ctrl проваливается сразу в 1 клик туда, куда ему надо)
👍
🎉
Подскажите где лежат файли фреймов для адаптива. Спасибо.
На сайте по фигме pofig.me
Добрый день, спасибо за видео. Но я не очень понимаю работу с сеткой. Если менять в адаптиве сетку под контент( сначала две колонки, потом три) , то их лучше оставлять в макете? Или как это происходит? Как верстальщик будет работать, если в одном фрейме использовали разные сетки? Простите за тупой вопрос, но я просто не понимаю (((
Привет. Оставляешь одну какую-то, все не нужно
А скажи пожалуйста почему constraints не надо использовать? Для каких обычно случаев constraints?
Спасибо за такие могучие уроки❤
Как не надо) надо иногда) например в абсолютном позиционировании элементы как раз через привязки настраиваются
супер.
🎉
Я использую типогнафскую раскладку Бирмана для ёлочек, тире и всего остального, но на маке есть сочетание клавиш встроенное для ёлочек. Не помню правда какие, гуглила, последнее время на виндоус сижу.
вот у меня из-за раскладки Бермана елочки не срабатывают
@@alexeybychkov_ странно, у меня не было проблем. Может надо выбрать только её, а вторую русскую удалить?
Норм стрим!
гуд)
получается для портфолио можно делать 1920 и 360, с учетом адаптивности?
Да можно
Привет!
Вопрос. Сразу начинать делать десктопную версию и на убввание или начинать с мобильной версии? Как правильно? Спасибо!
Привет. Если вкратце: от большего к меньшему. Мобайл-ферст - это про верстку, а не про дизайн)
@@alexeybychkov_ у вас на канале есть ролики про мобайл-ферст? Спасибо
Привет! Спасибо за контент! Вопрос про неразрывные пробелы: в Фигме не ставится через Ctrl+Shift+Space на Винде. (при этом в Ворде всё работает) Это только у меня такая проблема? Хэлп. 😭
привет. Пользуюсь раскладкой Бермана и горя не знаю) просто альт + пробел
@@alexeybychkov_ Спасибо тебе, святой человек! Жменю добра тебе в карму! 💙
не могу найти то что о чем говорится 2:30 пофигме япофигме фигмахелп. Помогите пожалуйста
тут лежит pofig.me/files/