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

2020-04-02

Прошел курс по сеткам от 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рх.

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

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

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

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

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

• area 17 design techniques — guides.area17.com/design-techniques
• google material design — material.io/design

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

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

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

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

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

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

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

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

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

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

• http://thinkingwithtype.com/grid/

#Дизайн