Изометрия в дизайне

В этой статье поговорим об изометрии. Это непростое понятие, которое пришло в дизайн из математики. Однако мы постараемся доступно изложить сложные вещи, поэтому предлагаем ознакомиться с материалом, даже если вы считаете себя гуманитарием.

В этом лонгриде:

Чтобы говорить о сегодняшней теме, вспомним немного теории из геометрии.

Проекция — это изображение трехмерной фигуры на плоскости.

Нам нужно рассмотреть аксонометрическую проекцию и ее виды.

Итак, аксонометрическая проекция — это такая проекция, в которой трехмерные объекты изображаются не четко справа, слева, сверху или снизу, а немного сбоку и сверху. У нее есть три разновидности: диметрия, триметрия и изометрия.

Выбор разновидности проекции влияет на итоговое изображение предмета. Для ясности приведем наглядный пример:

Изометрическая проекция

В этой статье нас интересует только изометрическая проекция. Сразу отметим, что понятия «изометрия» и «изометрическая проекция» часто взаимозаменяются. В статье мы будем использовать оба варианта, наряду со словосочетанием «изометрический дизайн».

У изометрии также различают несколько видов: прямоугольную, косоугольную фронтальную и косоугольную горизонтальную. При этом, говоря об изометрии в дизайне, подразумевают прямоугольную изометрическую проекцию. В такой проекции ось Z направлена вертикально, а оси XYZ образуют углы в 120°. Далее мы будем говорить именно об этой разновидности.

Еще одна важная деталь про изометрию: с помощью нее можно изобразить предметы без перспективных искажений. В классической перспективе удаленные от зрителя предметы кажутся меньше. В изометрии же все предметы одинаковые по размеру, несмотря на расстояние.

Изначально изометрическую проекцию начали использовать в инженерии, чтобы создавать наглядные изображения трехмерных объектов на двумерных чертежах.

В результате оказалось, что изометрия способна:

По этим причинам изометрия распространилась и на другие области: компьютерные игры, айдентику, рекламу и графический дизайн, где она нашла особенно широкое применение. Изометрический дизайн подходит для создания иконок, графиков, диаграмм, иллюстраций, карт, графики для веб-дизайна, шрифтов, логотипов и многого другого. При этом результаты получаются необычными и более реалистичными, чем в 2D-дизайне.

Поговорим подробнее о тех способах применения изометрии, которые ближе всего к веб-дизайну.

Иллюстрации

Изометрические иллюстрации — это изображения, созданные таким образом, чтобы выглядеть трехмерными.

Они выглядят более реалистично, хорошо отличаются от фона и лучше передают настроение с помощью цвета, света и тени.

Такие иллюстрации привлекают внимание и могут быть использованы на сайтах вместо фотографий или в качестве инфографики для презентации товаров и услуг.

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

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

Иконки

Иконки — это небольшие значки, которые помогают пользователю ориентироваться в интерфейсе и понимать, какие функции и инструменты есть на сайте.

Яркие примеры: изображения корзины, кредитной карты, платежных систем, метки для скидок и т. д. Так как иконки обычно маленькие, в их дизайне не должно быть большого количества деталей.

Конечно, иконки могут быть и двумерными (плоскими). Однако такие иконки чаще сливаются с фоном. В результате пользователю сложнее определить, куда нужно нажимать.

Напротив, изометрические иконки ярче выделяются на фоне и, соответственно, представляют собой более удобный вариант для пользователя. К тому же такие иконки еще не успели приесться, поэтому привлекают больше внимания.

Типографика

Помимо более очевидного применения изометрии в иллюстрациях и иконках, она также встречается и в типографике. Здесь она создает иллюзию объема текста при помощи трехмерных букв, которые выглядят так, будто состоят из кубиков или других простых геометрических фигур. Кроме того, изометрическим можно сделать целое слово или текст. Нужно только повернуть их под правильным углом.

Такой текст выглядит более динамичным, интерактивным и оригинальным, это стимулирует интерес пользователя к содержанию. Рекомендуем использовать изометрическую типографику для слоганов, заголовков, постеров, обложек и логотипов.

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

Начнем с преимуществ изометрии:

При этом у 2D-дизайна есть некоторые ограничения:

Таким образом, мы не хотим сказать, что 2D-дизайн нужно заменить изометрией повсеместно. Однако у изометрического дизайна есть свои плюсы, которые можно использовать, когда тематика сайта это позволяет.

Итак, в этой части мы поговорим о правилах изометрии, изометрической сетке и о том, как нарисовать простые изометрические фигуры в Figma. Это позволит вам опробовать изометрию в действии. Но обо всем по порядку.

Главные правила изометрии

1. Правило 120 градусов

