Использование линий сетки в веб‑дизайне: 33 потрясающих примера

Линии сетки всегда использовались для структурирования контента.

Даже самые ранние рукописи и манускрипты были организованы таким образом, чтобы читателям было легче следовать сюжетной линии и понимать текст. Эпоха Возрождения, в частности, сыграла важную роль в популяризации системы сетки. Художники XIII века стремились достичь идеальной симметрии в своих работах, и французский архитектор Виллар де Оннекур придумал решение. Он создал схему, в которой объединил систему сетки с золотым сечением. Это привело к созданию макетов с полями фиксированного соотношения, которые и сегодня применяются в журналах и книгах. Промышленная революция и развитие печати привели к использованию сеток в газетах и плакатах, но именно швейцарский стиль сделал систему сеток неотъемлемой частью дизайна. Идеалом было достижение ясности и порядка, и сетки сделали это возможным.

Перенесемся в наши дни: линии сетки используются с той же целью, что и раньше — для создания чистого, легко воспринимаемого контента. Когда речь идет о веб-дизайне, сетки могут служить основой сайта. Несмотря на то, что они разделяют элементы, они также соединяют их в структурно гармоничные блоки, обеспечивая удобство использования. Но благодаря своей истории и давнему использованию в дизайне книг и журналов линии сетки также служат мощным эстетическим приемом, способным вызвать ностальгию и создать отчетливое ощущение тактильности.

Чтобы лучше понять, насколько эффективными могут быть сетки, мы предлагаем вам изучить следующие сайты, которые блестяще освоили их использование:

Blumenkopf

Blumenkopf — австрийская эстетическая студия, которая специализируется на передовом и современном искусстве. Первое, что бросается в глаза пользователям, — это крупная типографика, которая встречает их на экране загрузки и затем снова, как только открывается сайт. Вертикальные и горизонтальные линии украшают всю главную страницу, а большинство фотографий и текст организованы в квадраты и прямоугольники. Существует четкое различие между меньшей частью экрана слева, где размещены контактные данные студии, и большей областью справа, где находится остальной контент. Между этими двумя частями на заднем плане находится свободно плавающий анимированный текст, и его движение вне рамок контрастирует с жесткостью линий, в результате чего зрителю открывается привлекательное зрелище. Когда пользователи переходят от одной страницы к другой, вертикальные линии, разделяющие две части экрана, отдаляются, чтобы исчезнуть из виду на несколько секунд. Затем на экране появляется название выбранной страницы, написанное крупными буквами, и сетки снова занимают свое место, демонстрируя новое содержание. На странице "Работы" линии сетки разделяют работы студии. Здесь, казалось бы, нет никаких анимационных эффектов, но когда пользователи наводят курсор на отображаемые превью проектов, вокруг изображений появляются текстовые полосы, похожие на крупные рамки, содержащие название выбранной работы анимированными буквами. Эта незначительная деталь имеет большое значение, делая страницу более интересной и контрастной.

Family Type

Family Type — литейная мастерская цифрового шрифта, расположенная в Лондоне и Сиднее. Несмотря на то, что вся домашняя страница украшена линиями сетки, первое, что бросается в глаза, — это анимированный, гипнотизирующий черно-белый шар в правом верхнем углу страницы. Затем вы обращаете внимание, что каждый раздел на главной странице содержит информацию о шрифтах литейной фабрики. Когда вы будете прокручивать страницу, вы поймете, что она включает в себя эффект бесконечного цикла. Это делает сайт интересным для просмотра. Помимо шара в верхней части, на сайте также представлены анимированные буквы, которые двигаются во всех направлениях и вращаются, что еще больше добавляет динамичности сайту. Меню расположено вертикально и зафиксировано на правой стороне экрана, оно отделено от остального контента. Таким образом навигация по сайту удобна в любое время. Линии сетки применены и к внутренним шаблонам страниц. Они создают отдельные разделы для различных типов контента. Сочетание игривой навигации и сетки позволило литейному заводу представить свои работы в необычной и увлекательной манере, которая гарантированно произведет сильное впечатление на зрителей.

At Home Club

