Как сделать модульную сетку 960 grid? Вертикальные и горизонтальнве правила в дизайне сайта

671 ratings | 23797 views


Как сделать модульную сетку  960 grid? Вертикальные и горизонтальнве правила в дизайне сайта

Бесплатно учись веб-дизайну – Блог о веб-дизайне и интерфейсах – Я Вконтакте – Школа веб-дизайна Максима Солдаткина представляет новый урок для веб-дизайнеров Как сделать модульную сетку 960 grid? Вертикальные и горизонтальнве правила в дизайне сайта Зачем нужна модульная сетка? Смотрите в видео! Модульная сетка с точки зрение вертикальных и горизонтальных правил. Вертикальные и горизонтальные линии помогают нам определить расположение основных объектов дизайна. Так же рассмотрим правила модульной сетки для отступов. Рассмотрим модульную сетку на примере сайта lenta.ru. Таймкоды: 0:27 Модули, сетки, блоки 960 grid 1:45 Вертикальные и горизонтальные правила 2:00 Модульная сетка на примере Lenta.ru. Вертикальные оси 2:43 Отступы между колонками и блоками 3:35 Правила этого макета 4:00 Зачем нужна модульная сетка 5:04 Модульная сетка на примере USA TODAY 6:00 Правила этого макета 6:21 Вертикальные и горизонтальные правила 8:06 Последовательность 9:54 Самое важное Модульная сетка 960 grid и вертикальные правила в веб-дизайне. Школа веб-дизайна Максима Солдаткина представляет новый урок для веб-дизайнеров: я расскажу о том как построить модульную сетку, популярные заблуждения о модульных сетках, и мои личные рекомендации как правильно сделать модуль сетку для веб-сайта.

Comments to the video: Как сделать модульную сетку 960 grid? Вертикальные и горизонтальнве правила в дизайне сайта

