Он упоминает геометрию традиционной японской архитектуры и даже опорную конструкцию крыши лондонского Хрустального дворца. Это одноколоночная сетка, которая определяет, где на странице будет располагаться текст. Мы можем увидеть ее в классических, “традиционных” книгах, при этом смежные страницы одного разворота зеркально отражают друг друга. В таких ситуациях ограничения оказываются чрезвычайно эффективными. Они дают нам отправную точку и предоставляют свободу для поиска возможных решений.
В частности, Мюллер-Брокманн — один из главных представителей швейцарского стиля — открыл новые возможности, создав модульные и вращающиеся сетки. Если вы когда-нибудь увеличивали масштаб документа в Photoshop, вы, скорее всего, видели, как на экране появляется пиксельная сетка. Цифровые экраны состоят из миллионов микроскопических пикселей, и иногда дизайнеры %KEYWORD_VAR% приближают изображение, чтобы отредактировать его попиксельно. Сетка из базовых линий — это плотная сетка, состоящая из равномерно расположенных горизонтальных линий, которые определяют, где будет располагаться текст. Такие сетки часто применяются в сочетании с колоночными, что позволяет равномерно выровнять строки в столбцах по всему развороту.
Модульная сетка в дизайне (швейцарская сетка)
Многие дизайнеры предпочитают сетку, потому что она визуально более привлекательна. Число колонок сетки может быть изменено через переменные SASS. Модульная сетка — инструмент, который помогает сделать дизайн-макет. Она состоит из простых геометрических фигур — модулей одинакового размера, расположенных в определённой последовательности.
Если бы основным контентом сайта были длинные истории или большие изображения, я бы не использовал разметку тремя столбцами, потому что мне нужно больше горизонтального пространства. Поэтому я бы поместил навигацию сверху и использовал бы два столбца. Эта разметка очень универсальна и подходит для внутренних страниц сайта, например, когда у вас есть много текста для чтения. Примерами являются блоги, инструкции, часто задаваемые вопросы, гайды, или другие полезные вещи для пользователя. Но ведь тогда у меня будет гораздо меньше места для дизайна», — могли бы сказать вы.
Метод 2. Оставьте точные значения для полей (например, 24pt) и используйте дробные размеры столбцов
Таких блоков делаем четыре штуки и разворачиваем структуру. И что мы видим, вроде бы блоки уменьшились, но в тоже время они не по центру. Для их выравнивания по горизонтали добавляем col-xs-offset-2, то есть, не учитываем две первые ячейки. Первая блок будет занимать шесть колонок по ширине, за ней два блока в три колонки.
Дизайн главной страницы сайта IT-компании GartLight Solutions. Пример небольшой дизайн-системы для сайта IT-компании GartLight Solutions. Пример комбинированной сетки в дизайне сайта по проектированию https://deveducation.com/ медицинских учреждений «YSproject». Пример, как часть изображения вне сетки может обрезаться на экране при масштабировании. Дизайн сайта по проектированию медицинских учреждений «YSproject».
Что такое модульная сетка и для чего она нужна дизайнерам
Мне очень нравится этот пример, потому что это своеоброзное напоминание о том, что вы можете разбить страницу как вам угодно. Здесь заголовок и большой CTA — это модуль, который работает как оператор заголовка перед тремя столбцами. Если присмотреться, то в центре можно увидеть всё те же 6 столбцов.
Больше подборок и увлекательных статей ищи в нашем блоге или Telegram. Мобильное приложение Slack скрывает свою навигацию в верхнем левом значке. Google Keep — в бургер-меню, а ещё показывает новую липкую кнопку для создания новых заметок. В веб-версии Youtube навигация находится в нижнем колонтитуле.
Размер каждой колонки составляет 60 рх, а отступы между ними — 20 рх. Сетки бывают простые, сложные, фиксированные, динамические, но не в этом суть, главное осознайте, для какой цели ее используют. Раннее до возникновения сеток, приходилось использовать нарезку графических элементов с дизайна страницы, и компоновать их, используя табличную верстку. Сейчас же, в современном дизайне, есть возможность разбить страницу по модульной сетки на блоки. Тем самым изменяя размер страницы, можем предположить, как блоки ведут себя на разных разрешений экрана. Вообще «модульная сетка» в веб, пришла из полиграфического дизайна.
Изображения можно было поворачивать, искажать и накладывать друг на друга. Можно было быстро и без лишних затрат собрать на экране целую газету или журнал, не прибегая к дорогостоящему процессу печати. В качестве примеров он называет созданные пчелами соты и примитивные карты пропорций человеческого тела. Он также рассматривает египетские пиктограммы, Библию Гутенберга и музыкальные манускрипты (которые, если вдуматься, являются своего рода детализированными сетками).