At Home Club — это потрясающий проект, который показывает, как творческие люди по всему миру переживают пандемию Covid-19 и как они к ней адаптируются. Сайт создан в виде каталога или журнала, который дает представление о мире художников. Творческие работники сгруппированы по городам, в которых они живут. Название каждого города находится в правой части экрана и отображается в виде вертикальной вкладки. Вы можете перейти к любому понравившемуся городу или прокрутить страницу, чтобы изучить их все. Этот сайт — потрясающий пример, демонстрирующий, как несколько простых прямых линий могут существенно изменить общий дизайн сайта и позволить вам организовать контент красивым и захватывающим образом.

Juxta Press

Juxta Press — художественное издательство, расположенное в Милане. Первое, что бросается в глаза на сайте, — это глубокий синий цвет. Затем вы замечаете сетки и понимаете, что весь сайт разделен на квадраты и прямоугольники. Использование линий сетки в веб-сайтах кинопроизводственных, звукозаписывающих и издательских компаний — хороший выбор, потому что это позволяет брендам отображать большое количество информации о своих артистах в визуально привлекательной и аккуратной форме. Сайт компании Juxta Press не является исключением. Они положились на сетки, чтобы создать идеальную среду для демонстрации опубликованных ими работ и представления авторов, с которыми они работают. Помимо полей, включающих изображения и текст, здесь также много разделов, в которых нет ничего, кроме двух диагональных линий. Эти области облегчают восприятие сайта и позволяют зрителям в равной степени сосредоточиться на каждой работе и авторе. Если бы они располагались непосредственно друг за другом, пользователи могли бы не заметить некоторые работы.

Sār Studio

‍Sār Studio — студия мебельного дизайна из Индии. Спокойный синтез сетки и приглушенных тонов помог им создать аккуратную презентацию своей продукции. Каждому предмету отведено отдельное место, что позволяет зрителям полностью сосредоточиться на одном предмете. Некоторые разделы полностью пустые, что, в дополнение к обилию белого пространства, упрощает взаимодействие с пользователем. Скрытое меню полностью отделено от остального контента в фиксированной вертикальной области во всю высоту страницы. Его дизайн минимален и состоит из линий сетки, отделяющих одну ссылку меню от другой. Выпадающие пункты меню открываются в виде отдельных полноразмерных секций с сеткой, занимающих значительную часть экрана. Если вы выберете страницу, которая открывает раскрывающееся меню, то увидите, что оно, опять же, ведет к другому раскрывающемуся меню. Таким образом вы получите меню с большим количеством линий сетки, которое будет занимать более трех четвертей экрана. Но даже в этом случае, четкость меню и приятная цветовая схема гарантируют, что изменение будет комфортным для ваших глаз. Это позволит быстро найти то, что вам интересно.

G!theimagineers

G!Theimagineers — продакшн-студия, которая сочетает в своей работе архитектуру, сценографию, свет, изображение и звук. Макет их веб-сайта немного необычен и характеризуется активным использованием геометрических элементов. Главная страница не прокручивается. Она разделена на горизонтальные и вертикальные разделы, некоторые из которых заполнены очерченными кругами, а другие содержат список того, чем занимается эта студия. В правой части экрана находится вертикально расположенное меню. Страницы представлены в виде вкладок, которые при нажатии раскрываются и показывают содержимое выбранного раздела. Внутренние страницы разделены пополам: одна половина макета содержит круг (который также разделен линиями на несколько частей) или некоторые иные, часто анимированные, геометрические фигуры, а другая половина — информацию о компании. Черный фон делает белое содержимое и линии сетки особенно заметными и привлекательными. Несмотря на то, что общий дизайн довольно минималистичен, опять же, разумное использование простых линий и оригинальный способ их расположения улучшили внешний вид сайта и сделали презентацию привлекательной и интересной для просмотра.

Bruno Arizio

Сайт Bruno Arizio открывается вереницей вертикальных линий, собирающихся в центре экрана. Они медленно начинают сжиматься, освобождая место для линии вверху, которая отделяет меню от остального контента. В то же время в области просмотра появляются анимированные круги, которые бегут от одной стороны экрана к другой, обеспечивая накаченное адреналином знакомство с творчеством Arizio. Само меню скрыто и представлено в виде "Резюме". Ссылки меню разделены линиями сетки, а рядом с названием каждой страницы стоит номер. Эта, казалось бы, незначительная деталь, в сочетании с "резюме" и доминирующей горизонтальной навигацией, придает сайту атмосферу каталога или книги. Прокручивая дальше, вы заметите, что название каждого раздела отображается вертикально и отделено от остального содержимого с помощью линий сетки. Arizio также использовал линии для разделения коллекции выбранных им проектов. Однако при прокрутке названия и детали работ поднимаются вверх, открывая художественные образы, иллюстрирующие, какими бывают проекты. Использование линий сетки особенно удобно для отображения длинного списка наград Arizio. В этом разделе он объединил вертикальную навигацию с анимированными, горизонтально прокручивающимися названиями наград. Он также позаботился о том, чтобы при наведении курсора только выбранная награда оставалась выделенной белым цветом, а остальные становились серыми, чтобы вы могли сосредоточиться только на конкретной награде. Продуманное применение линий на всем сайте, гениальное сочетание визуальных эффектов, а также использование вертикальной и горизонтальной навигации демонстрируют мастерство дизайнера и его умение создавать убедительные сайты, используя простые элементы в творческом ключе.

