Рассматривая многочисленные работы художественных мастеров, можно наблюдать интересную картину. В эти весенне почти осенние месяцы любимым трендом дизайнеров стали полигоны или фигуры-многоугольники. Их изображают на плакатах, печатных проектах и, что занятно, в оформлении сайтов тоже. И не в малом количестве.
Полигон (polygon) – понятие знакомое тем, кто имеет представление о компьютерной 3D-графике или о том, что такое «артефакты» во время некорректной работы видеокарты. В 2D-пространстве принято использовать понятие многоугольника, и что это такое мы все помним из курса геометрии. Особенность фигур-многоугольников – в способности иметь разное количество сторон и форм, быть заполненными чем-то или пустыми (только с рамкой), с пересекающимися внутри себя линиями и без. Одним словом, самыми невероятными по внешнему виду. И это, разумеется, подталкивает веб-дизайнеров на использование их в оформлении фонов страниц, логотипов, секций сайта, иконок, инфоблоков и прочее, и прочее.
Еще один любопытный момент мы заметили. Дело в том, что многоугольники, как правило, плоские, но поскольку некоторые сайты создаются в 3D-пространстве, то и полигоны анимируются, приводятся в замысловатое движение. Это уже больше напоминает создание 3D-проекта, который еще способен предъявить свои требования к возможностям вашей видеоподсистемы.
Но речь сегодня не о том и не таком сложном.
Почему многоугольники?
Когда речь заходит о художественном стиле дизайна (акварель, с фотографиями или типографический и пр.), большинству из нас на ум приходит самое простое: квадратики и прямоугольники, линии. Расставляем, анимируем при необходимости и сайт готов. Многоугольники же в данном случае – хорошая идея для нового сайта или обновления уже имеющегося, но не совсем недавно созданного. Во время обычного разговора и размышления, кажется, что ничего эдакого-разэтакого во всем этом нет. Но давайте посмотрим ближе на работы веб-мастеров в этом направлении.
Многоугольный фон
В первую очередь нас заинтересуют проекты Omniwomen, Domus 1000, Survivalrussian, Jetrails, Dtsi, Croscon. Когда трудно подобрать визуальное решение многоугольник может стать отличным инструментом. Такая форма в течение многих лет обладает, что называется, «вау»-эффектом и предлагает интересные соединения и сочетания. Он может сочетаться с текстом, с иными формами, изображениями или даже использоваться в «соло».
Проекты выше наглядно демонстрируют как многоугольник используется в различных формах и обладает визуально-интригующим видом. Формы его помогают добиться глубины, дают представление о движении. И даже способны, словно бы, сигналить пользователям о том, на что им обратить свое внимание в первую очередь.
Приятный бонус веб-дизайнерам – многоугольники несложно создавать и рисовать, их можно включать в любой стиль и окрашивать практически в любой цвет или градиент. Но наиболее популярным вариантом является использование сочетания тонких линий граней многоугольника, будто парящих над 2D-плоскостью. Только всего пару-тройку линий делают поистине жирными и твердыми.
Интересные элементы и иконки
Элементы пользовательского интерфейса тоже могут обладать замысловатыми многоугольными формами. Даже использование окружностей тоже претерпевает свою эволюцию. Речь идет о проектах Leeds Golf Centre, Gentriville, Croscon, Raoul-Gaillard, Chop-Chop, Britannic Technologies, treenodes:media.
Нет четкого правила о многоугольниках в дизайне, о размере, цвете, форме. Посему дизайнеры творят все, на что хватает фантазии и художественного вкуса. Стоит заметить, что зачастую неимоверно крошечные детали способны в корне изменить визуальную составляющую проекта. Использование сложных форм в качестве элементов интерфейса позволяет насытить дизайн глубиной и привести к необычным сочетаниям цветов и оттенков.
Например, Leeds Golf Centre использовали многоугольники в различных вариантах. В оформлении блоков разделов, фонового изображения, последних событий, кнопочек, иконках. Согласитесь, но сайт гольф-клуба выглядит как нечто из разряда «ноу-хау» и нечто фантастического.
Chop-Chop пошли несколько по иному пути и создали из многоугольников анимированную фигурку, меняющуюся при выборе того или иного пункта навигации. То это стрелочка, то котенок, то ключ и прочее. На странице практически ничего более нет, а потому ярко-жёлтый анимированный элемент буквально притягивает к себе внимание, создает некую уникальность проекта.
Gentriville также использовали многоугольники и в качестве иконки загрузки страницы и при прокрутке. Все они соединяются, разбиваются, смешиваются и меняют свои формы.
Многоугольники, по своей сути, являются знаковыми и интересными объектами для пользователей . На подсознании, видя многоугольник в интерфейсе, мы полагаем, что нас ожидает нечто из технологичного направления. Различные HUD-экраны, интерфейсы на космических кораблях или на экранах устройств городов будущего используют многоугольники только так. И это часто показывают в видеоиграх и кинофильмах. Отсюда и ассоциации.
Почему именно они? Незамысловатые формы, вне зависимости от своего размера, понятны большинству людей. Использование маленького треугольника или ломаной фигуры близ любого элемента пользовательского интерфейса – хороший способ сделать что-то отличное от обыденности, нежели использование кружочка или квадратика. А результат все тот же. Ясность, приятность, четкость.
Объяснить и подсказать
Если необходимо подсказать посетителям сайта или рассказать, как что-то работает или где что-то находится, то многоугольники и здесь приходят на помощь. Посмотрим на Gentriville, Ditto, Choudharylab, Matthias Rendl Grafikdesign, Change Gout, DELAUNAY, Lateralview, Beesecret. Из курсов геометрии и математики известно, что многоугольник помогает обеспечить отображение информации, инструкции для понимания этой самой информации. В дизайне проектов это выглядит как контуры многоугольника, наложенные поверх другого изображения.
Чтобы было понятно, о чем идет речь, вспомните, что собой представляет полигонная сетка марионеточного деформирования в Adobe Photoshop. Также стоит иметь в виду и о том, как создаются объемные фигуры в программах работы с 3D-графикой. На примерах выше также же можно видеть пояснения наших мыслей. Например, многоугольники используются для представления о том, как работают очки по распознаванию формы лица. DELAUNAY же используют многоугольные формы и анимацию, как ассоциацию с тем, что деятельность компании (по веб-дизайну) связана с нечто научным и технологичным.
Аналогично Matthias Rendl Grafikdesign также специализируются на творческо-информативной деятельности (плакаты, баннеры, тизеры, бюллетени), а потому и многоугольники используются в качестве олицетворения соответствующей деятельности.
Или страница антивозрастного крема Beesecret выполняет с помощью многоугольников ту же функцию.
Общее у всех примеров, приведенных нами выше, в том, что все они, используя контуры разных форм многоугольников, лучше объясняют посетителям содержание проекта и его цель. Да, почти везде есть анимация и она также легка и скромна, а потому как раз таки помогает изучать контент и ресурс.
Цветовые пары
Многоугольники естественны в использовании, если есть желание в дизайне использовать яркие цвета или выделить что-то более контрастным оттенком. Обратим взор на Gentriville, Hi-story Lessons, Creamfields, Baileyandfrench, Van der Vliet Aannemer, Alexcoven, Beesecret. В общей гамме цветов палитры веб-дизайна, контрастные многоугольники предлагают тот самый акцент, что изменяет восприятие и задачи сайта. И это кажется нам идеальной игрой с элементами и идеями.
Ах, ну кончено… Сочетать цвета можно до бесконечности и по времени это может затянуться на долгие часы. Посему попробуйте обратить внимание на:
- использование цветов строго из палитры проекта;
- черные и белые цвета «украшений» многоугольника лучше будут сочетаться со светлой его заливкой;
- градиентную заливку многоугольников;
- выделение их по цвету и придание акцента им, как на beesecret;
- контурные многоугольники или полностью окрашенные обладают одной и той же ясностью и работоспособностью.
Что еще?
Некоторые примеры нашего материала представляли многоугольники совсем крошечными, некоторые – достаточно крупными. Но и те, и другие выполняли убедительно свою роль, привлекая внимание посетителей и расставляя акценты на главном во всем объеме контента. И совершенно неважно логотип ли вашей компании использует многоугольник или в пунктах навигации можно иногда увидеть замысловатые геометрические формы.
Вне зависимости от размера этот объект захватывает внимание. И что особенно отлично, добавить такой элемент можно практически в любой готовый дизайн сайта без необходимости переделывать его полностью. Простой метод проектирования позволяет придать сайту современный вид, эстетичный и немного технологичный… ультрасовременный даже. Особенно это поможет, если проект вроде и новый, но «чего-то не хватает». А затрат по времени и больших вложений практически нет. Кроме, разве что, фантазии. Многоугольники бывают разными и реализовать их можно по-разному.
Посмотрим еще на: 11th Behance Reviews BH, Fotonaut Events, Alberta Education, Ardis, Master Digital Design, Paybase.
Выводы
Многоугольники или Polygon представляют собой весьма занятный тренд в этом году. Особенность его в легкости использования в самых разных дизайнерских стилях. Тот же акварельный Caavadesign – яркий тому пример. А ведь частенько такие формы можно увидеть в приложениях информативного характера или инструментариях.
Кроме этого, многоугольную форму понимают все. И именно она используются в качестве основного строительного блока в дизайне и компьютерной графике. Добавим, что особый интерес такие «ломаные» фигуры вызывают, находясь на фоне, таких уже привычных, окружностей и квадратов (прямоугольников). Их веб-мастера используют, наверно, в каждом проекте. Многоугольники же, напротив, своеобразно открывают новую концепцию, которую можно использовать «по душе». И это приносит удовольствие и посетителям, и мастеру, и даже заказчику тоже.