Сотни - не сказать тысячи - статей, учебных пособий, книг и сайтов посвящены исключительно базовым сеткам и их применению в веб-дизайне. Простой поиск в Google с условиями "сетка" и "дизайн" возвращается почти 5 миллионов результатов.
Краткая историческая перспектива
Однако в базовой сетке нет ничего нового, вернемся в Средневековье: в 1220-1240 гг. французский архитектор Villard de Honnecourt разработал конструктивные каноны, основанные на геометрии. В начале 20-го века эти принципы были изучены типографами и дизайнерами для воссоздания средневековых канонов конструкции страницы.
Среди них были, Van de Graaf, Rosarivo и, наконец, Tschichold который популяризировал открытия его предшественников в своей книге «Очерки о морали хорошего дизайна» (The Form of the Book: Essays on the Morality of Good Design).
Дизайн с применением базовой сетки - действительно старая традиция, которая уходит своими корнями в необходимость структуры и баланса.
Многие вещи, которые окружают нас, разработаны согласно модернистским принципам грид-системы. Красота этих объектов (музыкальные плееры, книги, журналы, мобильные телефоны, сайты и т.д.), как правило, заключается в том, что сетка, примененная для их дизайна, полностью незаметна.
Как Йозеф Мюллер Брокман (Josef Müller Brockmann) пишет в его книге «The Graphic Artist and His Design Problems»: "базовая сетка позволяет объединить все элементы дизайна - символы, фотографии, рисунки и цвета - в формальных отношениях друг к другу, иначе говоря, базовая сетка – это средство для наведения порядка в дизайне. Сознательно построенный дизайн более четкий, аккуратный и более успешный, чем разработанный наугад".
Возвращение сетки
Почему системы сеток стали так популярны среди цифровых дизайнеров? Ответом может быть то, что теперь, старые добрые принципы печати стали применяться к экрану.
В раннем возрасте Интернета графические возможности дизайна были крайне ограничены. Создание интернет шедевр а-ля Мюллер Брокман было практически невозможно в основном за счет технологических ограничений.
Постоянное улучшение, связанное с профессиональной зрелостью цифровых дизайнеров и возрастающим интересом к более рациональному дизайну (Bauhaus, Swiss style, Ulm School), несомненно, привело к возвращению сетки. То, что веками было канонами печатного дизайна, стало предпосылкой для дизайна пользовательского интерфейса.
Сегодня невозможно себе представить, что пользовательский интерфейс не вписывается в сетку независимо от того, насколько он сложный.
Сетка имеет два измерения (как минимум)
Существует много электронных учебников и шаблонов для создания сеток, но не все из них делают упор на то, что делает сетку ценной: типографский ритм и базовая сетка. Построение горизонтальной сетки, конечно, важный шаг, но создание вертикального ритма не менее важно.
Как пишет Роберт Брингхерст (Robert Bringhurst) в «Элементах типографского стиля»: "Не формируйте без шкалы". Должна быть шкала, которая определяет почти все остальное.
Позиционировать или выравнивать элементы на горизонтальной сетке довольно просто. Как правило, страница 960px ширины разделена на 12, 16, или 24 колонок. Это разделение на колонки часто определяется требованиями бизнеса - такими, как размещение рекламы.
Например, сетка из12 колонок идеально подходит для размещения больших блоков (300x250px) или (300x600px), которые используют 4 колонки, или одну треть страницы.
Нет существует золотого правила, и никогда не следует рассматривать сетку как жесткое ограничение, вместо этого нужно создавать с ее помощью упорядоченность. Сетка является средством для достижения цели, а не самоцелью.
При вертикальном позиционировании элементов, дизайнер должен принимать решения, которые не должны быть случайными. Слишком часто дизайнеры опираются на вертикальный шаг, ставший возможным в Photoshop при помощи удержания Shift и клавиш со стрелками (5px или 10px). Такой подход не приемлем в типографике.
Если мы обратимся к причине изобретения сеток для печати, то окажется, что они требовались, чтобы позиционировать тексты и изображения на странице. Добавив вертикальную сетку - или базовую сетку – в их горизонтальную сетку, дизайнеры нашли способ создавать сложные макеты, в которых случайности был исключены.
Эксперименты с базовой сеткой
Создание сетки для печати требует некоторых расчетов, основанных на формате страницы, выбранном шрифте, размере шрифта и т.д. Надо надеяться, что эти расчеты не являются необходимыми для цифрового дизайна и веб-дизайна.
В последнее время мы успешно экспериментировали с 6px базовой сеткой, основанной на 960px системе, разработанной Натаном Смитом. Эта система имеет три преимущества:
- Во-первых, она упрощает процесс проектирования, удаляя случайный фактор (больше вопросов нет);
- Во-вторых, она уменьшает время, затрачиваемое на позиционирование элементов;
- В-третьих, она увеличивает чувство организованности в нашем проекте.
Мы также решили использовать традиционные размеры (9, 10, 11, 12, 14, 16, 18, 21, 24, 30, 48, 60, 72 пунктов). Например, основной текст может быть определен как 14/18 (14пт размер и 18пт высота строки). Уменьшенная копия может быть определена как 9/12.
Перефразируя Роберта Брингхерста и его концепцию вертикального темпа, базовые линии помогают при добавлении или удалении вертикального пространства для создания ритма.
Теперь легко согласовать различные блоки текста с элементами пользовательского интерфейса, такими как кнопки и текстовые поля, так как они все расположены в базовой сетке. Конечная цель этой экспериментальной сетки - облегчение всего процесса проектирования, особенно для дизайнеров, но она поможет также верстальщикам и разработчикам в их работе с CSS и HTML.
Надеюсь, что эта сетка окажется для вас полезной, не только как еще одна тенденция, которой нужно следовать, а как целостная стратегия для создания простых, ясных и сбалансированных проектов.
Здесь можно скачать базовую сетку, о которой идет речь в статье. Она выглядит вот так:
Перевод статьи Пьера Марли (Pierre Marly)
Комментариев нет:
Отправить комментарий