NON

NON — это австралийская безалкогольная альтернатива вину. Сайт наполнен яркими визуальными эффектами, которые погружают вас в историю бренда. Особенно интересны фоновые видеоролики, а линии сетки также помогают сделать сайт более привлекательным для зрителя. Фактически, сетка позволила дизайнерам элегантно добавить прокручивающийся текст и аккуратно перечислить все продукты, органично вписав их в энергичные визуальные образы. При наведении курсора на названия проектов черные заглавные буквы становятся неоново-зелеными, что в сочетании с сеткой и шрифтом без засечек создает атмосферу брутальности. Более того, при наведении курсора в окне просмотра появляются полноразмерные изображения товаров, которые закрывают собой контент и забирают все ваше внимание. Если бы не сетка, некоторые разделы сайта, вероятно, были бы слишком громоздкими. Вместо этого горизонтальные и вертикальные линии делают сочетание прописного шрифта без засечек, анимированных изображений и видеороликов целостным и гармоничным, рассказывая историю бренда в яркой манере.

Female Faces

Female Faces — это проект, который рассматривает вопросы о правах женщин с помощью видеопортретов. Макеты на основе сетки обеспечивают простую и понятную навигацию. Сочетание сеток и типографской простоты вызывает ассоциации с брутализмом и швейцарским стилем. Сетки особенно удобны в области, содержащей коллекцию фильмов FF. Каждому фильму отведен свой собственный раздел. По умолчанию вы можете видеть только название фильма, его продолжительность и имя режиссера. Но при наведении курсора на экране появляются превью, побуждая вас посмотреть представленный фильм. Инерция сеток на главной странице прерывается вращающейся сферической формой, напоминающей киноленту. Она приглашает вас позвонить в компанию для записи. Веб-сайт в основном монохроматический, однако и нижний колонтитул, и меню содержат градиент, при этом черный цвет плавно превращается в сплошной красный. Смена цвета удивительна и интенсивна, что делает сайт особенно интересным для зрителей. Линии сетки помогли компании создать четкие и удобные для пользователя макеты, благодаря которым каждый сможет быстро и легко найти то, что его интересует.

Oto Nove Swiss — Paris

Oto Nove Swiss — это фестиваль современной музыки, который обычно проводится в лондонском кафе Oto. В 2020 году фестиваль проходил в Париже, и сайт, созданный по этому случаю, привлек наше внимание благодаря своему великолепному дизайну и использованию сетки. Главная страница разделена пополам прямой вертикальной линией — верхняя часть содержит название фестиваля и информацию о времени его проведения, а нижняя область включает в себя предварительные просмотры песен. Меню расположено на экране вертикально и представлено как неотъемлемая часть каждой страницы. Линии сетки разделяют разделы, которые при нажатии разворачиваются по всему экрану. Рядом с именем каждого исполнителя находится большая черная кнопка воспроизведения. Мощь изображения кнопки контрастирует с хрупкостью тонких линий, а мощный черный цвет сразу привлекает ваше внимание, побуждая прослушать представленные песни. Если нажать кнопку воспроизведения на главной странице, появится вертикальная линия, символизирующая индикатор прогресса и делящая экран далее на четыре части. По мере продвижения песни линия перемещается слева направо. Если песня содержит ударные, все четыре части главной страницы вибрируют, повторяя ритм песни.

Studio Almond