Дизайн считается изометрическим только при условии, что углы между осями равны 120°. Помимо этого, горизонтальные линии проводятся под углом 30° к горизонтальной плоскости, а вертикальные прямые должны быть направлены строго вверх.

Тем не менее можно встретить большое количество работ, где это правило нарушено.

2. Параллельные прямые не пересекаются

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

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

Если вам необходимо показать, как предметы уменьшаются и искажаются при удалении от зрителя, используйте перспективу, а не изометрию.

3. Порядок и минимализм

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

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

Изометрическая сетка

Итак, изометрическая сетка — это инструмент для построения изометрии. Она помогает соблюдать равный масштаб во всех направлениях и сохранять пропорции объекта.

Такая сетка облегчает процесс рисования, потому что вы можете просто наносить рисунок поверх нее без необходимости разворачивать объекты, высчитывать углы и т. п.

Такую сетку можно просто скачать из интернета или сделать самому в графическом редакторе. Для этого вам потребуется:

Построение изометрических фигур в Figma

Если вы работаете в Figma, попробуйте выполнить следующие шаги, чтобы получить кубоид (прямоугольный параллелепипед) и цилиндр.

Построение кубоида:

1. Нарисуйте три прямоугольника с помощью инструмента «Прямоугольник» (R); для вида сверху, спереди и сбоку соответственно. При этом:

• Ширина передней фигуры равна ширине верхней фигуры.
• Высота боковой фигуры равна высоте верхней фигуры.
• Ширина боковой фигуры равна высоте передней фигуры.

2. Рисуем верхнюю часть кубоида:

• Выберите прямоугольник, предназначенный для верхней части кубоида, поверните его на 45°.
• Нажмите правую кнопку мыши и выберите Flatten.
• Умножьте параметр высоты на .5773 либо вручную установите высоту 57,73%.

3. Рисуем переднюю часть кубоида:

• Выберите прямоугольник, предназначенный для передней части кубоида, поверните его на -45°.
• Нажмите правую кнопку мыши и выберите Flatten.
• Умножьте параметр высоты на .5773 либо вручную установите высоту 57,73%.
• Поверните фигуру на -60°.

4. Рисуем боковую часть кубоида:

• Выберите прямоугольник, предназначенный для передней части кубоида, поверните его на -45°.
• Нажмите правую кнопку мыши и выберите Flatten.
• Умножьте параметр высоты на .5773 либо вручную установите высоту 57,73%.
• Поверните фигуру на 60°.

5. Готово! Осталось собрать стороны кубоида вместе.

Построение цилиндра:

1. С помощью инструментов «Прямоугольник» (R) и «Овал» (O), нарисуйте фигуры для вида сверху и спереди. Важно, чтобы фигуры были одинаковыми по ширине.

2. Выберите овал, умножьте его высоту на .5773 либо вручную установите высоту 57,73%.
3. Дублируйте овал для нижней части цилиндра. Настройте такой же цвет, как у передней части цилиндра.

4. Соберите все части. Готово!

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

1. Нарушение порядка отрисовки

Важно начинать с примитивных фигур и постепенно их детализировать. Например, если рисуем дом, то сначала выстраиваем куб, потом крышу из линий и треугольников, и уже после — окошки, двери и прочее.

Если нарушить этот порядок, то можно запутаться в деталях и вообще выбиться из изометрической сетки. Тогда есть большая вероятность, что иллюзия объема будет потеряна.

2. Неправильное построение кривых форм

Из кривых линий строится базовая фигура: круг. Чтобы он получился правильным, нужно заранее начертить центральные оси будущих окружностей. Такие оси помогут правильно определить места скруглений, обозначить сегменты и соединить их в окружности.

3. Разные изометрические сетки

В правильной изометрической проекции все объекты ориентированы одинаково. Иначе будет казаться, что они находятся в разных плоскостях. Поэтому нельзя использовать одну сетку для одних объектов, и вторую сетку — для других.

4. Разный уровень детализации

Чтобы рисунок получился красивым и гармоничным, объекты в нем должны быть одинаково детализированными. Например, нельзя чтобы дом имел большое количество деталей и текстуру, а деревья вокруг него представляли собой зеленые пирамидки.

5. Разница масштабов

Нужно следит за тем, чтобы объекты на рисунке были пропорциональны относительно друг друга. Если мы говорим о том же доме, то он не может быть меньше своего жильца. Не забывайте сравнивать размеры персонажей с окружением.

6. Неправильное освещение

В иллюстрации важно помнить о направлении света и тени. На трехмерной иллюстрации может быть несколько источников света, обращайте на них внимание и выстраивайте светотень с учетом их местоположения и яркости.

7. Неправильная работа с цветом

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

