Когда и как отказаться от модульной верстки

Юзабилити

Когда и как отказаться от модульной верстки

Когда нарушать правила - это новаторство, а не ошибка

Поделиться
Запинить
Отправить

Наравне с чистой доской для рисования или последней версией Sketch, одним из самых полезных инструментов в наборе любого дизайнера User Experience являются модульные сетки. Модульная система верстки далеко не нова и используется как новичками, обучающимися по программе Design101, так и опытными UX-специалистами.

Об удобности этой системы свидетельствуют не только ее повсеместное применение, но и высокая эффективность. Модульные сетки сформировали основу для простого и понятного дизайна еще во времена развития печатных станков. Возможность эффективной подачи информации — это не единственный их плюс. Благодаря широкому распространению модульных сеток как в печатном, так и в цифровом дизайне, пользователи инстинктивно понимают, как ориентироваться в созданных на их базе интерфейсах.

Тем не менее, из-за популярности модульной системы верстки разработанные на ее базе проекты порой кажутся скучноватыми и даже шаблонными. Многие критики считают, что модульные сетки вредят творческому процессу и не дают шанса на развитие более инновационным методам дизайна из-за навязываемых ими (в буквальном смысле этого слова) границ.

Таким образом, отказ от модульной системы верстки для UX-разработчика — это один из способов внести новизну, добавить изюминку в дизайн. При правильном подходе этот шаг поможет дизайнеру создать привлекательный и необычный интерфейс. В руках неумелого специалиста это, напротив, приведет к катастрофе. В данной статье рассматривается четыре различных метода, которые вы можно использовать вместо стандартной модульной системы верстки для разработки поистине уникального UX-дизайна.

Использование контейнеров

Отказ от модульных сеток не значит, что при разработке интерфейса можно закрывать глаза на способ организации контента и информации. Объединение элементов с помощью контейнеров позволяет сохранить структуру и даже симметрию страницы.

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

Наслоение элементов

Подобно контейнерам, наслоение — это еще один эффективный способ эффективно подать информацию без сеток путем группирования элементов. Однако, он требует больших трудозатрат. Для объединения компонентов страницы в группу недостаточно просто обвести их квадратной границей.

Несмотря на сложность, наслоение — довольно распространенная техника в современном веб-дизайне. Веб-портал Awwwards регулярно публикует примеры великолепного UX/UI-дизайна в рубрике Site Of TheDay. Среди них встречается множество страниц, созданных с использованием техники наслоения. Один из лучших примеров — сайт Cure Nails.

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

Игра со свободным пространством

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

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

Совместный проект New York Times и Google Cloud гораздо более изобретательно использует свободное пространство: пробелы разграничивают черно-белые изображения, окружающие простой тезис, помещенный в центр страницы.

Промежутки и плиточный дизайн

Промежутки в системе модульной верстки — это расстояния между карточками, плитками и другими объектами, заполняющими сетку. Они необходимы для разграничения компонентов и помогают избежать эффекта перегруженности.

Тем не менее, UX-специалисты все чаще экспериментируют с плитками, которые позволяют отказаться от сетки и делают дизайн более свежим. Хороший пример использования такой техники — польский сайт Randstad.


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

Еще один вариант использования промежутков — это так называет плиточный дизайн, при котором элементы на странице словно выкладываются в кирпичную кладку. Популяризированная порталом Pinterest, эта техника сохраняет удобную сеточную подачу информации и в то же время выглядит красиво и свежо.

Отказ от сеток

Есть и другие способы освободиться от ограничений, которые создает модульная система верстки. Ниже представлены основные четыре техники, которые можно использовать вместо стандартных модульных сеток:

  1. Группирование элементов с помощью контейнеров.
  2. Создание различных комбинаций слоев.
  3. Использование свободного пространства.
  4. Изменение или удаление промежутков между элементами.

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

Оригинал.

UXUIмодульная сетка
Поделиться
Запинить
Отправить
Facebook YouTube Telegram