Статті
Сетки в веб-интерфейсах
Как сделать одновременно красиво и практично
31 жовтня, 2018
avatar
Алексей Здебский
Редактор в Telegraf.design
Мы любим тексты без ошибок. Если вы все же их обнаружили, выделите фрагмент и нажмите Ctrl+Enter.

После изучения основ композиции приступаем к построению интерфейсов. UI/UX Designer в компании Trinetix Александр Супрун семь лет работает с сетками и поделился своим опытом в школе Projector.

Telegraf.Design записал конспект его лекции и представляет его вам.

Полная версия лекции доступна здесь.

В дизайне существует две крайности: делать красиво или практично. У всех получается по-разному и в разных соотношениях.

Нельзя сказать, что часы слева абсолютно непрактичные, а правые некрасивые. В веб-интерфейсах использование сеток поможет вам найти золотую середину.

Как они выглядят?

Квадратная

Здесь довольно просто сложить и быстро составить некий ровный дизайн с ровными отступлениями.

Но это не про интерфейсы. Они обычно немного сложнее, но и их можно собирать по квадратам.

Это сильно упрощает задачу. Как в конструкторе Lego можно добавить новые элементы по все тем же квадратам.

Но обычно интерфейсы не строятся по таким сеткам.

Колонки

Обычно веб работает именно на этой сетке. Это новое измерение ширины: теперь вы думаете не про количество занимаемых пикселей элементом, а про колонки.

Правые блоки занимают 8 колонок, а левый 4. Это значит, что на других разрешениях мониторов они всегда будут занимать именно такое количество колонок.

Колонки также могут подстраиваться под конкретное устройство. Если в планшете не 12 колонок, а, например, 6, тогда все блоки будут занимать именно 6 колонок и разместятся друг под другом.

Вертикальный ритм

Веб и интерфейсы строятся не только в ширину. Говоря о высоте, нужно помнить про вертикальный ритм. Это как в музыке: если ритм ломаный, он может вызывать раздражение.

В некоторые моменты у нас всегда появляются различные отступы и использование следующих трех способов поможет сбалансировать ваш дизайн.

1. На линии

Это касается текста. Например, у вас есть большой заголовок, а правее нужно разместить второстепенный текст. Дизайнеры часто хотят в такие моменты выровнять текст по центру контейнера заголовка. Это неправильно.

Люди читают строками, а не фигурами, которые вы себе придумаете.

В таких случаях текст необходимо размещать на одной линии.

2. Между линиями

Текст располагаем между линиями сетки. Так мы получаем ровные отступы, что упрощает верстку.

3. Без сеток

Без сеток тоже может существовать система, а именно система отступов. Вы располагаете элементы нужным вам образом и измеряете отступы кратными величинами.

Комбинации

Именно этот способ является наиболее практичным, чтобы ваши макеты потом без проблем верстались.

По такой системе получаются ровные отступы, а все элементы находятся в колонках и у верстальщиков остается меньше вопросов.

Итоги

Сетки – это хорошо. В компании можно договориться использовать конкретную сетку и работу будет легче доделывать за другим участником команды. Иначе если дизайнер заболеет, а сетку он не использовал, то остается только догадываться, что он имел в виду под отступом 17.

Сетки – это плохо, ведь они отнимают время для построения. Лучше придумать сетки заранее, чтобы их можно было использовать в том или ином случае. Они также ограничивают творчество и от них позже будет сложно отказаться.

Ошибки в сетках

Колонки и хедер. Не стоит слишком много думать о колонках. Хедер может работать и без колонок.

Колонки и сайдбар. Если у вас есть элемент, который не должен растягиваться, то его лучше просто прибить к краю, а все остальное уже делать по колонкам.

Инструменты, которые помогут строить сетки

Вам нужно только указать разрешение и количество колонок и вам предложат способы использования сеток.

Этот инструмент немного сложнее. Тут вы указываете ширину артборда, количество колонок, внутренние и внешние отступы. Если расчет становится зеленым, значит все указанные данные попадают под указанную сетку. Это то, что вам никогда не даст Sketch или Photoshop. Графические редакторы не сообщат вам, что колонки будут занимать одинаковое количество пикселей.

Этот сервис вам помогает строить неравные колонки. Также он поможет вам построить колонки для других устройств.

Этот сервис поможет вам настроить типографику. Нужно только указать размер шрифта и размер контента.

Сервис предложит вам правильные комбинации, которые помогут избежать ошибок.

Тут также можно настроить типографику. Этот ресурс предлагает вам готовую типографическую систему и вам не нужно настраивать ее самому.

Этот сервис проще, но с такой же целью. Тут есть кнопка «Export to Sketch». Вы знаете, что с ней делать.

Если вам сетки не нравятся, есть другой сервис, который помогает вам настроить вашу систему отступов.

Но это все о хорошем дизайне. Telegraf.Design ранее давал 10 вредных советов, которые помогут вам стать плохим UX дизайнером.

avatar
Алексей Здебский
Редактор в Telegraf.design
Колонка

У нас є ще дещо для вас

Повідомити про помилку

Текст, який буде надіслано нашим редакторам: