Глассморфизм

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

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

Соучредитель HYPE4 UI Designer Михаил Малевич первым ввел термин «Glassmorphism» (Глассморфизм или стекломорфизм). Тенденция возникла после выпуска новой версии операционной системы Apple, где использовались прозрачные элементы с эффектом матового стекла в сочетании с яркими цветными подложками.

Со временем этот эффект набрал популярность и стал заметен во многих интерфейсах.

Отличить глассморфизм от других тенденций достаточно просто. У него есть определенный набор особенностей:

1. Прозрачность

Элементы интерфейса (иконки, области, объекты) должны быть прозрачными или полупрозрачными, чтобы пользователь мог видеть фон за объектом.

2. Заметный фон

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

3. Размытие фона и текстура с шумом

Эти эффекты поддерживают идею имитации стекла.

4. Границы

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

5. Градиент

Мягкие переливы градиентов работают на создание иллюзии стеклянной поверхности.

6. Многоплановость

Создание многоуровнего интерфейса помогает добиться эффекта глубины экрана при помощи визуальной иерархии и наслоения элементов друг на друга.

1. Создание элемента

Первый шаг — нарисовать объект нужной вам формы, который позднее станет «стеклянным». Это может быть элемент любой формы: простая геометрическая фигура, силуэт сложного объекта, иконка или пространство, где будет находиться контент.

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

2. Выбор фона

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

3. Определить уровень непрозрачности

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

Стоит помнить, что 100% прозрачность вы делаете не у всего элемента, а у заливки. Многие инструменты при 100% прозрачности всего элемента отключают функцию размытия фона, и вы не получите эффект матового стекла.

4. Размытие фона

Благодаря этому эффекту получается иллюзия стекла, когда фон становится нечетким, словно в расфокусе. Эту характеристику дизайнер настраивает индивидуально к каждому продукту. Например, при непрозрачности 0% и 25-пиксельным размытием будет искажать фоновые элементы, но при этом иметь несколько различимые края. Если установить размытие до 100 пикселей, те же самые фоновые элементы становятся более не в фокусе и сливаются вместе — получается градиент.

Иногда для большего достижения эффекта матовости можно добавить эффект шума или зернистость.

5. Добавление границ

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

6. Тени у объектов

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

7. Наполнение контентом

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

При создании интерфейса в стилистике глассморфизма обращайте внимание на следующие моменты:

Доступность

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

Контрастность

Для того чтобы текст был разборчив со стеклянной поверхности, нужно установить правильное соотношение контрастности. Четких рекомендаций в данном случае нет, поскольку все зависит от конкретного контента и фона. Для работы в Figma используйте плагин Contrast by Willowtree, который поможет определить уровень контрастности подложки, типографики, размытого фона и других элементов.

Адаптивность

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

Баланс

Соблюдение баланса важно в каждом дизайне. Не стоит увлекаться элементами глассморфизма. Например, для кнопок этот подход лучше не выбирать. СТА-кнопка может затеряться на активном фоне, а она должна быть акцентная. Глассморфизм может стать классным дополнением к дизайну: карточки товаров, pop-up или формы регистрации будут выигрышно смотреться в этой стилистике.

Регулировка прозрачности

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

Цветовая палитра

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

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

Темные насыщенные тона фона в сочетании с анимированным 3D-элементом гармонично соотносятся со стеклянным объектом, имитирующим банковскую карту. Цвет, плавная анимация, изгибающиеся линии 3D-объекта и глассморфизм придают воздушность и легкость продукту.

Пример, где в качестве фона использована фотография. Листья растений напоминают паттерн, что в сочетании со светлым блоком «матового стекла» создает ощущение только прошедшего дождя. Темные, глубокие, приглушенные оттенки зеленого цвета не отвлекают пользователя от основной задачи и создают спокойную и расслабленную атмосферу.

В данном случае в стилистике глассморфизма выполнен один элемент дизайна, который использован как дополнение к спокойной и минималистичной странице сайта. Объект помещен в верхней части фотографии, не перекрывая лица героев. Внутри элемента находится текстовый контент: он разборчив и читабелен. Сочетание мягкого пастельного фона и темного цвета шрифта акцентирует внимание пользователя на основной информации.

Глассморфизм используется как часть общей дизайн-концепции и связывает фон с карточками. В данном случае глассморфизм расположен в нижней части карточек на пересечении изображения фона и самого элемента.

Оформление карточек гармонично встраивается в визуал сайта. Глассморфизм позволяет продемонстрировать пользователям текстовое описание, добавляя легкость минималистичному дизайну.

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

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