Максим, спасибо большое! Очень понятно, удобно, без воды, очень полезно!:)и у вас удивительно приятная манера говорить - это редкий случай, когда не бесит ни стиль, ни манера говорить. Отличный звук:) Фантастика! Спасибо!
О, кстати, я ищу человека, кто мог бы помогать по нарезке роликов и ютубу.. Желателен мак (для ScreenFlow) Кому интересно, напишите, пожалуйста, на hi@maximsoldatkin.com
@@user-gi6qk5zb3e Привет, Слушай в ролике ты не объяснил как ты рассчитал ПОЛНУЮ СЕТКУ 1170 ?? (У меня к примеру сейчас не стандартное разрешения.... как мне понять какая у меня полная сетка?? )))
Вот я новичок. Впервые села за подобную программу, учусь по вашим видео. Но вы б хоть комментировали что "перехожу туда-то, вибираю то-то", потому что курс вводный, а приходится останавливаться, перематывать и смотреть куда вы нажимали.
Полностью поддерживаю. У меня та же проблема - не хватает объяснений. Мне сфера не знакома. В первом видео было объяснение, что за профессия, а тут сразу сетка. Зачем нужна сетка я до середины видео не догадывалась (да и до сих пор не уверена, что поняла все правильно). Так же многое пришлось перематывать и пересматривать. В итоге все-таки полезла в гугл. Видно, что человек знает дело, но объяснять не очень умеет.
@@maximmandrik6103 Не, ну хотя бы можно говорить что для того что в самом начала создать экраны, нужно нажать такие то клавиши.... и т.п. Ну нужно же понимать что люди не телепаты и смотрят новички. Если делаете продукт (обучающие видео) так делайте хорошо.
спасибо еще раз. я в поиске информации как настроить сетку облазила весь интернет, но так и не поняла. А тут так все просто и понятно, видно что сделано с душой! Спасибо
Очень понятно! Все круто! Я расстроился когда увидел что это только второй урок и выложен он совсем недавно. В моей голове было то что я сейчас сяду и а захлеб посмотрю весю блок уроков по фигме))) С нетерпением жду третьего урока)
На сайте Bootstrap в разделе Documentation > Layout > Grid написано, что под размеры экрана более или равно 1200px максимальная ширина контейнера 1140px и внизу добавлено, что при 12 колонках ширина между колонок 30px и в скобках приписано "по 15px со сторон КАЖДОЙ колонки". Выходит 1140px - 15px с каждого края = 1110px при gutter 30px (15px cо сторон каждой колонки), ширина колонки 65px. Поэтому margin не 150px с каждой стороны, а 165px.
Святой ты человек!)) Сделал как ты сказал и все заработало. Были лишние отступы как и у автора видео, но он видимо закрыл на это глаза в обучающем ролике)
Я что то не понял. С сеткой. Колонки разной ширины чередуются 68 и 67 пикселей. Начал делать дизайн в фигме. Выставил сетку и не страстается. Начал считать. (68 х 12) + (30 х 11)=1146 пикселей, а не 1140 пикселей.
Ширина колонки в Bootstrap 4 65px и отступ с каждой стороны по 15px. Выходит (15+65+15)*12 = 1140px ширина контейнера по максимуму для desktop в Bootstrap 4, по факту 1110px(т.е. -15px слева и -15px справа) Bootstrap 3 было 1170px общая ширина контейнера, т.е. по 70px ширина колонки.
Тоже не срасталось. Если брать 1110px за ширину контейнера, отступ за 30px, тогда выходит следующее: (65 х 12) + (30 х 11) = 1110px. Если общая ширина фрейма 1440, тогда отступы от сетки справа и слева будут по 165.
О боги дизайна, спасибо вам за такой лёгкий и простой инструмент для веб разработчика и дизайнера! На эмоциях, прям хочется рассказать немного о своей боли, начал изучать фронтенд конечно же с html, потом css, самое начало js С фотошопом был знаком до этого, и слышал о таких прогах как xd и плагинах для PS, потом начал писать сайт на голом html потом прикрутил и написал css, и как же это было больно и не совсем по фану, перебирать в цифрах и селекторах то, что хотел бы видеть в итоге, в итоге немного подзабил на это дело и вот только сегодня решил что нужно бы вспомнить какого оно, и фигму освоить все таки уже. И благодаря вам, и конечно же самой фигме, вуаля и я понимаю как же это круто создавать дизайн и сразу же выдергивать его код, ит джаст рили фан!
Смотрю 2 раз про сетки ,1было у другого обзорщика,тут узнал гораздо больше и детальнее,отматывал несколько раз по поводу(высчитать экран,пиксели...),вроде вник)))),мне понравилось, хорошо объясняешь,дельно.(сам я новичок в этом деле)
Вопрос: если дизайн делается под 1920, соответственно расположение элементов по стандартной сетке в 1140 выглядит убого, все очень скомкано к центру. Что делать в этом случае? Верстать с огромными пустыми полями по бокам или можно как это изменить сетку? То же самое про экраны 4к и т.д. Как рассчитать колонки и отступы в таком случае?
Делать тот же дизайн но с сеткой 1140, при этом уменьшать размеры и комбинировать расположение элементов. В дальнейшем верстальщик все это переведет в код. То есть, как будто с zoom - ом работай)
@@voicemarkets Автор рассматривал стандартный бутстрап с отступами 15 пиксилей внутри колонок. На сколько я знаю у стандартного бутстрапа эти отступы не меняются на разных брекпоинтах (адаптивных версиях). Ну а если автор имел ввиду что это можно поменять, то зачем говорить о том что отступ в бутстрапе составляет 30 пикселей, ведь его можно настроить и сделать сразу хоть 20, хоть 24 и т.д причем это применится ко всем брекпоинтам, а не к конкретному. А еще на мобильной версии можно сделать 2 или 4 колонки, где 1 колонка будет равна 6 или 3, ведь нет смысла на мобильном что-либо выставлять в 1, 2 или 3 колонки из 12, это будет слишком мелкий элемент... Понимаю что вы написали свое предположение, не подумайте что я на вас наезжаю))
В сетке бутсрап нужно к основному размеру(контейнера) прибавлять 15 пикселей с каждый стороны. Это указано в самой системе, тут же этого не показывают. Т.е это неверная сетка.
добрый день ) спасибо вам за такие уроки !но я может чего то не понимаю (математика такая 68*12 + 30*11 =1146 1440 -1146 = 294 / 2 = 147. откуда 150 побокам берется вообще не понимаю ...
Добрый день. Почему ширина колонки в bootstrap - 68 px ? Не получается. Т.к.. 12*68=816 и плюс 11 межколонников по 30 px = 330. Итого 816+330=1146. А у нас общая ширина сетки должна быть 1140. Мы на 6 px превысили ширину (1146). А если идти другим путем, и настраивать Margin=150 и межколонники по 30 px, то выходит что 6 колонок в сетке Figma сделает по 68 px., а другие 6 колонок по 67px. И так вопрос, как правильно делать?)
Столкнулся с тем же. Вся проблема в цифрах: сетка бутстрап на самом деле 1146пх. Поэтому не надо пользоваться растяжением, центрируем сетку и задаем все значения вручную. Для десктопа 1440 значение столбца - 68пх, средник - 30пх, отступы - по 147пх (132+15). На макет ipad mini 4 столбца по 166пх (68+30+68), средник - 20, отступы получаются по 22пх. Для мобилы беру экран афони 8+ , т.к. там четное количество пх и проще наложить бутстрап: 2 колонки по 166пх, средник - 30, отступы - по 26. Возможно для мобилы лучше делать другую сетку с отступами и средником меньше. Но иначе бутстрап не ляжет по модулям
Помітив глюк з БУТСТРАПОМ на десктопі. Розбив на 12 секторів як в уроці. Роблю 4 рівних фрейма 262х80. То другий та четвертий не співпадають на 1 піксель. 263х80. В чому причина?
Привет, Алексей. Очень интересует один вопрос. Казалось бы, должно быть понятно, но уже несколько дней не могу сам до конца разобраться и вот решил спросить: Понимаю, что когда речь идет о дизайне мобильних приложений на телефоны, планшеты и тд, мы используем систему едениц измерения в логических пикселях. В XD, Figma і тп. все изначально заточено под логичиские ( условные пиксели) и это логично. Скорее всего что такое ( типо с умножением 1х или 2х ) есть и для дизайна сайтов. Но, лонг стори шорт, когда речь идет, к примеру, о бутстрапе, где ширина рабочей (контентной) области составлет ( или составляла раньше) 1140 px, то о каких пиеселях ми говорим? Физических или условных? Ведь если делать в Фотошопе, то ми навернека используем физичиские. А потом просто експортируем два макета в 1х и 2х ? Большое спасибо!
почему когда я делаю колонки на ipad и подставляю копированное поле из трех квадратов из десктопа.. то при выравнивании их на ipad эти три квадрата выходят за поля на белые линии?? у меня не совпадает размеры 🤔 почему так? и что посоветуете сделать в таком случае? Благодарю за ответ!
Все конечно хорошо, но в сетке на экране 1440 (Count 12 - Tpe Stretch - Gutter 30 - Margin 150) колонки получаются через одну 68 и 67 пикселей. Это вообще нормально? Становится невозможно делать Auto Layout без выхода за границы колонок. Чтобы держаться в их рамках приходится либо делать не равномерные интервалы, либо элементы разного размера. Это как вообще?
У меня у одной с математикой плохо? ширина столбца получается 68 только через раз, то 67, то 68 px.... Получается, что сетка изначально должна быть 1446?
Он рассказывает про 3 бутстрап)) в 4 бутстрап чуть поменяли сетку. Она 1140 рх и минус по 15рх по бокам в итоге рабочая область 1110рх. Ширина одной колонки 65 рх.
Как понять чтоб дизайн умещался именно в эти 3 или 4 колонки, а если мне нужно разместить 2 кнопки на главном экране и мне нужно расстояние между ними 100px а не установленные заранее 70px, а след кнопки мне надо сделать с расстоянием между ними 30px например, как тогда это реализовать? Ведь получается что у меня уже кнопки не будут ровно помещаться в заданные размеры колонок
6:35 Ширина колонки в Bootstrap 4 65px!!! В документации Bootstrap значение с отступом по сторонам. А фигма сетку ресует без отступов, только контентную часть. Выходит колонка 65px + отступ с каждой стороны по 15px. (15+65+15)*12 = 1140px, отсюда ширина контейнера по максимуму для desktop в Bootstrap 4, по факту 1110px(т.е. -15px слева и -15px справа) Ранее в Bootstrap 3 было 1170px общая ширина контейнера, т.е. по 70px ширина колонки.
Спасибо большое! Только вопрос. Почему ширина колонок на фрейме для Десктопа при использовании настроек из видео-урока - на один пиксель различаются (через одну)? Разве колонки не должны быть все одной ширины?
Такой вопрос: если сайт делается с нуля и нет понимания с каких устройств будут преимущественно заходить люди, скорее всего и с ПК и с телефона (и не только айфон), какие тогда размеры выбирать? Всё равно те, которые Вы показали на видео?
Добрый день, записался к вам на курсы, но т.к. поток только с 5 апреля, пытаюсь изучать фигму самостоятельно и я столкнулся с такой проблемой: смещение прямоугольников за рамки разметки сетки(макет подзаголовков и т.д.), делаю все как на видео, но равные фигуры не ложатся в сетку(допустим там 4 фигуры(столбца)) 1 ложится идеально, 2 и 3 нет, 4 опять идеально, то есть фигура №2 и №3 выходят за рамки и попадают в средники или же не до конца доходят внутри сетки-столбца, это на "Desktop". В чем может быть проблема?
Это когда заказчику нужен новый сайт, а старый уже не настолько привлекателен для потребителей, но на него заходили (или продолжают заходить) пользователи. Но если даже это новый сайт то, наверное, стоит начать с того, с чего хочешь.
Обычно, заказчики и сами не знают)) Но при верстке нужно учитывать все размеры устройств, добавляя классы колонки бутстрап, начиная от сверхбольших устройств и заканчивая небольшими, т.е. ниже 576px. 320px - минимум.
Алексей, приветствую! Вопрос наверняка основа основ, но я что-то не разберусь. Какого размера все таки выбирать макет в Figma, чтобы при предварительном просмотре в браузере контент заполнял всю ширину браузера? Например если выставить 1440, при просмотре остаются черные полосы по краям. Или методом проб выставлять ширину пока именно в моем браузере на моем ноутбуке контент не станет от края до края? Пробовал выставить 1920 - но тогда появляется горизонтальный скроллинг (сайт можно двигать слева направо и наоборот)... Заранее спасибо!
Спасибо Алексей! Я новичок в дизайне, хочу обучиться UX/UI. Подскажите, правильно ли взяла направление начав с уроков по Figma? Или надо кучу книг прочесть сначала, и научиться мыслить как дизайнер?)
Не понимаю для чего нужно устанавливать gutter 30px в desktop. Это связанно как-то с отступами у колонок по 15px справа и слева? У нас же в бутстрап padding у колонок, а padding влияет только на контент внутри родительского блока. А если даже и использовать в вёрстке колонку как обёртку для блока, то почему же мы в tablet и phones ставили совсем другой gutter, не 30px.
68px ширина колонки почему должна совпадать? "давайте например зададим 68, о совпадает значит посчитали верно.." в одном примере 150 отступ, в другом 15 стало, а марг вообще было 30 стало 20.
Здравствуйте, Алексей. Я создаю многостраничный лендинг по модульной сетке. У меня несколько фреймов. Подскажите, как соединить несколько фреймов в таком лендинге?
Я новичок , объясните пожалуйста , если клиент хочет , чтоб его сайт подходил и для компьютера и для телефона и планшета, то дизайнеры должны сделать три варианта дизайна под каждый девайс ? И как скидывать ссылку клиенту на утверждение ? И ещё , если дизайнер делает сайт, кнопку он сделал на главной странице , затем ему нужно сделать страницу , на которую переходишь после нажатия кнопки ? Я сколько уроков посмотрела , разных видео, сайт с нуля, так по итогу делают максимум только первую главную страницу, как скомпоновать все странички , они вниз должны идти или в права , потому что на сайтах стрелки тоже то вниз расположены , то по бокам. У меня куча вопросов , по-мелочи , которые не дают мне начать работать наконец , если кто мне поможет с ответами , буду очень благодарна ! 😁
у сетки бутстрап есть косяк. у нее 6 колонок 67 пикселей, другие 6 - 68. А когда ты выставляешь все колонки 68 то ты получаешь 1146 пикселей, что неверно по технологии. Ну и она не попадает в 4 пиксельную сетку и неудобна для пиксель перфект. Естественно, речь про стандартную сетку, без использования настроек.
67.5 ширина колонки. если делать сетку в фигме по методу "маржин" по 150, как в ролике, то все ок, а если колонки по 68, но не ок)) по такому же методу нужно делать и сетки для других устройств.
Что охренительно классно, так то что в Figma присутствуют все шрифты из Google Fonts. То есть, и не нужно устанавливать необходимые шрифты в систему, при разработке дизайна. Ну и естественно, так это мегаудобная работа с сетками. В общем, Figma - шикарный инструмент!
А почему ширина колонки должна быть 68px? У нас ведь 12 колонок по 68px и 11 отступов по 30px Колонки: 68*12=816px Отступы: 30*11=330px Итого: 816+330=1146px. И это без внешних отступов cлева и справа по 15px, т.е. ширина всего контента. Может быть ширина колонки должна быть 65px? Ибо: 65*12+30*11=1110. Плюс 30px боковые отступы слева и справа (по 15px), и получается 1140px.
В общем, самый лучший способ будет в Figma для сетки выставить тип Stretch, а в поле Margin вводить значения по формуле: ширина экрана (frame в Figma) - ширина контейнера (1140px и менее, в зависимости от устройства) / 2. Ну и естественно, что в поле Gutter должно стоять значение 30px, как и 12 колонок (тоже, в зависимости от устройства, ибо на небольших устройствах нет смысла рисовать 12 колонок). Ширина контейнера, под различные устройства, указана в документации (в строке Max container width): getbootstrap.com/docs/4.3/layout/grid/#grid-options
Приблизить , отдалить - зажимаете Ctrl или Alt ( на Маке cmd или Ctrl) и крутите на мышке колёсико, Что бы двигать влево вправо нажимаете на пробел и далее с зажатой левой клавишей мышки двигаете .
Привет. Спросить больше не у кого, по этому спрошу тут. Последнюю неделю очень сильно начала тормозить фигма (веб версия) работа встала, что делать не знаю, подскажите! З а ранее спасибо)
Десктоп пробовал скачать? Веб версия очень плохо работает, не отображает нормально выделение блоков и т.п. Я с разных браузеров пробовал. С десктопом всё ок, все проекты так же открываются, как должны, и без лагов.
Это рассказывают про 3 бутстрап))) в четвёртом другая сетка) а вы смотрите это. Зайдите на сайт бутстрапа там все написано) в 4 бутстрапе сетка 1140 минус по 15 рх по бокам. В итоге 1110
На декстопной версии Вы сделали контейнер 1140,и сказали что про отступы разработчик знает.То есть мы не рисуем вторую сетку с двумя колонками,обозначая отступы,а верстальщик сам об этом должен знать?
Это ширина контейнера для контентной части. Но лучше при создании дизайна добавлять по 15px отступа слева и справа к ширине контейнера (т.е. 15px-> 1140px
За Фигму спасибо! По сеткам - наконец--то хоть кто-то нормально обьяснил! Спасибо друг!)
Максим, спасибо большое! Очень понятно, удобно, без воды, очень полезно!:)и у вас удивительно приятная манера говорить - это редкий случай, когда не бесит ни стиль, ни манера говорить. Отличный звук:) Фантастика! Спасибо!
звук плохой, орут на заднем плане, микрофон шипит... где звук то услышали отличный!?
Почаще, пожалуйста, Фигму. Спасибо)
4:25 сетка bootstrap
7:58 почему сетка из 12 колонок
10:09 правила работы с сеткой
11:11 сетка на адаптивных устройствах
Спасибо, добавил в описание
О, кстати, я ищу человека, кто мог бы помогать по нарезке роликов и ютубу.. Желателен мак (для ScreenFlow) Кому интересно, напишите, пожалуйста, на hi@maximsoldatkin.com
Школа веб-дизайна Максима Солдаткина пожалуйста, когда пересматриваю так удобнее возвращаться
Школа веб-дизайна Максима Солдаткина зачем людей в заблуждение вводишь?) хоть бы сказал что рассказываешь про 3 бутстрап.
@@user-gi6qk5zb3e Привет, Слушай в ролике ты не объяснил как ты рассчитал ПОЛНУЮ СЕТКУ 1170 ?? (У меня к примеру сейчас не стандартное разрешения.... как мне понять какая у меня полная сетка?? )))
Алексей - весьма приятный учитель. Спасибо за урок
Вот я новичок. Впервые села за подобную программу, учусь по вашим видео. Но вы б хоть комментировали что "перехожу туда-то, вибираю то-то", потому что курс вводный, а приходится останавливаться, перематывать и смотреть куда вы нажимали.
я тоже новичок, можно догадаться и + тут нужны горячие клавиши.
Ctrl+D
Полностью поддерживаю. У меня та же проблема - не хватает объяснений. Мне сфера не знакома. В первом видео было объяснение, что за профессия, а тут сразу сетка. Зачем нужна сетка я до середины видео не догадывалась (да и до сих пор не уверена, что поняла все правильно). Так же многое пришлось перематывать и пересматривать. В итоге все-таки полезла в гугл. Видно, что человек знает дело, но объяснять не очень умеет.
@@ЕленаЕрмолаева-г5ц Если тема абсолютно новая, то всегда есть перекрёстный материал. Невозможно сразу охватить всё. Автор молодец!
@@maximmandrik6103 Не, ну хотя бы можно говорить что для того что в самом начала создать экраны, нужно нажать такие то клавиши.... и т.п. Ну нужно же понимать что люди не телепаты и смотрят новички. Если делаете продукт (обучающие видео) так делайте хорошо.
спасибо еще раз. я в поиске информации как настроить сетку облазила весь интернет, но так и не поняла. А тут так все просто и понятно, видно что сделано с душой! Спасибо
Уже с самого начала понимаю, что уроки обалденные.Спасибо большое за Вашу работу и за полезные материалы!
Mobile first всегда. Сейчас вообще весь трафик мобильный. Делать любой дизайн надо с mobile. Крутые уроки ! Спасибо.
Очень понятно! Все круто!
Я расстроился когда увидел что это только второй урок и выложен он совсем недавно. В моей голове было то что я сейчас сяду и а захлеб посмотрю весю блок уроков по фигме)))
С нетерпением жду третьего урока)
Спасибо за урок! Уже 2 года работаю с сетками на фотошопе, а сейчас прямо глаза открылись :)
Алексей, очень доступно объяснили. Максимально все просто! Респект.
молодец. все по теме, нет воды. Нашла инфо, которую искала
На сайте Bootstrap в разделе Documentation > Layout > Grid написано, что под размеры экрана более или равно 1200px максимальная ширина контейнера 1140px и внизу добавлено, что при 12 колонках ширина между колонок 30px и в скобках приписано "по 15px со сторон КАЖДОЙ колонки". Выходит 1140px - 15px с каждого края = 1110px при gutter 30px (15px cо сторон каждой колонки), ширина колонки 65px. Поэтому margin не 150px с каждой стороны, а 165px.
Святой ты человек!)) Сделал как ты сказал и все заработало. Были лишние отступы как и у автора видео, но он видимо закрыл на это глаза в обучающем ролике)
Супер. Я тоже ни могла понять почему у меня ни верные значения выходят. Оказалось что у меня промежутки должны быть 30 а стояли 20
Спасибо большое
Супер. Лайк. Мне понравилось то, что ты объясняешь зачем эта сетка. Выходишь из технической стороны вопроса в практическую
Очень доходчиво. Без воды. Спасибо большое
Я что то не понял. С сеткой. Колонки разной ширины чередуются 68 и 67 пикселей. Начал делать дизайн в фигме. Выставил сетку и не страстается.
Начал считать. (68 х 12) + (30 х 11)=1146 пикселей, а не 1140 пикселей.
понял в чём проблема ?
Ширина колонки в Bootstrap 4 65px и отступ с каждой стороны по 15px. Выходит (15+65+15)*12 = 1140px ширина контейнера по максимуму для desktop в Bootstrap 4, по факту 1110px(т.е. -15px слева и -15px справа) Bootstrap 3 было 1170px общая ширина контейнера, т.е. по 70px ширина колонки.
Тоже не срасталось. Если брать 1110px за ширину контейнера, отступ за 30px, тогда выходит следующее: (65 х 12) + (30 х 11) = 1110px. Если общая ширина фрейма 1440, тогда отступы от сетки справа и слева будут по 165.
с самого начала у меня была какая-то тактика - и я ее придерживался :))
Спасибо Алексей! Все понятно, наглядно и не растянуто в 2 часа. Это классно!!!
он Максим
Не сказал бы, что мне всё понятно, но за видео всё равно спасибо. Всё равно понемногу, а помогает вникнуть в эту программу/сайт
Красавчик,швидко і по ділу
Спасибо большое,все четко,ясно и доходчиво объяснили!!!
Спасибо за реально информативный и полезный урок!👍🏻
Отличное видео, ответил на многие вопросы одним видео! Огромное Спасибо!
Отличный куратор 👍
О боги дизайна, спасибо вам за такой лёгкий и простой инструмент для веб разработчика и дизайнера!
На эмоциях, прям хочется рассказать немного о своей боли, начал изучать фронтенд конечно же с html, потом css, самое начало js
С фотошопом был знаком до этого, и слышал о таких прогах как xd и плагинах для PS, потом начал писать сайт на голом html потом прикрутил и написал css, и как же это было больно и не совсем по фану, перебирать в цифрах и селекторах то, что хотел бы видеть в итоге, в итоге немного подзабил на это дело и вот только сегодня решил что нужно бы вспомнить какого оно, и фигму освоить все таки уже.
И благодаря вам, и конечно же самой фигме, вуаля и я понимаю как же это круто создавать дизайн и сразу же выдергивать его код, ит джаст рили фан!
Смотрю 2 раз про сетки ,1было у другого обзорщика,тут узнал гораздо больше и детальнее,отматывал несколько раз по поводу(высчитать экран,пиксели...),вроде вник)))),мне понравилось, хорошо объясняешь,дельно.(сам я новичок в этом деле)
Спасибо! отличный разбор по сеткам
Вопрос: если дизайн делается под 1920, соответственно расположение элементов по стандартной сетке в 1140 выглядит убого, все очень скомкано к центру. Что делать в этом случае? Верстать с огромными пустыми полями по бокам или можно как это изменить сетку? То же самое про экраны 4к и т.д. Как рассчитать колонки и отступы в таком случае?
Делать тот же дизайн но с сеткой 1140, при этом уменьшать размеры и комбинировать расположение элементов. В дальнейшем верстальщик все это переведет в код. То есть, как будто с zoom - ом работай)
Благодарю актуальная информация😊👍
Большое спасибо!
Спасибо, отличный рассказ!
Подскажите, а почему межколоночники для мобильных стали по 20px?
В то время как для десктопа -- 30px
и меня интересует ответ на этот вопрос.
Для десктопа - 30, iPad mini - 20, iPhone SE - 10. Думаю, связано с особенностями масштабирования блоков.
@@voicemarkets Автор рассматривал стандартный бутстрап с отступами 15 пиксилей внутри колонок. На сколько я знаю у стандартного бутстрапа эти отступы не меняются на разных брекпоинтах (адаптивных версиях). Ну а если автор имел ввиду что это можно поменять, то зачем говорить о том что отступ в бутстрапе составляет 30 пикселей, ведь его можно настроить и сделать сразу хоть 20, хоть 24 и т.д причем это применится ко всем брекпоинтам, а не к конкретному. А еще на мобильной версии можно сделать 2 или 4 колонки, где 1 колонка будет равна 6 или 3, ведь нет смысла на мобильном что-либо выставлять в 1, 2 или 3 колонки из 12, это будет слишком мелкий элемент...
Понимаю что вы написали свое предположение, не подумайте что я на вас наезжаю))
Молодца, даж дедушка успевает въезжать.
Спасибо, помогло, настроила)
Супер, отличный урок
спасибо, мне очень помог ваш урок:) жаль, что пока их еще не очень много
Макс, спасибо !
В сетке бутсрап нужно к основному размеру(контейнера) прибавлять 15 пикселей с каждый стороны. Это указано в самой системе, тут же этого не показывают. Т.е это неверная сетка.
"У вас был план и вы его придерживались"...орнул))
Суперррр) 2 раза смотрела) учусь в фигме) когда-нибудь тоже буду дизайнером🥰
ну как успехи?
добрый день ) спасибо вам за такие уроки !но я может чего то не понимаю (математика такая 68*12 + 30*11 =1146 1440 -1146 = 294 / 2 = 147. откуда 150 побокам берется вообще не понимаю ...
Супер!
Добрый день. Почему ширина колонки в bootstrap - 68 px ? Не получается. Т.к.. 12*68=816 и плюс 11 межколонников по 30 px = 330. Итого 816+330=1146. А у нас общая ширина сетки должна быть 1140. Мы на 6 px превысили ширину (1146). А если идти другим путем, и настраивать Margin=150 и межколонники по 30 px, то выходит что 6 колонок в сетке Figma сделает по 68 px., а другие 6 колонок по 67px. И так вопрос, как правильно делать?)
Столкнулся с тем же. Вся проблема в цифрах: сетка бутстрап на самом деле 1146пх. Поэтому не надо пользоваться растяжением, центрируем сетку и задаем все значения вручную. Для десктопа 1440 значение столбца - 68пх, средник - 30пх, отступы - по 147пх (132+15). На макет ipad mini 4 столбца по 166пх (68+30+68), средник - 20, отступы получаются по 22пх. Для мобилы беру экран афони 8+ , т.к. там четное количество пх и проще наложить бутстрап: 2 колонки по 166пх, средник - 30, отступы - по 26. Возможно для мобилы лучше делать другую сетку с отступами и средником меньше. Но иначе бутстрап не ляжет по модулям
@@user-ml8nt7my1o если выбирать центрирование, то маржин не доступен.
@@user-ml8nt7my1o Спасибо брат! Хоть один время не пожалел. Удачи.
Не смотрите вы этого Солдаткина . Во первых этот крендель рассказывает про 3 бутстрап. В 4 другая сетка .
Так мило говорите "здорово" :)
спасибо
закладки браузера, расставленные по цветам, ― мечта дизайнера-перфекциониста :D
Отличный видос я новичок побольше дай бог успеха и мира твоему дому
Помітив глюк з БУТСТРАПОМ на десктопі. Розбив на 12 секторів як в уроці. Роблю 4 рівних фрейма 262х80. То другий та четвертий не співпадають на 1 піксель. 263х80. В чому причина?
Привет, Алексей. Очень интересует один вопрос. Казалось бы, должно быть понятно, но уже несколько дней не могу сам до конца разобраться и вот решил спросить:
Понимаю, что когда речь идет о дизайне мобильних приложений на телефоны, планшеты и тд, мы используем систему едениц измерения в логических пикселях. В XD, Figma і тп. все изначально заточено под логичиские ( условные пиксели) и это логично. Скорее всего что такое ( типо с умножением 1х или 2х ) есть и для дизайна сайтов. Но, лонг стори шорт, когда речь идет, к примеру, о бутстрапе, где ширина рабочей (контентной) области составлет ( или составляла раньше) 1140 px, то о каких пиеселях ми говорим? Физических или условных? Ведь если делать в Фотошопе, то ми навернека используем физичиские. А потом просто експортируем два макета в 1х и 2х ?
Большое спасибо!
Полезно - о разных фреймах и адаптации дизайна. Но вначале о бутстрапе, мне пришлось смотреть другой ролик, где подробно в деталях разбирают что это.
Большое спасибо)
почему когда я делаю колонки на ipad и подставляю копированное поле из трех квадратов из десктопа.. то при выравнивании их на ipad эти три квадрата выходят за поля на белые линии?? у меня не совпадает размеры 🤔 почему так? и что посоветуете сделать в таком случае?
Благодарю за ответ!
Все конечно хорошо, но в сетке на экране 1440 (Count 12 - Tpe Stretch - Gutter 30 - Margin 150) колонки получаются через одну 68 и 67 пикселей. Это вообще нормально?
Становится невозможно делать Auto Layout без выхода за границы колонок. Чтобы держаться в их рамках приходится либо делать не равномерные интервалы, либо элементы разного размера. Это как вообще?
Спасибо 👍
У меня нет и половины настроек, о которых говорится в видео!! На какую версию рассчитаны эти уроки??
У меня у одной с математикой плохо? ширина столбца получается 68 только через раз, то 67, то 68 px.... Получается, что сетка изначально должна быть 1446?
Он рассказывает про 3 бутстрап)) в 4 бутстрап чуть поменяли сетку. Она 1140 рх и минус по 15рх по бокам в итоге рабочая область 1110рх. Ширина одной колонки 65 рх.
@@user-in1et4ky9e спасибо тебе! помог
Как понять чтоб дизайн умещался именно в эти 3 или 4 колонки, а если мне нужно разместить 2 кнопки на главном экране и мне нужно расстояние между ними 100px а не установленные заранее 70px, а след кнопки мне надо сделать с расстоянием между ними 30px например, как тогда это реализовать? Ведь получается что у меня уже кнопки не будут ровно помещаться в заданные размеры колонок
6:35 Ширина колонки в Bootstrap 4 65px!!! В документации Bootstrap значение с отступом по сторонам. А фигма сетку ресует без отступов, только контентную часть.
Выходит колонка 65px + отступ с каждой стороны по 15px. (15+65+15)*12 = 1140px, отсюда ширина контейнера по максимуму для desktop в Bootstrap 4, по факту 1110px(т.е. -15px слева и -15px справа)
Ранее в Bootstrap 3 было 1170px общая ширина контейнера, т.е. по 70px ширина колонки.
Супер!))) спасибо
Спасибо большое! Только вопрос. Почему ширина колонок на фрейме для Десктопа при использовании настроек из видео-урока - на один пиксель различаются (через одну)? Разве колонки не должны быть все одной ширины?
Добрый день! А без загрузки десктопа можно работать в фигме?
ширина окна браузера не ровна ширине экрана, и марджины надо выставлять учитывая полосу прокрутки, в гугл хроме ширина окна браузера 1904px
Який сенс в сітці бутстрап, якщо вона не "лягає" на базову 8px сітку?
Такой вопрос: если сайт делается с нуля и нет понимания с каких устройств будут преимущественно заходить люди, скорее всего и с ПК и с телефона (и не только айфон), какие тогда размеры выбирать? Всё равно те, которые Вы показали на видео?
Добрый день, записался к вам на курсы, но т.к. поток только с 5 апреля, пытаюсь изучать фигму самостоятельно и я столкнулся с такой проблемой: смещение прямоугольников за рамки разметки сетки(макет подзаголовков и т.д.), делаю все как на видео, но равные фигуры не ложатся в сетку(допустим там 4 фигуры(столбца)) 1 ложится идеально, 2 и 3 нет, 4 опять идеально, то есть фигура №2 и №3 выходят за рамки и попадают в средники или же не до конца доходят внутри сетки-столбца, это на "Desktop". В чем может быть проблема?
топчик!
Спасибо за урок. Только почему на просмотре результат проекта на 1920px на экране выводится уменьшенный? Т.е. он выводится не 1920px?
спасибо !
3:15 Как спросить у заказчика, с какого устройства больше заходят на сайт, если сайт еще не сделан?
Это когда заказчику нужен новый сайт, а старый уже не настолько привлекателен для потребителей, но на него заходили (или продолжают заходить) пользователи. Но если даже это новый сайт то, наверное, стоит начать с того, с чего хочешь.
можно узнать про конкурентов
Обычно, заказчики и сами не знают)) Но при верстке нужно учитывать все размеры устройств, добавляя классы колонки бутстрап, начиная от сверхбольших устройств и заканчивая небольшими, т.е. ниже 576px. 320px - минимум.
"вы жарьте а рыба будет!"©
Спасибо! Очень познавательно, особенно когда решил учиться на дизайнера самому.
cпасибо!
Алексей, приветствую!
Вопрос наверняка основа основ, но я что-то не разберусь. Какого размера все таки выбирать макет в Figma, чтобы при предварительном просмотре в браузере контент заполнял всю ширину браузера? Например если выставить 1440, при просмотре остаются черные полосы по краям. Или методом проб выставлять ширину пока именно в моем браузере на моем ноутбуке контент не станет от края до края?
Пробовал выставить 1920 - но тогда появляется горизонтальный скроллинг (сайт можно двигать слева направо и наоборот)...
Заранее спасибо!
Спасибо Алексей! Я новичок в дизайне, хочу обучиться UX/UI. Подскажите, правильно ли взяла направление начав с уроков по Figma? Или надо кучу книг прочесть сначала, и научиться мыслить как дизайнер?)
Да, все правильно, смотрите эти уроки + бесплатный курс maximsoldatkin.com/web-design/
Не понимаю для чего нужно устанавливать gutter 30px в desktop. Это связанно как-то с отступами у колонок по 15px справа и слева? У нас же в бутстрап padding у колонок, а padding влияет только на контент внутри родительского блока. А если даже и использовать в вёрстке колонку как обёртку для блока, то почему же мы в tablet и phones ставили совсем другой gutter, не 30px.
Здравствуйте! Мне почему-то не пришла ссылка на второй урок бесплатного курса. Куда можно обратиться?
68px ширина колонки почему должна совпадать? "давайте например зададим 68, о совпадает значит посчитали верно.." в одном примере 150 отступ, в другом 15 стало, а марг вообще было 30 стало 20.
Подскажите пожалуйста как сохранять макет проект, удалять и делать шаг назад. За ранее благодарен.
Здравствуйте, Алексей. Я создаю многостраничный лендинг по модульной сетке. У меня несколько фреймов. Подскажите, как соединить несколько фреймов в таком лендинге?
Делаю всё как показали в видео..но сетка не высвечивается! Что делать, в чём причина?
попробуйте нажать Shift + R, комбинация скрывает сетку насколько я помню
Или цвет выбрать для сетки
Я новичок , объясните пожалуйста , если клиент хочет , чтоб его сайт подходил и для компьютера и для телефона и планшета, то дизайнеры должны сделать три варианта дизайна под каждый девайс ? И как скидывать ссылку клиенту на утверждение ? И ещё , если дизайнер делает сайт, кнопку он сделал на главной странице , затем ему нужно сделать страницу , на которую переходишь после нажатия кнопки ? Я сколько уроков посмотрела , разных видео, сайт с нуля, так по итогу делают максимум только первую главную страницу, как скомпоновать все странички , они вниз должны идти или в права , потому что на сайтах стрелки тоже то вниз расположены , то по бокам. У меня куча вопросов , по-мелочи , которые не дают мне начать работать наконец , если кто мне поможет с ответами , буду очень благодарна ! 😁
-да ,три варианта дизайна.
- прототипирование в помощь!
у сетки бутстрап есть косяк. у нее 6 колонок 67 пикселей, другие 6 - 68. А когда ты выставляешь все колонки 68 то ты получаешь 1146 пикселей, что неверно по технологии. Ну и она не попадает в 4 пиксельную сетку и неудобна для пиксель перфект. Естественно, речь про стандартную сетку, без использования настроек.
Кстати,да
таки да
Долой буссрап. Даёшь smartgrid!!!
67.5 ширина колонки. если делать сетку в фигме по методу "маржин" по 150, как в ролике, то все ок, а если колонки по 68, но не ок)) по такому же методу нужно делать и сетки для других устройств.
если главная проблема вашего макета вот эта - то у вас вообще нет проблем)
как измерит ширину макета ? делаю прямогугольник мышкой с права размер не пишется
Что охренительно классно, так то что в Figma присутствуют все шрифты из Google Fonts. То есть, и не нужно устанавливать необходимые шрифты в систему, при разработке дизайна.
Ну и естественно, так это мегаудобная работа с сетками.
В общем, Figma - шикарный инструмент!
А почему ширина колонки должна быть 68px? У нас ведь 12 колонок по 68px и 11 отступов по 30px
Колонки: 68*12=816px
Отступы: 30*11=330px
Итого: 816+330=1146px. И это без внешних отступов cлева и справа по 15px, т.е. ширина всего контента.
Может быть ширина колонки должна быть 65px?
Ибо: 65*12+30*11=1110. Плюс 30px боковые отступы слева и справа (по 15px), и получается 1140px.
В общем, самый лучший способ будет в Figma для сетки выставить тип Stretch, а в поле Margin вводить значения по формуле: ширина экрана (frame в Figma) - ширина контейнера (1140px и менее, в зависимости от устройства) / 2. Ну и естественно, что в поле Gutter должно стоять значение 30px, как и 12 колонок (тоже, в зависимости от устройства, ибо на небольших устройствах нет смысла рисовать 12 колонок).
Ширина контейнера, под различные устройства, указана в документации (в строке Max container width):
getbootstrap.com/docs/4.3/layout/grid/#grid-options
@@justspartak Спасибо! Воспользуюсь!
Если нажимаете куда-то и если это вводный курс, то ,ПОЖАЛУЙСТА, проговаривайте! Телепатией не обладаем! :)
Фон работы нужно было сделать темным цветом, чтобы виднее было лучше
Cпасибо за видео ) Только вопрос, а ничего, что каждая вторая колонка 67 px?
А у меня ни 68 рх получилось, а 77, почему? Хотя параметры тоже были 1440 - 150 по обеим сторонам.
Как вы увеличиваете(приближаете) экран, я не понимаю. Вот, когда проверили объект на колонке вы приблизели её, как????
Приблизить , отдалить - зажимаете Ctrl или Alt ( на Маке cmd или Ctrl) и крутите на мышке колёсико, Что бы двигать влево вправо нажимаете на пробел и далее с зажатой левой клавишей мышки двигаете .
А если в правом меню нет такого блока - Layout Grid? Как его найти, включить, установить, добавить?)
Нашли ответ?У меня сейчас та же проблема.
Привет. Спросить больше не у кого, по этому спрошу тут. Последнюю неделю очень сильно начала тормозить фигма (веб версия) работа встала, что делать не знаю, подскажите! З
а ранее спасибо)
Десктоп пробовал скачать? Веб версия очень плохо работает, не отображает нормально выделение блоков и т.п. Я с разных браузеров пробовал. С десктопом всё ок, все проекты так же открываются, как должны, и без лагов.
А если я хочу сделать, чтоб сайт максимально задействовал экран?
как установить Figma на МАС. Что-то не получается
Почему гутеры на мобильных устройствах и дескстопе разные?
А какие правила у верхних и нижних отступов?
Это рассказывают про 3 бутстрап))) в четвёртом другая сетка) а вы смотрите это. Зайдите на сайт бутстрапа там все написано) в 4 бутстрапе сетка 1140 минус по 15 рх по бокам. В итоге 1110
7:29 у меня 77 получился а не 68 в чем у меня проблема хотя в точ точ сделал
Что делать если у меня нет такой кнопки как layout grids?
Привет,а ты переходы на opencartmasters.com/ здесь "есть информация" по поводу твоего вопроса.
На декстопной версии Вы сделали контейнер 1140,и сказали что про отступы разработчик знает.То есть мы не рисуем вторую сетку с двумя колонками,обозначая отступы,а верстальщик сам об этом должен знать?
Это ширина контейнера для контентной части. Но лучше при создании дизайна добавлять по 15px отступа слева и справа к ширине контейнера (т.е. 15px-> 1140px