Сетки и проектирование сайтов — Конспект

Прошел курс по сеткам от Bang Bang Education и делюсь своим конспектом. Сразу скажу, что конспект довольно короткий и содержит только ту информацию, которая мне была полезна. Советую пройти весь курс самостоятельно.


Сетка — это инструмент организации пространства, основанный на особенностях визуального восприятия человека.

Сетка — это результат стремления человека к гармоническому порядку.

Нет единых правил построения сеток.

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

Сетка — невидимая архитектура страницы, которая отражает структуру материала. Она не может работать эффективно от материала и определяется материалом.

Сетка – это система горизонталей, вертикалей и диагоналей, которые образуют каркас типографической композиции.

Зачем нужны сетки:

  1. Удобство в работе.
  2. Единообразие материала как в библиотеке расставляют книги по системе.
  3. Разнообразность и вариативность.
  4. Гибкость и адаптивность решений под различные форматы.

Из чего состоит сетка:

  • Пустая строка
  • Модуль
  • Микромодуль
  • Колонка
  • Средник, межколонник
  • Полоса
  • Маркер

История сетки

Как происходит развитие чего-либо нового:

  1. Возникают новые технологии.
  2. Начинаются эксперименты с новыми инструментами, которые дали технологии.
  3. Поиск новых принципов применения результатов экспериментов.
  4. Применение к новым условиям мира.
  5. Развитие и усложнение.

Сетка берет свою историю из манускриптов и рукописных книг.

Персоналии:

  • Уильямм Морис
  • Эль Лисицкий
  • Ян Чихольд
  • Макс Билл
  • Йозеф Мюллер-Брокман
  • Рихард Лозе
  • Ле Корбюзье
  • Вайнберт

Виды сеток

Классификации по видам сеток нет. Но их можно разделить по:

  • Характеру внутреннего разделения:
    • Коллажные:
      • Без колонок.
      • Отбивка делается микромодулями или колонками.
      • Верстка с нулевым средником, верстка в противофазе.
      • Верстка по золотому сечению или прогрессиями
    • Колонные:
      • С одним или несколькими вертикальными разделителями — средниками.
      • Важное значение принадлежит размеру средника. Влияет на воздушность, напряжение, динамику.
    • Модульные:
      • Есть вертикальный и горизонтальный разделитель.
  • По динамике:
    • Равномерные:
      • Симметрические конструкции из которых состоит весь макет.
      • Это коллажные, модульные и колонные.
    • Прогрессивные:
      • Содержат внутреннюю асимметрию и ритм.
      • Можно отказаться от модульной сетки.
    • Алгоритмические:
      • Очень спорный вид.
      • В основе лежит алгоритм с различными переменными.
      • Дизайнер предлагает не визуальное решение, а алгоритм, по которому система будет решать графическую задачу.
    • Совмещенные/сложные сетки:
      • Позволяет выполнять несколько задач одновременно.

Это не жесткая классификация. Подходы можно совмещать и миксовать. Никаких запретов не существует.

Это Совмещенная сетка Рудольфа Босхарда.

Как построить прогрессивную сетку

  1. Сочетание
  2. Наложение
  3. Пропорции (на основе геометрических и математических пропорций)
  4. Композиция (для основных линий сетки используются линии иллюстрации)
Прогрессивная сетка Карла Герстнера. Вариант 2-,3-,4-,5-,6-ти колонной верстки.

Детализация сеток

Сетки можно разделиться на 3 группы по степени детализации:

  1. малая степень детализации
  2. средняя степень детализации
  3. высокая

Чем больше размер модуля, тем менее свободы у дизайнера в размещении текста и иллюстраций.

Сетки малой детализации — от 2 до 6 колонок.
Промо сайты, лендинги, сайты-визитки. Планшет или смартфон. Линейные и предсказуемые.

Средняя детализация — от 6 до 12 колонок.
Позволяет создавать динамические модули. Колонка самодостаточная и может поместить весь смысловой юнит.

