Сетки и проектирование сайтов
Курс по основам модульного проектированя и создания композиции сайта с помощью сеток. Авторы - Александр Гладких, Сергей Гуров.
Что такое сетка
Сетка - это инструмент организации пространства, основанный на особенностях визуального восприятия. Это система горизонталей, вертикалей и диагоналей, образующих каркас типографической композиции в рамах выбранного формата.
Никаких правил при использовании сеток нет.
Основная задача сетки стать композиционным и навигационным каркасом для хаотичного материала работы (логики повествования, фотографий и текстов.)
Сетки нужны для:
- Удобства – использование сеток позволяет упростить работу над задачей за счет нахождения гайдлайнов, как основные переменные в работе над версткой.
- Единообразие – максимальная интеграция всех частей отдельного многостраничного издания.
- Разнообразность и вариативность
- Гибкость и адаптивность решений под различные форматы
Линия самый первый образ который распознает наша зрительно система.
Хьюбел и Визел
Распознание образа идет бессознательно, а значит не может быть контролируемым. Хотим мы того или нет, но мы будем видеть прямые линии там где их, казалось быть не может.
Сетки можно, и нужно (при условии задачи) совмещать. То же самое касается и отбрасывания колонок. Особенно для адаптивных макетов. Масштабирование колонок – когда адаптер осуществляется растягиванием колонок по ширине. Количество колонок не меняется. Пропорции не сохраняются. Если макет не «строится» - меняйте сетку.
Что влияет на сетку
Что нужно учитывать при проектировании сетки:
- задача
1. Презентация или высказывания. Произвести впечатление. Создать правильное понимание продукта.
2. Функция и сервис. Удобство работы. Сетка утилитарна.
3. Потребление информации. Удобство восприятия. - контент
- отраслевые факторы
- адаптивность
Алгоритм работы
Дизайнер работает с бумагой и ищет композицию без оглядки на сетку. Сетка призвана описать и довести до ума композиционное решения дизайнера а не определить его.
Когда получилась интересна композиция, «набрасывается» сетка низкой детализации. Если работает эффективно – переходим за компьютер. Делаем проверочный макет. Если работает – детализируем. Если не работает – обратно делать эскизы.
Элементы композиции
Форма - это работа с простотой и узнаваемостью
Контраст - степень отличия одного от другого, которая помогает отразить иерархию и масштаб. Это всегда история про самое большое и самое маленькое
Ритм - это повторение, последовательность, согласованное расположение элементов, которое приводит к единству. В сетках ритм связан с пропорциями и контрастом между фигурой и фоном.
Силовая линия - это линия на которую опирается графический блок. Задача - привлекать внимание. Композиция будет плохой, если подразумевает использование большей части силовых линий сетки.
Вектор, динамика - позволяет направлять взгляд в нужную нам сторону. Силовая линия привлекает, вектор направляет.
Напряжение, масса - частый, плотный внутренний рифм создает напряжение, массу. Более тяжелые элементы притягивают к себе менее тяжелые.
Рифма – это повторения некоего решения в одном и том же или в разных контекстах. Прямая рифма – простое повторение типового решения в рамках одного макета. Контрастная – повторение типового решения но с добавлением контраста.
Форма и контрформа - чтобы добиться «воздушной» композиции, необходимо сделать фон её созидательным элементом. К активному фону применяются все те же приемы что и к активной форме.
Если строить симметричную композиции, искать сетки с четным количеством колонок. Ассиметричную композицию - не четные сетки.