‍Studio Almond — это цифровая студия с потрясающим веб-сайтом на основе сетки. Главная страница разделена на две большие колонки и значительно меньшую область в крайней левой части, занятую вертикальным меню. Колонка слева содержит информацию о бренде, а в колонке справа представлены проекты студии. В обоих случаях используется эффект бесконечного цикла, так что подача информации о компании кажется непрекращающейся. Две большие колонки разделены на несколько маленьких частей, каждая из которых содержит одну информационную деталь или название проекта. Когда вы наводите курсор на работы, анимированные превью заполняют выбранную область, давая вам представление о том, на что похожи проекты. В колонке слева, помимо подробностей о студии, есть интересные геометрические детали, которые чередуются с информативным текстом. Некоторые части экрана содержат диагональную линию с анимированным шариком, который катится вниз, следуя направлению линии. В других — два круга, один из которых представляет собой просто окружность, а другой изображен в 3D, причем оба следуют за движением мыши. Страницы отдельных проектов повторяют дизайн главной страницы, все макеты разделены на две колонки, что помогает создать целостную эстетику всего сайта. Дизайнеры нашли прекрасный способ распределить и представить контент, не перегружая пользователей слишком большим количеством информации. В очередной раз подтвердилось кредо, что “меньше = лучше”, и этот сайт является отличной демонстрацией способностей и креативности студии.

Hudson Gavin Martin

Hudson Gavin Martin — это корпоративная и коммерческая юридическая фирма, специализирующаяся на технологиях, медиа и интеллектуальной собственности. Дизайн их веб-сайта не похож на типичную презентацию юридической фирмы. Жирные черные линии сетки делят сайт на множество разделов, каждый из которых содержит новую информацию о компании, статью, написанную ее сотрудниками, и т. д. На сайте преобладают белые и пастельные цвета, но при наведении курсора большинство блоков становятся зелеными, красными, синими или темно-серыми, контрастируя со спокойствием окружающей обстановки. Таким образом, глаза пользователей остаются приклеенными к выбранному элементу. В некоторых разделах заголовки написаны сбоку, и эта деталь в сочетании с сетками и интересными цветовыми изменениями придает сайту современный вид и помогает этой юридической фирме выделиться на фоне конкурентов.

Sometimes Always

Sometimes Always — это интернет-магазин вина. Их сайт эстетически привлекателен, в цветовой палитре преобладают теплые желтые, а также мягкие оранжевые и коричневые цвета. Учитывая большое количество товаров, которые они должны были продемонстрировать на сайте, внедрение линий сетки в дизайн было логичным выбором. Просто взгляните на главную страницу. Здесь огромное количество фотографий и много текста, забавные шрифтовые решения с жирным, курсивным и обычным начертанием, объединенные в одном предложении, но вы ни на секунду не почувствуете себя перегруженным. Серьезность линий сетки помогает сгладить яркую динамику страниц, гарантируя, что ни один элемент не будет подавлять другой, и позволяя пользователям сосредоточиться на всех разделах в равной степени. Тот же принцип применяется и к внутренним страницам, где каждая бутылка имеет свое собственное место, и каждая получает равное количество внимания от пользователя. Помимо того, что винные бутылки находятся на расстоянии друг от друга, сетки также помогают упорядочить меню. При наведении курсора на некоторые ссылки появляется мега-меню с линиями сетки, разделяющими разделы и изображения, что позволяет пользователям быстро перейти на страницу, которая их больше всего интересует.

Cine365 Films

Cine365 Films — испанская кинокомпания. Их веб-сайт имеет интересный, преимущественно черно-белый дизайн с разноцветными градиентами в меню. Однако, когда вы переходите на главную страницу из любого другого раздела сайта, на экране загрузки ненадолго появляется макет главной страницы без текста. Есть только название студии и градиентный фон. Использование градиента и цвета — хороший способ уравновесить грубость простых сеток и слегка оживить сайт, особенно главную страницу, на которой нет графики. При наведении курсора на названия фильмов, в указанном поле появляются обложки фильмов, приглашая вас узнать больше о выбранной картине. Отдельные страницы проекта повторяют дизайн главной страницы, за исключением того, что они содержат гораздо больше изображений и подробностей о фильме. Все очень аккуратно, и общий дизайн довольно прост, что позволяет представленным фильмам оставаться в центре внимания.

Notter + Vigne

Notter + Vigne — графическая студия, расположенная в Швейцарии. Их сайт выглядит минималистично и изысканно. Серый фон является идеальным для красочных портфолио, представленных на нем. Более того, белые линии сетки почти незаметны на сером холсте, что позволяет проектам захватить все внимание зрителя. Большинство страниц разделено на несколько колонок и строк, так что для каждого и