Сетки высокой детализации — от 13 колонок.
Колонки теряют самодостаточность. Чем больше колонок, тем меньше необходимость в межколонниках.

Не так важно, сколько модуль будет занимать по вертикали или горизонтали, как важна логика, которая позволяет построить эффективную композицию.

Пример space10.io

Как можно детализировать сетку:

  1. Умножить колонки на 2, 3, 4 и так далее.
  2. Совмещение сеток (наложение 2-х или более сеток).
  3. Перерасчет.

Чаще всего не сетка определяем композицию, а композиция, которая решает потребность проекта, диктует какая сетка может описать эту композицию.

Как делается адаптивность при детализации сеток:

  1. Уменьшение количества колонок справа. Ширина колонки и средника должны оставаться фиксированными.
  2. Масштабирование колонок — растягивание колонок по ширине. Количество колонок не меняется.
  3. Модульное редактирование — полоса набора в макете разбивается на функциональные и логически закрытые метамодули, и сначала адаптируется по первому или второму типу, а при переходе на формат планшета или смартфона, меняет позиционирование.

Факторы, которые влияют на степень детализации:

  1. Контент и его характер.
  2. Всякого рода маргиналии (баннеры, меню, логотип и пр.).
  3. Адаптивность.

Сетка, эстетика и типографика

Сетка или ее отсутствие сильно влияет на эстетику.

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

Микромодуль и его применение

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

Персоналия: Arnaud Mercier. Графический и веб-дизайнер, разработчик, основатель area 17 и elixirstudio, идеолог работы с микромодулем.

Откуда берется микромодуль.
Почти все разрешения экранов у мониторов, планштетов и смартфонов по ширине кратно 8 и 4рх. Почти любое популярное разрешение экранов у мониторов по ширине кратно 10 и 5 рх. Исключение — разрешение экрана у монитора 1366рх.

Микромодуль – базовая единица измерения в макете, чтобы рассчитать сетку, пропорцию изображений, системы отступов и т.д.

По микромодулю ставится только базовая линия шрифта. Размер кегля и высота шрифта не должен быть равен микромодулю.

Что решает микромодуль:

  • точка старта;
  • правила;
  • экономия времени;
  • адаптивность;
  • системный подход;
  • усиление ритма;
  • разумные ограничения.

Кто пользуется:

Что влияет на сетку?

Что влияет на проектирование сетки:

  • задача
    • презентация — лендинг, портфолио
      • важно впечатление
      • сетка может быть очень сложной
    • сервисные функции
      • сетка нужна для того, чтобы пользователю было удобно использовать продукт
    • потребление информации (медийные проекты)
      • сетка должна помогать удобно потреблять информацию
      • может быть очень сложной, но удобной
  • контент
    • в зависимости от типа контента, нужно строить сетку
  • отраслевые факторы
    • например, медиа используют баннеры. Баннерные модули всегда влияют на контент, потому что баннеры всегда фиксированного размера.
  • адаптивность
    • желательно проектировать сетку с адаптацией для 3-х типов устройств.

Сетка и адаптивный дизайн

При проектировании адаптивного дизайна стоит учитывать:

  1. Функциональность
    • Пользователь не должен страдать, когда пользуется различными устройствами.
    • Функциональностью жертвовать не очень хорошо.
  2. Универсальность
    • Это про дизайнера, которые стремиться оптимизировать свое решение.
    • Например, когда ширина колонок одинаковая, но на разных экранах добавляется или убирается нужное количество колонок, а контент подстраивается.
  3. Целостность
    • Вне зависимости на каком устройстве, сайт выглядит гармонично и целостно.

Адаптивность контента

  • Резина
  • Масштабирование
  • Трансформация — изменение положения блоков.

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

Дополнительные ресурсы по сеткам:

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

Подпишитесь на рассылку

Отправляю 1 письмо в месяц со всеми статьями. Ничего больше.

Или присоединяйтесь в Телеграм-канал.

Подождите

Спасибо! Вы успешно подписались.