скидка 80% на курс “С 0 до Middle+” + Бесплатно школа плакатов v 2.0

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

Автор статьи:
,

Введение

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

Что такое глассморфизм?

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

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

Интерфейс Apple Mac os

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

Характеристики глассморфизма

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

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

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

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

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

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

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

4. Границы

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

5. Градиент

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

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

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

Как создать глассморфизм?

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

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

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

Иконки в стиле глассморфизм. Автор: Richard Zerr

2. Выбор фона

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

При выборе фона помните про следующие аспекты:
  • акцент страницы создается на матовой поверхности, подложка не должна перетягивать внимание пользователя на себя;
  • фон должен отвечать визуальной концепции сайта: цвета бренда, фигуры и элементы, повторяющиеся в дизайне;
  • фон должен сочетаться с контентом как визуальным, так и текстовым.
Автор: Yashi Garg

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

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

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

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

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

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

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

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

Автор: Fari Mukhtar

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

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

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

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

Рекомендации по созданию

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

Доступность

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

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

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

Автор: AISHWARIYA R

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

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

Баланс

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

Автор: Fawad Ibrar

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

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

Автор: Daniela Fruzza

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

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

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

Автор: Sweety Pund

Примеры

T.RICKS

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

Sign In

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

chaanz-showcase.webflow.io

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

www.finnmarkmoods.no

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

www.heka.design

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

alfabank.ru

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

Заключение

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

Бесплатный учебник по UX/UI‑дизайну
Все лонгриды