Данные выше рекомендации можно дополнить несколькими простыми советами:

1. Не забывайте про глубину

Несмотря на то, что мы не можем показать близость или отдаленность объекта с помощью перспективы, мы можем затемнять или размывать те предметы, которые находятся дальше от зрителя. Так мы добьемся большей реалистичности.

2. Соблюдайте правила композиции

Главные по смыслу объекты выделяйте и располагайте так, чтобы их значимость легко считывалась при просмотре. Кроме того, вы можете использовать линии, формы и цвета, чтобы указать на важные элементы. А для создания ритма и единства композиции переиспользуйте элементы там, где это уместно.

3. Развивайте насмотренность

Pinterest и Behance — популярные площадки, где художники и дизайнеры делятся своими работами в разных стилях. По ключевым запросам вы найдете много интересных примеров, которые сможете проанализировать.

Мы попробовали вручную настроить угол поворота и направление фигур в Figma, а также познакомились с основными ошибками при построении изометрии. Возможно, после этого вам захотелось упростить и автоматизировать эти процессы. Поэтому мы подготовили для вас несколько полезных плагинов.

1. Isometric. Позволяет задать точный градус поворота и направление фигуры, текста, иконки или изображения в несколько кликов.

2. Ease Isometric. Отличается наглядностью: кнопки сразу демонстрируют результат. Подходит для работы с фигурами, текстом, иконками и изображениями. Предлагает две готовые объемные фигуры: куб и цилиндр, и позволяет их редактировать.

3. Easometric. Позволяет автоматически поворачивать фигуры, текст, иконки и изображения. И вам не придется запускать плагин каждый раз: достаточно использовать быстрое меню.

4. SkewDat. Подходит для работы с текстом, фигурами, изображениями и иконками. Позволяет поворачивать объекты по вертикали и по горизонтали с помощью бегунка. Удобство заключается в том, что переключаться между объектами можно не выходя из плагина, его можно применить сразу к нескольким объектам, а еще все действия можно отменить.

Итак, есть плагины, которые помогают развернуть 2D-фигуры, чтобы составить из них объемные изображения — уже хорошо. А как сделать еще проще? Можно найти готовые иконки и картинки, построенные по всем правилам изометрии. Например, здесь:

• Flaticon и Freepik — большие ресурсы, где можно найти и платные, и бесплатные изображения. На бесплатном тарифе нужно указывать автора картинок. У обоих сайтов есть плагины для Figma: плагин Flaticon, плагин Freepik.
• Isometric Love — сайт со скругленными изометрическими изображениями. Бесплатно для некоммерческого использования, но требуется указание ресурса.
• Isometricmaps — интересный ресурс для создания своих изометрических карт. Требуется приобрести лицензию.

В завершение нашего погружения в изометрию рассмотрим несколько реальных сайтов, где она была удачно использована.

1. Сайт команды дизайнеров интерьеров AVENIR

На сайте дизайнеров AVENIR креативность команды подчеркнута с помощью изометрических элементов: главного заголовка, пунктов меню, декоративных элементов в виде вертикальной и горизонтальной осей.

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

2. Сайт компании по разработке программного обеспечения PSYCH

IT-тематика — прекрасный пример, где использование изометрии является уместным решением. Посмотрите, как ярко и интересно изометрические иллюстрации демонстрируют рабочие процессы компании.

3. Сайт компании Chronicled, предоставляющей технологию блокчейн в области медико-биологических наук

Изометрические иллюстрации хорошо передают новизну и высокотехнологичность бизнеса. Кроме этого, сайт выглядит визуально привлекательным, несмотря на сложное и специфичное содержание. То есть изометрия помогает преодолеть возможное сопротивление пользователей и заставляет внимательнее изучить контент.

4. Сайт Codex Atlanticus — собрание рукописей Леонардо да Винчи

Этот интерактивный сайт собрал большое количество наград и представляет собой онлайн-портфолио великого художника и изобретателя. Здесь минималистичная изометрия — главный визуальный прием. В сочетании с анимацией она заставляет пользователя надолго задержаться, чтобы получше рассмотреть весь контент.

5. No-Code Conf 2021 — сайт конференции о разработке без программного кода

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

Изометрические проекции в веб-дизайне привлекают своей оригинальностью, детализированностью и реалистичностью. В то же время они просты и минималистичны. Изометрию можно использовать для создания иллюстраций, иконок и текстов.

Но при работе над такими элементами нужно помнить о правилах изометрии, чтобы не сломать композицию и иллюзию объема. Кроме того, не рекомендуется сочетать изометрию с 2D-графикой, а выбор стиля сайта должен соответствовать его тематике.

Для автоматизации и упрощения работы можно использовать плагины, а также готовые изометрические объекты.