Ирина Артемова 3 months ago
А можно ли поначалу приблизительно накидать элементы, а лишь позже подгонять их под сетку?
Ирина Артемова 3 months ago
Спасибо. У вас весьма отличные уроки. Вспоминаю, будто в институте, мы делали веб-сайты, однако нас вообщем не учили интернет-дизайну, даже основ не было! Какие же упоротые макеты были у моих одногруппников :D Ваши уроки понадобились бы в то пора. В их материала и толка больше, чем за 4 года в институте :)
Школа веб-дизайна Максима Солдаткина 3 months ago
Да, конкретно этак и необходимо мастерить
krysa 7 months ago
Спасибо. А сможете продолжить и поведать будто использовать сетку в адаптационных версиях веб-сайта под девайсы? Сколько необходимо отходить для инфы верхней строчки (там где заряд батареи, нотификации, пора и т.д), будто разнятся сетки для дроида и эппла, и тому подобные вопросы, которые могут появиться при проектировании адаптационных версий?
Школа веб-дизайна Максима Солдаткина 6 months ago
Спасибо, учту этот проблема в последующих видео)
Viktoria Perminova 8 months ago
Максим, благодарю за видео! А будто по опыту у тебя с различными веб-сайтами: ты обыкновенно для каждого придумываешь свою сетку, либо кушать какие-то обычные-испытанные кратности, которые ты нередко используешь?
Школа веб-дизайна Максима Солдаткина 8 months ago
Да, кушать рабочие методы, которые можно хватать и использовать)
Ahmed Strahov 1 year ago
ставлю лике не смотря)
Сергей Грабовский 1 year ago
Спасибо здорово!
Корчагин Денис 1 year ago
Спасибо это весьма комфортно благодарю ещё один))
Миша Зачарованный 1 year ago
где брать сетку для моб. устройств?
Школа веб-дизайна Максима Солдаткина 1 year ago
+Миша Зачарованный в гайдлайне операционной системы. гайдлайны ищутся гуглом.
Anastasiya Goch 1 year ago
а что если держаться сетки эталона бутсреп ну-ка к примеру 1200px-полный контент, 12 колок итого и отступы меж ними по 30px(15+15). Тоесть мобно ли использовать одну сетку будто базу в большинстве собственных веб-сайтов, если они не требуют другого? Скажем начинать дизайн с схожей сетки.
Школа веб-дизайна Максима Солдаткина 1 year ago
+Anastasiya Goch изволь)
Anastasiya Goch 1 year ago
+Школа интернет-дизайна Максима Солдаткина Спасибо за ответ:) Ваши уроки весьма информативны. Продолжайте в том же духе :)
Школа веб-дизайна Максима Солдаткина 1 year ago
+Anastasiya Goch конечно, можно хватать за базу пропорции bootstrap, это комфортно и ускоряет разработку
Дмитрий Алексеев 1 year ago
Спасибо! Горизонтальные и логика 10 - 30 - 50 (отчего такие значения), отсутствуют. Хочется про горизонтальные правила и базы композиции еще.
Евгений Астахов 1 year ago
Спасибо, сам понемногу дошёл до направляющих. Стараюсь попросту в массах накидать наружный облик странички отталкиваясь от ТЗ, позже сформировать какое-то правило, которое ,будто правило, вырисовывается из того, что набросалось)
Rafael 1 year ago
Макс привет, а не мог бы ты сделать что-то типа лаконичного гайда для тех у кого к примеру дудки средств ходить на курсы, иль тренинги по дизайну и т.д однако кушать жажда учиться, то бишь на каких ресурсах что учить, что декламировать, чему уделять внимание на исходных шагах ( я имею ввиду на данный момент тех, кто вообщем зеленоватый в этом ) На похожую тему у тебя по-моему кушать видео, однако хотелось бы чуток углубленно, если пора позволяет :)
Watches24-store com 2 years ago
Мне весьма нравяться видео, полезные познания. Но кушать малая закавыка мне 17 лет, а на Ваш курс, я смотрел приходят люд от 21 до 45 лет. Мне весьма нравиться интернет-дизайн и я в экстазе от этой професии. По этому желал справиться дудки ли никаких ограничений по возрасту и т.д.?
Школа веб-дизайна Максима Солдаткина 1 year ago
+Андрей Головкой о чем на данный момент лучше поведать?
Андрей Головков 1 year ago
+Школа интернет-дизайна Максима Солдаткина Макс где пропал, не хватает твоих обучалок :( уж весьма оходчиво все предоставляешь
Школа веб-дизайна Максима Солдаткина 2 years ago
+Валерий Mel ограничений по возрасту дудки, потому даже в 17 можно записываться и обучаться интернет-дизайну :)
Иван Голвинов 2 years ago
А в чем сложность выучить сетку по типу uikit, в которой колонки разбиты на части, поостроить вертикальный ритм и все. На выходе мы получим хоть какое размещение компонент в этих колонках, более гибкую и понятную всем В неприятном случае у Вас, я увидел она не весьма эластичная: - с каждым новым макетом необходимы правила - чтоб добавить другую колонку, необходимо вводить ее в правило Или я не сообразил сущности)?
Иван Голвинов 2 years ago
+Школа интернет-дизайна Максима Солдаткина , конечно кушать такое, согласен. Но для этого кушать технологии, динамические колонки, поменять расположения не нарушая структуру. и немало чего увлекательного. Ваш способ увлекателен, развивайте далее! Смотрел видео про типографику - отлично :) Спасибо за ответ! Я работал с дизайнерами и лицезрел/слышал будто они защищают свою работу, не учитывают аспекты о которых требуют верстальщики. Я к тому, что не все этот шаг проходят и тем самым не развиваются, этак будто на данный момент все уходит в скорость и при этом качество не надлежит прихрамывать. Жду новых видео!
Школа веб-дизайна Максима Солдаткина 2 years ago
+Иван Голвинов сущность в том, чтоб  1) начинать не с сетки, а с инфы, с иерархии 2) и не страшатся сетку под себя подстраивать и «разламывать»
Alex Kuznetsov 2 years ago
А кушать ли какие-то аспекты в рисовании веб-сайта под ретину?
Школа веб-дизайна Максима Солдаткина 2 years ago
+Александр Кузнецов конечно, для ретины рисунки в размере х2 необходимы и иконки в векторе
Vadym Ivanchenko 2 years ago
Спасибо огромное! Полезная информация.
Школа веб-дизайна Максима Солдаткина 2 years ago
+Vadym Ivanchenko на здоровье)
Мария Токар 2 years ago
Лайк за задание) Хоть малость прояснилось, что это за полосы вертикальные, а то все их отрисовывают, в псд-макетах их встречаю, а что они означают - было практически загадкой. Насколько я сообразила, поначалу мы рисуем нашу страничку, а позже малость выравниваем её, создавая правила? Подскажи, изволь, каким инвентарем можно нарисовать эти полосы в фотошопе? Или дай ссылку на видео, если уже говорил об этом. И еще парочка вопросов от ламера) На примерах полосы автоматом появлялись- это скетч делал либо ты их до этого прорисовал? Ты работаешь с бутстрапом? Бывают такие задачки?
Школа веб-дизайна Максима Солдаткина 2 years ago
+Мария Токар изволь, обращайся :)
Мария Токар 2 years ago
+Школа интернет-дизайна Максима Солдаткина  благодарю)))
Школа веб-дизайна Максима Солдаткина 2 years ago
+Мария Токар черта рисуется инвентарем «черта» :)  Линии в макете я заблаговременно нарисовал, позже сделал видимыми.  С бутстрапом работал когда стартапы делали, на данный момент я сам для себя бутстрап.
webdeveloper 2 years ago
Опять 960 грид ((( Думал будет про адаптивную сетку под бутстрап Extra small devices (phones, up to 480px): No media query since this is the default in Bootstrap Small devices (tablets, 768px and up): @media (min-width: @screen-sm) . Medium devices (desktops, 992px and up): @media (min-width: @screen-md) . Large devices (large desktops, 1200px and up): @media (min-width: @screen-lg) .
Школа веб-дизайна Максима Солдаткина 2 years ago
+webdeveloper видео ты похоже не смотрел. А про адаптивные веб-сайты, уместно, кушать отдельное видео.
OwliF 2 years ago
Как вечно, все по существу, понятно, здорово. Как и начинающим этак и не знакомым с сетью юзерам, будет здорово поглядеть и ознакомится. Молодец, благодарю!
Школа веб-дизайна Максима Солдаткина 2 years ago
+OwliF благодарю
Антон Компанеец 2 years ago
Полезное видео. Считаю что сетку необходимо подстраивать под дизайн, а не напротив :)
Школа веб-дизайна Максима Солдаткина 2 years ago
+Антон Компанеец всё этак)
Aleksandr Samoylenko 2 years ago
Спасибо за задание, весьма хорошо все поведано) Когда я лишь начинал заниматься интернетом, задавался многими вопросами, на которые не мог отыскать толкового ответа даже у знакомого верстальщика: какой ширины лучше мастерить макет, какую сетку использовать? И лишь спустя некое пора начал осознавать эти тонкости. Как по мне, то эталон 960рх - это итого только отрыжка прошедшего, когда все веб-сайты делались лишь под старенькие (для нашего времени) мониторы, этак ещё и табличной версткой. Про 6-ти, 9-ти и 12-ти колоночные сетки я вообщем молчу. Что, если, к примеру, необходимо нарисовать горизонтальное меню в котором кушать последующие пункты : продукция , сервис , о компании , корпоративная обязаность (!!!), проекты и контакты ? Корпоративная обязаность сокращению не подлежит (положим такое условие). Как в таком случае ровнять это меню по сетке? Второй же случай, это когда, к примеру, кушать контентные блоки, вышина которых зависит от высоты вложенной фото (рисунки) и текста под ним. Разве в таком случае вышина блока будет кратной, к примеру, 10 либо 5 пикселям? Высота будет стопроцентно зависеть от вложенного вовнутрь контента. Если же мастерить фиксированную высоту (по сетке), то полный этот макет будет кривляться при изменении контента либо ширины браузера (при адаптивной верстке). По-этому в современном дизайне понятие 9-ти и 12-ти колоночного веб-сайта звучит примитивно. Дизайнер, будто проектировщик, обязан сам осознавать какие блоки, где и будто должны быть выровненные, и будто они будут тянутся при изменении размеров экрана. По-этому, соглашусь с Максимом, что не стоит привязываться к каким-то стандартным модульными сетками, необходимо попросту осознавать и продумывать правила расположения и выравнивания блоков в макете веб-сайта.
Школа веб-дизайна Максима Солдаткина 2 years ago
+Aleksandr Samoylenko благодарю за такое подробное добавление)
Newprog0701 2 years ago
По поводу значимости контента: vc.ru/p/design-machine. Что скажешь?
Школа веб-дизайна Максима Солдаткина 2 years ago
+Newprog0701 а расскажи кратко, какие тезисы сообщаются в этой статье?
Кирилл Сикорский 2 years ago
Спасибо). Полезно, будто вечно). Но чуток весело смотрятся огромные руки)). Сетку использую покамест старенькую. Но буду содержать галочау в голове, если смогу приступить мастерить веб-сайты посложней. Пока медлительно даётся всё.
Школа веб-дизайна Максима Солдаткина 2 years ago
+Кирилл Сикорский для чего столько столбцов для лендинга
Кирилл Сикорский 2 years ago
Максим, я имею ввиду 960 px на 12 столбцов. для лэндингов отлично подходит.
Школа веб-дизайна Максима Солдаткина 2 years ago
+Кирилл Сикорский Старую?