Сетки для адаптивного дизайна / Rambler Group corporate blog / Habr
Мы собрали наиболее частые темы, связанные с сеткой в адаптивном дизайне, чтобы «повысить резкость» термина как такового и систематизировать практические знания: как настраивать сетку в дизайн-макете, по каким параметрам делать расчет, какие особенности адаптивной среды учитывать и на какие детали обращать внимание.
Задача сетки не только в том, чтобы поддержать эстетику, но и в том, чтобы сохранять контроль над процессом разработки, делать сам процесс гибким как для дизайнера и для разработчика. Сетка — это как хорошо упакованный рюкзак, который вы передаете разработчику, чтобы он смог им пользоваться с удобством и пониманием вашего видения проекта.
Прежде чем создавать сетку, нужно «исследовать рабоче поле» — сделать черновой макет страницы, найти ограничения и критические области, которые обязательно проявят себя на этапе детального проектирования. Это помогает свести абстрактное понимание задачи к конкретным целям. После этого можно приступать к настройке рабочей сетки в макете. Для этого нужно создать структуру из трех типов сеток —
Базовая сетка
Базовая сетка близка по свойствам и назначению к миллиметровой бумаге. Она нужна для создания удобной среды, которая позволит вам двигать мелкие детали макета не задумываясь и не беспокоясь о том, чтобы все расстояния между элементами были равны, единообразны.
Шаг сетки зависит от таких атомарных неделимых частиц, как радио-кнопка, чекбокс, базовый шрифт и высота строки, минимальное расстояние между видимыми блоками контента, например, между фотографиями в галерее или карточками товаров.
Базовая сетка должна сочетаться с колоночной. Дефолтные настройки Photoshop предлагают дизайнеру сетку с шагом в 10 px, что соответствует смещению объекта по горячей клавише shift, но не соответствует ни кеглю шрифта, ни логике построения колонок и отступов. 10 px — целое число, но не более того. В настройках сеток для мобильных платформ хорошим шагом можно считать 4 или 8 px. Здесь же шаг сетки должен ровно укладываться в высоту строки основного текста и не быть слишком мелким.
Колоночная сетка
Для лендингов, сайтов с карточной структурой, портфолио и галерей резиновая адаптация работает хорошо. Для крупных агрегаторов и классифайдов с большим количеством форм, полей ввода и мелких контролов резиновое масштабирование создает трудности. Оно тяжело поддается контролю и часто деформирует элементы, разрушает структуру: теряются ключевые данные из первой прокрутки (например реклама), элементы сползают на следующую строку, целостность текстовых блоков разрушается, формы становятся чрезмерно широкими, пользователь вынужден слишком долго прокручивать страницу.
В адаптивном дизайне нужно сохранять структуру макета и аккуратность подачи информации для всех разрешений, поэтому макеты следует делать для всех контрольных точек. При этом колонки сетки остаются статичными и добавляются по мере увеличения ширины экрана, а элементы меняют свое положение, подчиняясь колоночному ритму и точкам перехода,
Сколько колонок выбрать для сетки?
Колоночная сетка отвечает за горизонтальный ритм, и чтобы таковой возник, нужно выбрать соотношение ширины колонки и отступа, которое позволит легко менять положении более крупных блоков. Это возможно, когда в крупный блок помещается несколько колонок, например 3-4. Отступ в данном случае, это воздушное поле, в котором не следует размещать элементы. Это важно в том смысле, что отступ — это не еще одна направляющая, по которой можно выравнивать элементы.
Соответственно, при выборе количества колонок нужно держать в уме, сколько прямоугольных модулей будет использоваться на странице. Например, будет галерея из шести фотографий с текстовыми описаниями, два крупных графика и три абзаца текста. Тогда число колонок должно быть кратно 2, 3 и 6. Подойдет число 12. Деление рабочей области в 960 px на 12 колонок с шириной отступов в 10, 12, 16, 15 и 20 px даст ширину колонок в 60, 64, 65, 68, 70 px. Таким образом получится несколько вариантов сетки, например сетка в 12 колонок с шириной колонки в 64 px и отступом в 16 px.
Почему число в 12 колонок привычно? Все современные мониторы работают в разрешениях начиная, как минимум, с 1024×768. Разбиение рабочей области 960 px на 12 колонок подходит более всего, так как хорошо делится на колонки и отступы, кратные 2. Исходя из этого можно выбирать число колонок и для других разрешений — 10 колонок для 768 px, 16 колонок для 1280 px и 20 колонок для 1440 px и более. По сути колонки прибавляются либо убавляются для каждого разрешения.
Если же отталкиваться от задачи построить сетку под баннерную рекламу, то нужно найти оптимальную ширину отступа и колонки, исходя из деления ширины баннера в 300 и 240 px. Из всех вариантов деления подходящими (совпадающими) размерами будут 10, 12, 15, 20. Баннерная реклама, как таковая, проходит через большинство сайтов, почти как полоса общественного транспорта, и мы мало можем влиять на нее. Но можно рассчитать колонки иначе и допустить незначительный выход баннера за пределы одной колонки по правому краю, но тогда сама сетка будет строиться на других модулях (например, на карточках товаров или видео-роликов). В этом случае следует на этапе дизайна лейаута продумать где на странице будет фиксированное положение баннеров, и какие элементы должны сопровождать эти баннеры, чтобы вместе создавать модуль, подчиняющийся сетке.
Дизайнерская сетка
Дизайнеру нужно создать лейаут, который будет учитывать не только баннерную рекламу, но и другие не менее значимые элементы и типы контента: вертикальные постеры фильмов, квадратные музыкальные обложки, крупные фотографии, видео, статьи по десять штук в одном ряду и так далее. Лейаут может складываться из двух узких колонок по бокам и одной широкой по центру. Может из одинаковых колонок с широкими отступами, а может даже состоять из «плавающих» колонок (когда две, когда пять), но так, чтобы это становилось видимым за счет повторения компоновки материалов и вложение «меньшего в большее». Небольшая цитата из совет о якорных объектах Артема Горбунова
Прямоугольник — базовая фигура модульной вёрстки
Хорошая крепкая сетка строится на прямоугольных модулях. Композиция удалась, если всё, что вы нарисовали, можно обвести пропорциональными прямоугольниками, и они помещаются на странице, не налезая друг на друга и подчиняясь горизонтальному и вертикальному ритму.
Что именно это значит на практике? Пример из физического мира — модульная сетка в стене с отверстиями Kerf Wall, на которой можно расположить ящики и полки в любом порядке. Вы можете даже велик повесить на такую стену — главное, чтобы объекты не мешали друг другу, иначе они свалятся. Тоже самое и с крепкой сеткой.
Отдельно о Сетке базовых линий (baselinegrid)
Исторически с понятием вертикального ритма хорошо знакомы пользователи InDesign. В настройках они могли задать высоту строки для горизонтальной сетки и работать по ней. Но для дизайнера вертикальный ритм — это «оптическое понятие», для расчета которого нет точных параметров, поскольку создается он кропотливой проработкой каждого текстового блока, строк и отступов. В веб-дизайне все эти тонкости реализовать тяжело. Не достаточно просто подтягивать интерлиньяж всех шрифтов под одну высоту строки — это приведет к тому, что в крупных абзацах строки слипнутся, а в мелких — разъедутся.
Для создания вертикального ритма с помощью CSS разработчики используют оптически комфортную высоту строки базового шрифта и интерлиньяж всех текстов, кратный этой высоте. Текст, подчиненный такому вертикальному ритму, хорошо выглядит на странице с одной статьей, где много воздуха и не так сильно заметны слипшиеся текстовые строки большего размера шрифта.
Пример вертикального ритма на WebTuts+:
Наоборот, не лучшим образом получится применить вертикальный ритм ко всем текстам на странице, когда текстов разного размера много. Характерный пример — инструмент Калькулятора вертикального ритма.
В совете о работе с межстрочным расстоянием в блоках с разным размером текста Артем Горбунов говорит о том, что сетка базовых линий скорее вредна, и что высоту строки текста и отступов лучше настраивать вручную. Интерлиньяж текста следует подбирать в зависимости от формата (модуля, плашки, текстового блока). Если строки в текстовом блоке короткие, то интерлиньяж можно сделать меньше. Если текстовый блок достаточно широкий и строки в нем длинные, то интерлиньяж следует сделать больше, иначе текст потеряет удобство чтения.
Подбирать высоту строки следует по соотношениям внутри каждого абзаца текста: от длинны строки зависит интрельяж, от интрильяжа зависит отступ заголовка и все вместе зависят от внешних левого и правого полей, которые должны быть больше внутренних отступов по Правилу внутреннего и внешнего и Теории близости.
Существует множество фреймворков, CSS-сеток, и многие из них предлагают создавать высоты строки примерно в полтора раза большую, чем размер шрифта и вписывать в получившуюся линию все остальные строки текста. Например UnitGridSystem. Некоторые предлагают определять интервальное число и выставлять интрильяж для всех текстов кратный этому числу. Но в этом случае от части шрифтов придется отказаться. В качестве компромисса подойдет инструмент Grilover. Он отличается от других тем, что не просто регулирует высоту базовой строки шрифта, но и компенсирует слипание/расползание строк параметром Scale factor.
Использование сетки при передаче макетов в верстку
Сетку полезно передавать верстальщикам в виде отдельной спецификации. Вы можете не только приложить к основному джипегу дополнительный джипег с сеткой, но прописать на нем основные размеры — например шаг, отступ, ширину колонки, размеры шрифтов. Тогда соответствие вашего макета и верстки станет более точным, и контроль над разработкой и синхронизацией повысится с обеих сторон. Точно также как в мобильных интерфейсах существуют независимые пиксели (dp), так и в вебе это единицы rem. Вы можете создать разметку в пикселях или прописать ключевые элементы и расстояния в rem. Удобно когда шаг вашей сетки и rem кратен одному и тому же числу. Например, если шаг сетки 8 px, базовый шрифт — 16 px и rem равен 16 px, то размеры элементов и расстояния при кратности 4 будут становиться на сетку и иметь целое значение в rem. Это позволяет сразу видеть расстояния между элементами по шагам на сетке. Такие цельные значения без долгих расчетов можно получить наглядно, если воспользоваться Rem Калькулятором.
Полезные ссылки:
О паттерне распознования текста и вертикальном ритме на Smash Magazine
Еще о сетке на teehan+lax
Grilover и Typecast
Статьи и примеры сеток на The Grid System
Пример поиска композиции для дизайнерской сетки с помощью модулей — Gridfier.
9 лучших сеток для веб и мобильного пользовательского интерфейса
Надеюсь, что этот список кому-нибудь поможет. Я попытался собрать наиболее интересные системы.
Сетка Bootstrap
Bootstrap · Самый популярный в мире mobile-first и адаптивный фронтенд фреймворк.
Самый популярный вариант для нас. Чаще всего 12 столбцов с отступами. Стандартная и простая система. Большинство интерфейсов построено на этих принципах, и на ее основе создаются многие из перечисленных ниже систем. Очень быстро осваивается, но эта сетка создает внутреннюю стандартизацию.
Хотя, скорее всего, это сходство будет видно только дизайнерам.
Сетка на основе BootstrapСетка Google Material Design
Адаптивный пользовательский интерфейс материального дизайна, в основе которого лежит сетка из 12 колонок. Эта сетка создает визуальную согласованность между элементами… material.io
Google Material Design. Большинство дизайнеров сталкивались с этой системой, очень удобной по своей сути. Руководства хорошо описаны. Одно из самых передовых решений на рынке. Но, к сожалению, заставляет использовать системы Google, которые не прекращают их изменять;)
Сетка Google Material DesignСетка Flexbox
Это система сеток, основанная на свойствах дисплея. flexboxgrid.com
Старая система блочной верстки HTML, теперь она используется редко, хотя она дает достаточно интересную возможность для изменений.
Лично мне, довольно сложно работать с ней.
Сетка FlexboxCustom modular grid based HTML
Существует множество примеров, когда вы берете за основу принципы bootstrap. Это система из 6 или 12 колонок, и дизайнеры переделывают ее. Измените размер отдельных блоков, сделайте их неравными и так далее. Сейчас это тренд.
Custom modular grid based HTML 100px / 200px / 300px / 400pxCrow Grid Framework
Crow v3.0 – умный сеточный фреймворк
По сравнению с другими системами она не очень популярна, интересная и свежая, напоминает конструктивизм плакатов. Возможно однажды она станет очень популярной.
Human Interface Guidelines
Принципы дизайна – Краткое описание – iOS Human Interface Guidelines
Узнайте о разработке приложений для iOS.developer.apple.com
Human Interface GuidelinesОчень мало сказано о модульных системах, но их принципы очень интересны. Разумеется, в первую очередь подходит для iOS.
Human Inter
Сетка Human InterHuman Inter довольно своеобразная система, которая подойдет далеко не каждому проекту. В ее основе лежат принцип золотого сечения и Витрувианский человек. При использовании одним из наиболее важных аспектов является горизонтальная линия. Это сетка, в основе которой лежит bootstrap.
Если вы хотите увидеть правила и руководства пользователя для этой системы, напишите мне на email: ivantsanko11@gmail.com
Твиттер разработчика: ivantsankoart
Карл Герстнер: Проектирование программ
Карл Герстнер родился в Базеле, Швейцария в 1930. Он был дизайнером и художником…www.historygraphicdesign.com
Очень интересная система, которую на данный момент трудно включить в современные интерфейсы. Мне было интересно узнать об этой системе, как она работает и какие принципы лежат в ее основе. Если у вас есть желание, было бы очень интересно реализовать ее в современном интернете.
Fluent Design System
Яркая дизайн-система для сложного мира. Настало время для смелого, масштабируемого, универсального дизайна. И это… fluent.microsoft.com
Абсолютно новая система от Microsoft. На сегодня о ней еще мало известно, но презентационное видео очень интересно демонстрирует как в компании видят современный дизайн.
В заключение я бы хотел сказать: Я был счастлив помочь вам найти новые системы и обсудить их.
Социальные сети
Twitter: https://twitter.com/ivantsankoart
Behance: https://www.behance.net/tsankoi2f09
Email: tsankoivan11@gmail.com
Сетка в помощь при создании адаптивного сайта — CMS Magazine
Количество колонок можно легко увеличивать и уменьшать, в зависимости от нужного разрешения. Например, если ваша контентная область будет все 1920 рх, то запросто можно прибавить по 6 колонок с обеих сторон. А если 320 рх, то оставить всего 4 колонки.
Для большего удобства я предпочитаю дополнительно делить рабочую область вспомогательными базовыми линейками:
Предлагаю вам рассмотреть пример сайта с разрешением 1920?1080 и контентной частью в 960рх, так как на сегодняшний день они наиболее распространенные.
А вот как он выглядит с наложением сетки и линеек:
Мы видим, что абсолютно все элементы вписываются в сетку. Все четко и правильно, аккуратные ровные столбцы. Единственное, с чем могли возникнуть проблемы — это элементы, которые в примере обозначены звездами. Это могут быть как иконки с текстом, так и фотографии в портфолио, или просто столбцы с текстом. Чтобы правильно рассчитать расстояние, мне не пришлось делать сложных вычислений, вымерять каждый пиксель, плодить не нужные в будущем линейки и так далее. А все потому, что есть сетка. Итак, у меня 4 «звезды» и 12 колонок, следовательно, делим 12 на 4 и получаем по 3 колонки на каждый пункт. То есть центр каждой «звезды» должен располагаться посередине центральной из выделенных на нее колонок.
Но, к примеру, у вас не 4, а 11 таких пунктов. Скорей всего, они не поместятся в контентную часть в один ряд, значит, сделаем 2 ряда — 6 сверху и 5 снизу или наоборот. Берем наши 12 колонок и делим на 6. Получаем подве колонки на пункт, то есть центр каждого пункта будет располагаться посередине промежутка между двумя ее столбцами, прямо на линейке, и так далее. Разрешения меньше 1920 рх (вплоть до 960 рх) разбирать не будем. Так как контентная часть у нас 960 рх и перестраивать ничего не нужно, макет просто обрезается с обеих сторон.
Разрешения меньшие 1920 рх вплоть до 960 рх разбирать не будем. Так как контентная часть у нас 960 рх и перестраивать ничего не нужно — макет просто обрезается с обеих сторон.
Рассмотрим разрешение 768?1024. Здесь колонок уже 8. Начнем с шапки. Логотип, номер телефона и другие элементы просто сдвигаем к центру, а вот пункты меню у нас уже не постятся, так что само меню лучше сделать всплывающим:
Заголовок тоже великоват. Поэтому, если нет возможности переноса на другую строку, уменьшаем размер шрифта. Вообще все заголовки по сайту можно уменьшить так, чтобы огромные буквы не резали глаз, а вся страница смотрелась более гармонично.
Наши «звезды» здесь пришлось переместить. И теперь каждой досталось по 4 колонки, появилась возможность немного раздвинуть текст.
Следующий блок тоже перестроился:
В некоторых случаях приходится уменьшать изображение, в других урезать текст. Но всегда необходимо сохранять важную информацию в центре внимания. Далее оставляем все как есть. И вот что у нас получилось:
Снова все ровно, четко, красиво и вписывается в сетку. Полностью сохранена структура страницы. В меньших разрешениях, вплоть до 480 рх, все делается по тому же принципу, останавливаться на них не стоит. А вот что действительно заслуживает внимания и считается самым сложным — это мобильное разрешение в 320?480 рх, им и займемся. Сокращаем нашу сетку до 4-х колонок и формируем шапку. Если логотип слишком большой, можно его немного уменьшить. В своем примере я оставляю все как есть. А вот номер телефона уже не помещается — его можно переместить ниже, убрать во всплывающее меню, а можно как у меня — оставить только кнопку для звонка.
В этом разрешении нужно по максимуму сократить количество всяческих картинок, чтобы снизить время загрузки сайта. Но если без основной картинки на главном экране никак не обойтись, ее можно сохранить. Только постараться сделать ее как можно легче. Шрифты заголовков уменьшаем, но так, чтобы все-таки было ясно, что это заголовок, а не просто текст. Расстояние между блоками также стоит немного сократить, главное — чтобы вся страница смотрелась пропорционально и гармонично
Здесь наши пункты со звездами выстаиваются одна под одной. Но бывают случаи, когда картинка, которую заменяет звезда, не слишком важна по смыслу (например, — небольшая иконка). Тогда моно и перестроить этот блок по такому примеру:
Данный блок тоже был перестроен. Фоновая картинка удалена, если изображение не несет никакой смысловой нагрузки — его лучше убрать. Этим принципом всегда стоит руководствоваться при создании мобильной версии сайта.
Карту оставляем нетронутой, самое главное — чтобы она в высоту вписывалась в 480 рх. И подвал обычно сложностей не вызывает.
Итак, вот что у нас получилось: структура снова полностью сохранена, все элементы расположены ровно, даже мобильная версия легка и приятна для восприятия, нет никаких лишних деталей, все на своих местах.
Из всего вышесказанного можно сделать вывод: сетки кажутся лишними, неудобными и ненужными только если вы никогда ими не пользовались. Но стоит с ними немного поэкспериментировать, найти для себя наиболее подходящие, как уже не представляешь своей работы без них.
анализ, расчет и построение / Habr
IntroКраткая предыстория
Привет, Хабр. Я читаю тебя без малого 10 лет, но ни разу не писал статей. Сначала сказать было нечего, потом — некогда. Но сегодня звёзды сошлись и подвернулась подходящая тема. Модульная сетка.
Казалось бы, набросать сетку — дело пяти минут. Всё разжёвано до нас, и бутстрапы есть на любой вкус, и «Аннушка уже пролила своё масло…». Но на практике у дизайнеров частенько возникают вопросы. Многих вводят в ступор даже небольшие отступления от привычных 12-колоночных сеток, потому что им не до конца понятны принципы построения.
Когда-то эту тему хорошо раскрывал цикл статей Алексея Черенкевича, но тексты пропали из открытого доступа. И хотя их ещё можно найти в архивах, сами тексты за прошедшие годы несколько устарели.
Словом, в очередной раз отвечая на вопрос по модульной сетке и не найдя ни одной подходящей ссылки, решил как-то обобщить в заметке всё, что размазывалось по десяткам комментариев на разных сайтах.
Как работает сетка
Любой макет содержит элементы. И порой их очень много. Между элементами возникают оптические связи и притяжения, которые подчиняются теории близости и, в частности, правилу внешнего и внутреннего.
Сетка помогает соблюдать это правило, не вычисляя каждое расстояние и размер в отдельности. Вы закладываете ключевые закономерности один раз, при построении сетки, а затем просто придерживаетесь их.
В отличие от колоночной, модульная сетка задает вертикальный ритм и основные пропорции элементов, поддерживая их во всем макете. Это удобная, гибкая и довольно простая система. При условии, что вы достаточно вникли в ее принципы.
Чем определяется структура сетки
Модульная сетка строится в двух направлениях: горизонтальном и вертикальном. Грубо говоря, это комбинация колонок и рядов с разлиновкой макета на строки.
Последнее интуитивно понятно всем пожилым аксакалам, которым доводилось с помощью карандаша и линейки сотнями чертить горизонтальные линии на листах для рефератов. Впрочем, не удивлюсь, если студенты делают это до сих пор.
Итак, если вам нужно построить сетку с нуля, вы будете отталкиваться от двух вещей. Во-первых, от контента, который нужно разместить в макете: текстов, иллюстраций, таблиц, перечней, медиафайлов. Во-вторых, от пропорций и площади носителя: бумажного листа, экрана, холста или чего-то более экзотического.
Если контент простой и неизменный, и известен вам заранее, то проще всего будет отталкиваться именно от него. Если же контент сложный и непредсказуемый (например, user-generated — пользовательский), то сетка в большей степени будет определяться форматом носителя и общими принципами типографики и композиции.
Начало построения. Вертикальный ритм
Когда речь идёт о сайтах или печатной продукции, дизайн во многом зависит от типографики и свойств текста. Поэтому построение сетки удобно начинать с вертикального ритма.
В первую очередь вам нужно нащупать два взаимосвязанных ключевых параметра: базовую высоту строки и базовый размер шрифта. Проще говоря (хи-хи), базовые интерлиньяж и кегль. И вот эта простенькая задача постоянно вводит людей в ступор. «Как мне узнать нужную высоту строки?», «А какой шрифт брать?», «А сколько строк нужно делать для буклета? А для визитки?» и т.п.
Вариант «А». Подход «от строки»
Если у вашего носителя фиксированный размер и вам уже известен весь ключевой контент, то интерлиньяж можно прикинуть заранее.
Для этого нужно представить, что каждый элемент дизайна, включая отступы, занимает по высоте некоторое количество абстрактных строк. Потом сложить все строки вместе и разделить на них высоту макета. А затем каждую абстрактную строку разбить на N реальных строк, соответствующих нужному интерлиньяжу — так, чтобы в них адекватно поместился заданный текст.
Простой, но подробный пример с картинкой
Допустим, вам нужно сверстать на листе А4 список лучших работников месяца. Их у вас трое. Для каждого сотрудника вы делаете блок-карточку: слева фото, справа текст. Фотография крупнее, поэтому высота карточки равна ее высоте. Кроме того, на листе нужно разместить шапку с заголовком, а внизу — блок контактной информации [профсоюза гениев].
Вы анализируете задачу и мысленно прикидываете относительные высоты всех элементов. Вы предполагаете, скажем, что будущая шапка по высоте займет примерно половину высоты фотографии. А в подвале окажется много всего, и он получится где-то равным фотографиям по высоте. Плюс-минус лопата. Вы пересчитаете это снова, если понадобится.
Если теперь принять высоту шапки за одну «строку», получится, что весь ваш контент занимает 9 абстрактных «строк». Если вам трудно абстрагироваться от интерлиньяжа, назовите эти «строки» рядами или горизонтальными блоками. Предположим, вы еще захотите добавить по 1/2 строки воздуха перед верхним и нижним краями листа. Итого, ваш макет нужно делить на 10 строк:
В результате вы делите ваш носитель (лист A4) по высоте на 10 «строк». Получаются блоки высотой около 3 сантиметров. Очевидно, что это слишком крупная разлиновка, чтобы верстать по ней тексты, контактную информацию и прочие мелочи.
Вы смотрите на свои текстовки и понимаете, что возле каждой фотографии у вас получается описание где-то на 10—12 строчек текста. То есть, каждый блок нужно разделить еще на 5—6 частей. Предположим, вы перестраховываетесь и берете большее значение, чтобы по одной строчке ушло на отступы. Бинго. Теперь ваш макет представляет собой 10 блоков по 6 строк в каждой. То есть 60 строк. С учетом высоты листа (~300 мм), каждая строка получилась высотой ~5мм. Всё, можно прототипировать прототип, а затем дизайнить дизайн.
А как же быть с размером шрифта? О, теперь всё очень просто! По всё той же логике «правила внешнего и внутреннего», интерлиньяж должен составлять примерно 150—200% от высоты кегля. То есть размер вашего шрифта будет в 1,5—2 раза меньше высоты строки. А это от 2,5 до 3,3мм. Этот размер несложно подобрать в пунктах или даже просто на глаз.
Подчеркну, что не обязательно вымерять тысячные доли с калькулятором. У вас есть глазомер и чувство пропорции — их должно быть достаточно. И даже если они пока не развиты, спустя сотню-другую макетов вы сможете попадать в сетку пальцем с точностью до 1-2 пикселей, даже при скрытых направляющих и отключенной привязке. И не забывайте, что человеческий глаз воспринимает размеры и расстояния с поправками на физиологию. Поэтому и сама сетка — не догма, а лишь грубое подспорье в расчетах. Последнее слово всегда за оптической компенсацией. К этой теме вернёмся ниже.
Ещё момент. Бывает так, что после всех расчетов выясняется, что шрифт слишком крупный или интерлиньяж слишком мелкий. В этом случае вы либо делаете перерасчет сетки, либо просто используете пропорциональные значения. Как правило, компромиссный вариант — это половинный или полуторный интерлиньяж.
Вариант «Б». Подход «от кегля»
Далеко не всегда у вас будет предсказуемый контент и фиксированный холст. В веб-дизайне вы куда чаще работаете с тотальной неопределенностью.
Иногда это похоже на художественную лепку из соплей. Высота вашего макета условно бесконечная, ширина — плавающая, основной контент пользовательский, встраиваемые виджеты предоставлены артелью «Пупкин и сыновья», а реальные тексты страниц заказчик собирается показать вам где-то примерно за день до запуска сайта. Но это не точно.
В таких условиях, очевидно, нет смысла пытаться определять количество строк. Зато можно танцевать от обратного: от размера шрифта (кегля). И это даже проще.
Всё, что вам нужно, это выбрать для проекта базовый кегль, который будет достаточно крупным, чтобы хорошо читаться, и при этом достаточно компактным, чтобы в строку основных текстовых блоков помещались 7—8 слов. Строго говоря, для русского языка достаточно и 5—6 слов, потому что в среднем у нас, конечно, длиннее и тверже. Но это ориентир, а не догма. Опираться нужно на конкретный макет, конкретный шрифт плюс собственное зрение и опыт.
В общем случае, ваш базовый кегль для десктопных версий сайта окажется в диапазоне от 14 до 22 пикселей. Причем тенденция идёт в сторону укрупнения.
Для педантов отмечу: таки да, для кегля уже изобретены относительные единицы измерения, и это прекрасно. Но если мы углубимся в это здесь, то старость наступит незаметно, и первую сетку наш юный читатель достроит примерно к тому моменту, когда в полной мере прочувствует бесперспективность своих отчислений в пенсионный фонд. Поэтому и здесь, и далее по тексту «px» — простые квадратные пиксели. Без учёта ретин, без учета адаптивностей, а также «без колонок, без усилка и без защиты от дурака, которого ты здесь валяешь».
Сразу ответ на частый вопрос: «базовый» не означает «самый мелкий». В любом макете почти всегда будут и менее заметные надписи: сноски, примечания, подстрочники и т.п. Здесь же речь идет о том шрифте, которым вы будете набирать основную массу текста. Вспомните любой текстовый редактор. Вы открываете новый файл и начинаете печатать каким-то «просто шрифтом», лишенным какого-либо специального форматирования — это и есть базовый шрифт, basefont. Если вам нужно сделать надпись помельче, никто не запрещает использовать мелкий кегль, это нормально.
Итак, определились с базовым шрифтом. Что дальше? А дальше — интерлиньяж. По уже упомянутым традициям современной типографики он составит 150—200% от кегля. А иногда и более.
(Подчеркну: речь о современных реалиях. Просьба не попрекать Брингхерстом и другими классиками книжной типографики — они, безусловно, взорвали свой танцпол, но с тех пор мир немного изменился. Те 120—180% всё-таки рассчитывались для книг, да ещё и в латинице).
Таким образом, ваш базовый интерлиньяж почти всегда окажется где-то в диапазоне от 22 до 40 пикселей.
По личному опыту, для простых коммерческих сайтов довольно удобен базовый интерлиньяж 15px. (Подразумевается 30px, но на уровне верстки удобнее сразу работать с половинчатым, т.к. он дает хорошие отступы в 15px и 45px. Важно понять, что в контексте модульной сетки 15 и 30 суть одно и то же — вы просто работаете либо с половинным значением «тридцатки», либо с целым значением «пятнашки»). Хотя при всей любви к классическим модульным сеткам, не отрицаю плюсы той же трендовой 4-пиксельной сетки для UI-дизайна. Сетки разные нужны, сетки разные важны. Это инструмент, а не религия.
Результат по вертикали
Теперь, когда у нас есть базовый интерлиньяж, мы можем разлинеить макет и следовать, наконец-то, вертикальному ритму. Это значит, что каждый элемент дизайна будет занимать по высоте некоторое число строк. С ритмом становится удобно и легко работать. Не нужно вычислять точные значения в пикселях. Вы меряете всё строками. Заголовок первого уровня — 4 строки, иллюстрация — 8 строк, аватар — 3 строки, кнопка — 3 строки, меню — 5 строк, отступ — 1 строка и т.п. (Надеюсь, вы понимаете, что это фигуральный пример, а не рецепт успеха).
К слову, жесткий ритм особенно удобен для верстки с CSS-препроцессорами. Верстальщику достаточно заменить одну переменную с базовым интерлиньяжем, чтобы весь сайт пропорционально уменьшился или увеличился. Это не означает, что на этом его работа закончится, но избавит от тонны рутинных операций по адаптации каждого компонента дизайна в отдельности.
Колонки и межколоночный интервал
От чего зависит число колонок
В первую очередь, от контента. Здесь всё проще, чем с высотой. Если речь идёт о печатной продукции, вы в подавляющем большинстве случаев можете предположить число колонок еще на стадии первых черновиков.
Например, если вы верстаете блок про времена года, вашим магическим числом наверняка будет 4. Вы можете сгруппировать их в один ряд или в два. При этом число колонок получится кратным либо двум, либо четырем. То есть есть смысл опираться на числа 2, 4, 6, 8, 12 или 16.
Усложним. Предположим, под блоком с временами года у вас идёт блок с тремя рекламными объявлениями. Очевидно, для этой части макета удобнее было бы число колонок, кратное трем: 3, 6, 12… Но сетка в 3 колонки явно неудачна для времен года. Поэтому нужно искать для них какой-то общий знаменатель. Предыдущий абзац подсказывает, что вам нужна сетка на 6 или 12 колонок.
*Еще пример. Вам нужно сверстать типовой блок-визитку, состоящий из логотипа/аватара (слева) и контактной информации (справа). Сколько нужно колонок? Давайте прикинем.
Если мы хотим сделать равновесную композицию, то можно обойтись даже двумя колонками. В этом случае выравнивание лого будет центральным, а текст придется размещать на глаз. А можно предположить, что текст по ширине занимает места примерно вдвое больше, чем логотип, и соответственно сделать блок в три колонки. А можно пойти еще дальше и заложить в сетку еще и отступы. Допустим, слева и справа будет поля по 1 колонке, логотип займет 2 колонки, текст 4, плюс 1 колонка отступа между лого и текстом — итого 8 колонок.*
Вот таким нехитрым образом вы рассуждаете, продумывая сетку. Если контента много, а глаз не намётан, можно с первого раза пролететь и по мере проработки деталей макета понять, что сетка не годится. Это нормально. Ничего страшного.
Когда речь идёт об отдельно взятом макете, подогнать дизайн под новую сетку нетрудно. Если же проект большой и предполагает изобилие страниц или макетов с единой канвой (сайт, брошюра, книга и т.д.), лучше заложить в сетку некоторый запас прочности и хорошенько протестировать ее со случайным контентом из разных страниц. Запас прочности, как правило, достигается кратным увеличением числа колонок: например, вам сейчас нужно только 3, а вы закладываете 6 или 9.
Отмечу один нюанс. Если вы делаете нечто с выраженной центральной композицией и активно используете горизонтальное выравнивание по центру, выгоднее сделать число колонок нечетным. Это позволит равномернее распределять отступы и контент. Совет касается и внутреннего дробления колонок. В примере выше, если у вас было 3 колонки и вам понадобилось их детализировать, при центральной композиции вы разобьете каждую колонку еще на 3, а вот при симметричной — на 2 или 4. В итоге, в первом случае колонок станет 9, а во втором — 6 или 12.
Почему все любят 12-колоночные сетки
Тут всё просто. Число 12 делится на: 12, 6, 4, 3, 2, 1. Поэтому сетка получается гибкой и позволяет органично верстать блоки почти любого количества или ширины. Более того, отбрасывая по краям макета 1 или 2 колонки в качестве полей, вы получаете в центре блок, который делится ещё и на 10, 5 или 8.
Из личного опыта добавлю, что очень удобно рисовать адаптивные макеты, отталкиваясь от ширины в 1200 пикселей, особенно без межколоночных интервалов. Вы получаете 12 колонок с приятной шириной ровно в 100 пикселей и постоянно оргазмируете от круглых чисел в процессе работы. И когда вам нужно поместить на макет плашку кнопки, вы не тянете границы прямоугольника туда-сюда, а мгновенно и не задумываясь вбиваете размер: 300 на 60 и кликаете на макет. К слову, полезно приучить себя позиционировать элементы не мышкой и стрелками, а вбиванием цифры отступов по иксу и игреку — макеты станут опрятнее.
Если контент не подразумевает верстку встык, бывает удобно сделать 24 колонки и работать с ними так же, как с межколоночным интервалом, просто отступая при необходимости полную колонку в 50px. Это создает вокруг контента достаточно воздуха, и макет смотрится дорого. Если же требуется интервал помельче, берется ровно половина колонки, то есть 25px. Все расчеты на лету, числа удобные.
Межколоночное расстояние (gutter)
Зачем и когда нужно делать отступы между колонками?
Мы не всегда делаем мозаику. Чаще всего контент не верстается встык — между двумя блоками должно быть какое-то расстояние, чтобы они не слиплись и не перекрыли друг друга.
Кроме того, для снятия нагрузки с глаза зрителя бывает нужен воздух, белое пространство. Когда в макете мало места и много информации (в газете, например), увеличение межколоночного интервала становится практически единственным способом хоть как-то размежевать текстово-графическую кашу.
В большинстве случаев, межколоночный интервал значительно меньше ширины колонки. Его размер тоже определяется особенностями контента. Если вы верстаете интерфейс, где много классических элементов управления, узкое межколоночное расстояние служит удобным разделителем. Например, между поисковой строкой и кнопкой, или между чекбоксом и его лейблом. (Хотя в целом здесь есть смысл подумать о «квадратной» сетке: 4px или иной, вообще без всяких колонок, и для этого тоже есть причины). Если же вы верстаете страницу с крупными текстовыми блоками, организованными всего в 2—3 колонки, то межколоночное расстояние имеет смысл сделать большим, чтобы дать контенту максимум воздуха.
Как уже говорилось выше, из личного опыта, очень многие вещи можно сверстать с нулевым межколоночным расстоянием при большом числе колонок. В этом случае за отступ принимается ширина целой колонки и все маргиналии получаются крупными, характерными для «благородной» типографики.
Только пусть вас не подкупает приятное слово «благородный» — в коммерческом сегменте такой дизайн не всегда хорош. В целом, чем активнее и агрессивнее схема продаж, чем голоднее и злее маркетологи заказчика, тем плотнее будет верстка и тем меньше там останется воздуха. Предельный (или, скорее, запредельный) случай — газеты бесплатных объявлений а ля «Из рук в руки», где занятая площадь напрямую определяет заработок. Разумеется, там не нужны эстетические изыски с гигантскими полями. С тем же успехом можно просто залезть в карман учредителю и позаимствовать оттуда пару сотен долларов до следующей зимы. Разницы никакой, а согласовывать меньше.
Модуль
Собственно, вот таким непростым путём мы с вами добрались до определяющего понятия «модуль», в честь которого и названа модульная сетка. Обычно с него начинают, но судя по вопросам дизайнеров, такой подход не работает. Так что же это вообще такое и зачем оно нужно?
По сути, это просто пропорция. Ширина модуля равна ширине колонки, а высота — нескольким строкам. Скольким именно? Зависит от вашего дизайна и от эффекта, которого вы хотите добиться.
*Несколько лет назад мне довелось делать сайт, посвященный пилонам — шестам для танцев. Естественно, модуль там был сильно вытянут по вертикали. Я использовал соотношение ширины и высоты почти 1:3. Во-первых, потому что подавляющее большинство иллюстраций было портретной ориентации и тоже вытянуто. Во-вторых, потому что сам продукт и весь стиль предполагал некоторую долю фаллической символики. Модуль определяется и контентом, и композицией, и стилем.
Если вы делаете нечто «стабильное», то наоборот: есть смысл подумать о модуле, чуть вытянутом по горизонтали. Если же вы верстаете огромную длинную таблицу, которая служит основным контентом в макете, то очевидно, что за модуль нужно принимать одну или две базовых строки этой самой таблицы. Словом, думайте.*
В принципе, никто не мешает вам строить и более сложные сетки. В них, например, могут чередоваться модули разной высоты. Главное, чтобы в этом была какая-то логика и закономерность, сохраняющая вертикальный ритм.
Допустим, вы делаете портал. У вас есть меню высотой в 3 строки, затем следует баннер главной новости высотой в 9 строк, затем ряд каких-то цифр (курсов валют, погоды и др) в 3 строки, затем ряд из нескольких новостей второго плана на 9 строк. То есть весь контент чередуется: 3-9-3-9-3-9-3… На практике этот прием редко оправдан, он не очень-то гибок. Но стоит держать в голове, что ритм может быть сложным.
Сетка в сетке
Да, бывает и такое. Когда проект сложный и многокомпонентный, вы можете использовать несколько вложенных сеток. Простейший пример: общая раскладка макета (layout) использует гигантские колонки с крупным текстом, а внутри одной из них лежит форма калькулятора с кучей элементов управления, сверстанных по квадратной сетке в 4px. В этом нет ничего особенно криминального.
Более того, когда речь идёт о сайтах, часть вашего контента может быть вообще посторонней и встраиваемой: плееры, онлайн-карты, виджеты, платежные фреймы и т.д. Миллион вариантов. У этих элементов будут свои внутренние сетки, которые вы не контролируете. И это тоже нормально.
Что вы можете сделать, так это соблюсти правило внутреннего и внешнего для контейнеров, содержащих эти блоки. Конкретнее, дать вокруг достаточно воздуха (в том числе и по вертикали), чтобы они не лепились к остальному контенту, выглядели обособленно и не перетягивали посторонние элементы в свою визуальную зону. Все расстояния и пропорции в вашем макете относительны, поэтому, грубо говоря, вы можете сбалансировать чужой контент «снаружи» почти с тем же успехом, как если бы меняли размеры его содержимого «внутри».
Оптическая компенсация
Дизайнерам-перфекционистам бывает трудно понять этот момент. Сетка — это просто методология для упрощения расчетов. Это не символ веры, не закон мироздания, и не панацея. Более того, математические пропорции по чисто физиологическим причинам не являются идеальными для человеческого восприятия. Сетка не учитывает возникновение оптических иллюзий и искажений.
Поэтому, если ваш глаз сообщает вам, что какой-то элемент нужно сдвинуть на пару пикселей правее направляющей сетки, вы можете сделать это. (Не факт, что верстальщик заметит и сохранит ваш оптический костыль, но всё же).
Отдельный важный момент: элементы в сетке выравниваются по визуальной массе, а не по габаритным границам. Это значит, что (в идеале) круг, выровненный по левому полю, почти всегда окажется на несколько пикселей левее квадрата, который выровнен по тому же полю. А мелкий подстрочник под крупным заголовком почти всегда нужно смещать вправо, потому что оптически левый край первой буквы заголовка окажется правее, чем «по расчетам». Это частности оптической компенсации.
Таких тонкостей довольно много. Но важно понимать, что в случае с веб-дизайном вы почти никогда не получите идеальную картинку. Веб-верстка зачастую формализована, она опирается на формульные зависимости фреймворков, чтобы гибко адаптироваться под разные устройства и платформы. И адекватно масштабировать ваше 3-пиксельное смещение заголовка с учетом всех особенностей сглаживания, антиалиасинга и прочих ругательных слов практически невозможно. Это нужно воспринимать философски.
Резюме
Пожалуй, изя всё. Текст и без того объемный, особые выводы не нужны: тут либо вникать, либо нет. В любом случае, спасибо за ваше внимание и интерес к основам дизайна и типографики. Успехов.
Генераторы модульных сеток PSD и CSS / Полезное в сети / Постовой
На сегодняшний день ни один разработчик при создании дизайна адаптивного сайта или его верстке не может обойтись без модульной сетки с колонками, по которым выстраивается блочная структура сайта. Сетки используют как бывалые дизайнеры, так и начинающие. Последним просто необходимо брать на вооружение данную подборку с онлайн-инструментами для создания модульных сеток PSD и CSS, так как они значительно облегчат работу над созданием сайта и сделают его более правильным с технической точки зрения, особенно если речь идет о каком-то информационном ресурсе, например, новостном сайте, блоге или портале, где основной упор идет на качественную подачу информации.
Есть мнение, что подобные инструменты для создания сеток применимы только при создании адаптивного сайта. Однако если отталкиваться от личного опыта, можно поспорить с этим. На данный момент я использую сетки при создании 99% проектов, включая неадаптивные сайты. Более того. На основе сеток я делаю множество других задач, например, баннеры или подобные малевалки.
Как это работает? Очень просто. Дизайнер указывает параметры для генерации заранее утвержденной всей командой разработчиков сетки. Далее скачивает изображение с отрисованными столбцами в формате PNG или PSD, и по полученным линиям выстраивает дизайн сайта. Верстальщик же, имея заранее готовый фреймворк, уже начинает верстать. Все это значительно ускоряет работу над сайтом как для дизайнера, так и для верстальщика.
Если говорить о верстке по модульной сетке, то для этого уже создано множество css фреймворков. Наиболее распространенный — это Bootstrap. Если же проект не на Bootstrap, то некоторые из предложенных инструментов способны генерировать вместе с изображением сетки еще и целый свой фреймворк с зашитыми в него кастомизированными параметрами, которые были указаны на первом этапе.
Итак. К вашему вниманию набор инструментов для создания модульных сеток PSD и CSS, которые значительно облегчат создание сайта.
Смотрите также:
Лучшие инструменты для тестирования адаптивной верстки
Responsify.it
Простой и удобный инструмент для создания адаптивной сетки. Генерирует как PNG файл для разработки дизайна, так и css стили для верстальщика. Большим плюсом данного сервиса является то, что можно сразу посмотреть готовый результат. Внизу есть переключатель разрешений экрана. С его помощью можно увидеть, как перестраиваются колонки сайта на разных устройствах.
Grid Calculator
Мой любимый инструмент для создания модульных сеток, которым я регулярно пользуюсь. Это некий калькулятор, который мгновенно проинформирует, какой будет ширина колонки при определенных параметрах модульной сетки.Это очень удобно и полезно. Grid Calculator позволяет генерировать модульные сетки в формате PNG, векторные изображения и паттерны для Photoshop JSX
Modular Grid Pattern
Хороший генератор изображений с модульными сетками в формате PSD и PNG. Основным его отличием от большинства конкурентов является то, что он умеет выстраивать не только колонки, но еще и горизонтальные линии. Для определенных задач будет полезным инструментом. Например, облегчит работу в нудной отрисовке таблиц с данными при разработке дизайна сайта.
Gridulator
Калькулятор модульных сеток, который рассчитывает на основе общей ширины макета и количества колонок все возможные варианты (с круглыми числами) ширины колонки и расстояния между колонками. Можно посмотреть результат визуально, а также скачать сетку в формате PNG.
Grid Designer
Простой и понятный конструктор модульных сеток. Основная особенность — позволяет объединять ячейки. Умеет генерировать стили CSS и структуру HTML — каркас будущего сайта. Помимо конструктора модульных сеток, данный инструмент оснащен визуальным редактором типографики, стили которой будут выгружены в конечный результат вместе с настройками сетки.
Сетки в дизайне мобильных приложений
В этой статье я хотел бы поделиться с вами практическими советами и рекомендациями, которые могут быть полезны для создания сеток при разработке мобильных интерфейсов. Это всего лишь советы, а не нерушимые догмы.
Мы рассмотрим:
- Оптимальное количество столбцов
- Как правильно рассчитать отступы между колонками и от края сетки
- Фиксированные и адаптивные сетки
- Точность расчета сеток
- Сетка внутри отдельных элементов (модулей)
- Строки и вертикальный ритм
Сетки являются одним из основных инструментов дизайнера, который помогает достичь согласованности элементов, установить связи между ними и создать визуальную систему, которая поможет пользователям ориентироваться и будет выглядеть гармонично.
Итак, приступим.
Оптимальное количество столбцов
Не ограничивайте себя количеством столбцов на первом этапе. Сначала создайте прототип вашего интерфейса (низкой или высокой точности). Определитесь с основными элементами и юзерфлоу. И только после этого можете начать выбирать оптимальное количество столбцов и размеров. Не беспокойтесь, если в дальнейшем вам придется изменить их количество 😎
«Каково оптимальное количество столбцов в сетке для мобильных устройств?» Я думаю, что это один из самых распространенных вопросов среди дизайнеров, которые начинают проектировать мобильный интерфейс. Наиболее распространенное заблуждение возникает, когда речь идет о небольшом размере экрана, ширина которого часто не превышает нескольких столбцов веб-интерфейса.
Cетка из 12 столбцов является одной из наиболее удобных сеток для мобильных интерфейсов. Она позволит вам разместить в строке как четное, так и нечетное количество элементов.
Недостаток сетки из 12 столбцов для мобильных устройств заключается в том, что ширина одного столбца настолько мала, что вы редко можете создавать элементы шириной в один столбец.
Если вы выбираете сетку из 2, 4 или 8 столбцов, помните о возможных проблемах с размещением нечетного количества элементов в строке.
🤓 Совет
Не зацикливайтесь на одной сетке. Дизайн интерфейса часто может содержать сотни разных экранов, поэтому одна сетка может не подходить для всех. При необходимости создайте дополнительные сетки, но не забывайте о согласованности дизайна.
Согласованность в сетках поможет вам добиться: равных полей макета, одинаковых или пропорциональных отступов между столбцами и одинакового поведения при изменении размера самих столбцов.
Отступы и поля (Offsets)
Хорошо, мы определились с оптимальным количеством столбцов. Давайте определим отступ и поля сетки.
Во-первых, давайте посмотрим на рекомендации операционных систем, чтобы выяснить поля макетов (offsets). В настоящее время минимальные рекомендуемые поля макета для Android и iOS составляют 16pt. Это означает, что, если вы хотите придерживаться системных рекомендаций, поля не должны быть меньше этого значения. (Но они могут быть больше 😉)
При выборе сетки из 12 столбцов отступы между столбцами не должны быть слишком большими, поскольку из-за небольшой ширины столбцов и больших отступов между ними столбцы начинают визуально разрушаться.
Если вы, как и я, являетесь поклонником сетки 8pt, я рекомендую вам выбрать размер отступов, пропорциональный модулю 8pt. Таким образом, горизонтальный и вертикальный ритм макета будет совпадать.
🤓 Совет
Отступы должны быть пропорциональны полям макета. Это сделает сетку более согласованной, а также позволит вам легко размещать в ней элементы, например, карусели.
Фиксированные и адаптивные сетки
Как и в веб-дизайне, в мобильном дизайне вы можете использовать фиксированную или адаптивную сетку. Экраны смартфонов не так сильно отличаются друг от друга по ширине, поэтому оптимальным решением будет использование гибких сеток и растягивание столбцов по ширине.
Я рекомендую использовать адаптивный размер сетки, потому что такой подход позволит более эффективно использовать все пространство экрана смартфона, которое очень ограничено.
🤓 Совет
Всегда начинайте с меньшего размера экрана в системе или с самого популярного. Например, на данный момент для iOS самый маленький экран – iPhone SE (320sp), а самый популярный – iPhone 8/7/6 (375sp). Далее просто растяните сами столбцы и оставьте одинаковые размеры желоба.
Этот метод подходит для большинства случаев, но, конечно, будут исключения из правил, когда нет необходимости растягивать содержимое столбца.
Точность расчета
В iOS большинство экранов имеют нечетную ширину и поэтому не делятся без остатка. В Android вы также можете найти экраны с подобными размерами.
В этом случае у вас есть несколько вариантов:
Компенсация в 1pt из-за различных размеров полей макета
Например, установите левое поле 24pt, а правое 23pt. Скорее всего, никто визуально не заметит разницу, но ваш внутренний перфекционист будет немного недоволен 😡.
Преимущества: оставшееся пространство можно разделить на нужное количество столбцов
Недостатки: разработчики должны всегда учитывать разницу в полях макетов, и, например, на iPhone SE (320sp) изменить нечетное поле на четное.
Оставьте точные значения для полей (например, 24pt) и используйте дробные размеры столбцов
Ваш внутренний перфекционист снова будет расстроен. Но на самом деле этот метод не так плох, как может показаться, из-за того, что современные экраны имеют более высокую плотность пикселей. Вряд ли кто-то из пользователей заметит наличие половины пикселей, появившихся в результате дробных значений.
Преимущества: сам алгоритм будет учитывать ширину столбцов, и вам не придется придумывать различные варианты сетки для разной ширины.
Недостатки: на данный момент создание такой точной сетки в графическом редакторе будет проблематичным. Например, Figma отказывается применять для столбцов дробные значения. Решением может быть сетка, созданная из прямоугольников внутри самого фрейма.
Сетка внутри отдельных элементов (модулей)
Как и при больших размерах, в вашем дизайне могут быть отдельные модули. В этом случае отдельный модуль (элемент) может иметь собственную сетку.
Здесь применяется то же правило, что и с дополнительными экранами. Необходимо соблюдать последовательность в сетке внутри модуля.
Строки и вертикальный ритм
Чтобы создать более крупные модули и поддерживать вертикальный ритм, вы должны разместить строки и желоба между ними, которые соизмеримы с основным модулем (в моем примере пропорционально модулю 8pt)
Вывод
Эта статья является лишь конкретным примером, цель которого – побудить вас начать изучение сеток в мобильных интерфейсах. Ищите и находите оптимальные решения для конкретных задач и проектов.
И помните:
«Изучай правила, чтобы знать, как правильно их нарушить»
-Далай-лама
Какие приемы вы используете при создании сеток для мобильных интерфейсов? Пожалуйста, поделитесь в комментариях.
Подписывайтесь на Twitter автора Andrey Zhulidin
Адаптивная верстка сайтов | Макет на основе сетки
Продолжаем тему адаптивной верстки. Сегодня речь пойдет об одном из трех китов адаптивной верстки — макете на основе сетки (flexible gridbased layout). Два других – это медиа-запросы и гибкие изображения (flexible images).
В середине XX века графические дизайнеры популяризировали понятие типографской, или модульной, сетки — рациональной системы колонок и рядов, в которые можно было поместить модули с контентом. Смотрелось это свежо и весьма гармонично.
Однако графический дизайн и веб-дизайн — это, как говорят в Одессе, две большие разницы. Ключевой момент здесь — размер страницы. В типографском варианте он фиксированный, а веб-страница может растягиваться и сжиматься в зависимости от того, на чем ее просматривают.
Чтобы применить к веб-странице модульную сетку следует использовать простую формулу пропорциональности:
target / context = result
Понять эту формулу проще всего на наглядном примере. Допустим, у нас есть нарисованный макет сайта в две колонки — контентная часть и сайдбар:
Мы сверстаем его «резиновым». Но вот проблема: как задать ширину обоих блоков? Ведь если прописать ее в пикселях, то они уже не будут резиновыми. Значит, нужно использовать проценты, а не пиксели. Но позвольте, а какие значения писать-то? Все равно ведь нужно от чего-то отталкиваться.
Можно, конечно, прикинуть на глаз: контент занимает примерно 70% от общей ширины страницы, а сайдбар — 30%. Но правильный верстальщик никогда и ничего не прикидывает на глаз. Нам нужен точный размер.
Вот для этого и служит та самая формула пропорциональности. Мы просто берем ширину внутренних блоков и делим ее на общую ширину страницы. Здесь вся страница — это context, а каждый из внутренних блоков, соответственно, target из приведенной выше формулы.
Считаем:
660 / 960 = 0,6875
300 / 960 = 0,3125
Остается только перевести эти данные в проценты. Не сильно заморачиваясь, просто сдвинем запятую на два знака вправо. Получаем:
68,75%
31,25%
Вот так вот просто. Однако давайте усложним задачу. Предположим, у нас контентная часть разделена еще на две неравные части. Например, слева узкая колонка с датой статьи и социальными кнопками, расположенными вертикально, а правая колонка широкая, и в ней у нас размещен текст статьи.
Из дизайн-макета мы знаем, что ширина этой узкой колонки 120 пикселей, а широкой 520. Как перевести эти числа в %? Опять же применить формулу пропорции. Но на этот раз мы в качестве context-а используем не всю ширину страницы, а ширину того блока, куда входят эти две колонки, то есть ширину контентной части, которая у нас составляет 660 пикселей. Делим:
120 / 660 = 0,1818
520 / 660 = 0,7878
В процентах получаем соответственно 18,18% и 78,78%
Кстати, в современных файлах стилей, использующих адаптивную верстку, правильные верстальщики добавляют в качестве комментариев подобные расчеты. Для лучшей наглядности. Вот как это обычно выглядит:
.content {
width: 68,75%; /* 660px / 960px */
}
Надеюсь, с этим не возникло сложностей. Поехали дальше!
Макет на основе сетки
Рассмотренные выше примеры это, конечно же, еще не сетка. Ну, какая сетка из двух колонок? Настоящая модульная сетка призвана помогать и дизайнерам и верстальщикам создавать сложные сайты со множеством колонок и отдельных блоков.
Поэтому и появилась масса удобных сервисов и инструментов, реализующих этот метод легко и просто. Например, 960.gs. Здесь вы можете не только наглядно изучить принцип разметки на основе модульной сетки, но и скачать шаблоны и использовать их.
На самом деле таких сервисов сейчас пруд пруди! Еще они называются фреймворки. Выбирай, какой больше понравится. Вот отличная подборка 30 CSS-фреймворков для адаптивного веб-дизайна.
Для чего вообще нужны эти модульные сетки?
В первую очередь модульные сетки нужны для того, чтобы визуально упорядочить контент на странице сайта. Это не только с эстетической точки зрения красиво и радует глаз пользователя, но и удобно самим разработчикам. Особенно если сайт действительно сложный по структуре и содержанию.
Кроме того, такие модульные сетки гораздо проще сделать адаптивными, чем беспорядочно разбросанные блоки разного размера.
Ну и, разумеется, скорость разработки таких сайтов гораздо выше. Вам не нужно морочиться и изобретать велосипед с нуля. Достаточно выбрать подходящий фреймворк и по нему сверстать сайт.
Надеюсь, теперь вы знаете, что такое адаптивная верстка на основе модульной сетки.
В следующий раз поговорим про гибкие изображения в адаптивной верстке. Очень важная и не однозначная тема. Рекомендую ее тоже изучить хорошенько, чтобы не попасть впросак. Оставайтесь на связи! А еще лучше подпишитесь на рассылку новостей блога Вебсовет.
Автор: Игорь Квентор
www.websovet.com