Я пытаюсь понять логику этих «свободных» систем сетки, часто используемых для отображения фотографий. Я пытался деконструировать эти типы сеток, но не могу найти последовательного объяснения того, как определяется расположение и масштаб изображений. Пожалуйста, смотрите примеры ниже.
page-layout
grids
gmorissette
источник
источник
Ответы:
Первый пример, кажется, основан больше на классической компоновке, чем на жесткой сетке. Кажется, он основан на «сжатой» версии золотого сечения. Причин, по которым он «сдавлен», может быть много:
Обратите внимание, как «квадраты», сгенерированные золотым сечением (которые стали прямоугольниками, потому что мне пришлось его сжать), используются в качестве единиц для определения ширины столбца копирования, а также высоты и высоты фотографий.
Кажется, что фотографии расположены в четном ритме диагоналей, параллельных диагонали в стиле барокко (снизу слева вверху справа). Это создает приятный прилив по зловещей диагонали (сверху слева направо вниз), который направляет взгляд к копии.
источник
Обычно сетка используется , чтобы сделать сходства и различия более очевидными - и , следовательно , более узнаваемы.
Это также поощряет доступность, поэтому зрители автоматически знают, где искать элементы, потому что « узлы горизонтального и вертикального делений действуют как указатели для поиска информации » [1].
Тем не менее, интересная вещь о сетке состоит в том, что она распределяет и корректирует свои элементы, в то же время помогает сортировать и понимать их и их отношения друг с другом, как вы можете видеть на следующем рисунке (из en.wikipedia.org ) ,
Как утверждает Тимоти Самара, « каждая сетка содержит одни и те же основные части, независимо от того, насколько она сложна. Каждая часть выполняет определенную функцию» . Элементы могут быть
Как и когда элементы сетки объединяются или опускаются, остается на усмотрение дизайнера, но должно зависеть от интерпретации информации зрителем.
Глядя на ваши примеры, также может случиться так, что контент имеет свою собственную структуру и что сетка как система заказов и объяснений не будет работать, так как она проясняет все что угодно. Иногда также возможно, что контент должен игнорировать структуру, чтобы создать новую и вызывать тем самым эмоциональные реакции в аудитории - так называемые свободные сетки . ;-)
[1] Создание и разрушение сетки Тимоти Самарой , издательство Rockport, май 2005 г.
источник
Что касается позиционирования, многие из этих изображений выглядят выровненными по краю, по меньшей мере, одного другого изображения, некоторые выровнены по центру в столбце по вертикали или по горизонтали с изображениями разных размеров. Я думаю, что макеты на них больше касаются отношений между объектами и балансом, чем строгой сеткой.
источник