Использование стекломорфизма при создании макета в Figma
Одной из современных тенденций в веб-дизайне стал стекломорфизм — эффект размещения картинки за стеклом с небольшим размытием. При взгляде на сайты с таким дизайном создается особое впечатление, которое характеризуется минималистичностью размещения компонентов. В нынешнем году интерес к глассморфизму не снижается, поэтому наверняка многим web-дизайнерам и тем, кто интересуется графической разработкой сайтов, будет полезным узнать о нем подробней.
Что представляет собой стекломорфизм
Итак, Glassmorphism (Glass effect или стекломорфизм) – это интересный и привлекающий внимание человека эффект, при котором создается размытый фон или его часть. Удобней всего создавать такой стиль в программе Figma, которая является удобным и практичным приложением. Данным ресурсом пользуется большое число разработчиков и web-дизайнеров, поскольку приложение отличается с одной стороны, простотой, а с другой, широкой функциональностью.
Практика показывает, что стекломорфизм в Фигме открывает очень большие возможности в плане уникального дизайнерского оформления web-сайтов. Широкие функциональные возможности позволяют активно экспериментировать с цветом, глубиной и степенью прозрачностью картинки, а также геометрическими фигурами. Для лучшего понимания такого эффекта, стоит описать его основные признаки:
Размытая прозрачность, с помощью которой создается многоуровневый эффект.
Наличие ярких цветов.
Расположение полупрозрачных объектов с тонкой и достаточно светлой границей, что позволяет имитировать край стекла.
Примечательно, что в стилистике стекломорфизм может использоваться в самых разных вариантах, поскольку хорошо сочетается с иллюстрациями, картинками, фотографиями и различными элементами интерфейса. Как глубина, так и вложенность могут быть самыми разными, однако обычно web-дизайнеры стараются использовать обычное размытие, создавая «матовое стекло».
Стекломорфизм аппелирует к ассоциациям, эмоциям и чувствам человека
Что дает эффект стекла и как его использовать в Фигме
Специалисты отмечают, что глассморфизм делает сайт более легким и «воздушным», поскольку при этом располагается минимум элементов. В целом стекло вызывает у человека приятные ассоциации, подчеркивая открытость продукта или услуги, а это позволяет быстрее сформировать доверие к производителю.
Примечательно, что стекломорфизм – это не просто стилизация интерфейса под стекло с помощью теней, натуральных материалов и объемных фигур. Это нечто более интересное и необычное, что дает особое восприятие картинки посетителем, вызывая у них определенные ассоциации. Стоит отметить, что глассморфизм – это не технический, а именно дизайнерский прием, с помощью которого неподготовленные пользователи могут привыкнуть к новому продукту.
Нужно помнить, что злоупотреблять эффектом стекла не стоит, поскольку в противном случае может получиться обратный результат. Данный эффект призван акцентировать на себе внимание посетителя, поэтому должен создаваться аккуратно, гармонично вписываясь в общую дизайнерскую задумку. Только в таком случае можно получить картинку, которая будет привлекать к себе внимание и повышать интерес к сайту.
Пример аккуратного использования Glass effect
Наилучшим образом такой эффект смотрится в качестве фона для карточек и уведомлений. При этом важно с самого начала убедиться в том, что текст на таком фоне будет читаться однозначно, не вызывая никаких затруднений у посетителя.
Как использовать глассморфизм в Фигме
Стекломорфизм в Фигме открывает широкие возможности, что обуславливается многофункциональностью программы. Для начала дадим несколько важных рекомендаций, приняв во внимание которые можно избежать ошибок и неточностей:
Чем ближе плашка располагается к фону, тем меньше формируется уровень его размытия.
Удаленность «матового стекла» от фона прямо пропорционально влияет не только на силу размытия, но также на степень прозрачности.
Если плашка располагается достаточно далеко от фона, то прозрачность естественным образом должно уменьшаться.
При добавлении эффекта шума можно получить повышенную реалистичность изображения.
Чем ближе плашка располагается к фону, тем меньше света она пропускает, поэтому должна быть более прозрачной.
Пример того, как меняется уровень восприятия карточки в зависимости от степени прозрачности
Очень большую роль играет фон, который не должен быть слишком простым или контрастным, содержать множество мелких деталей. Лучше всего выбирать яркий и контрастный фон, поскольку на нем стеклянная плашка будет выделяться наилучшим образом.
Разработка стилевых элементов стекломорфизма в Фигме
Главным преимущества программы Фигма является то, что эффект стекла можно уверенно реализовать всего за несколько действий. Для простоты описания дадим пример, как это оформить проще всего, разбив процесс на этапы:
1. Разрабатываем фрейм, помещая в него прямоугольник с простой картинкой.
2. Добавляем эффект, для чего открываем панель Effect -> Layer Blur (выбираем значение, к примеру, 100)
3. Создаем «матовое стекло» для чего вводим данные в опциях Fill (Linear) и Stroke (FFFFF). Ставим заливку Blur со значением 12
4. Для проверки «эффекта стекла», нанесем на рисунок 2 круга, один из которых будет перекрывать прямоугольник снаружи, а второй — находиться за ним. При этом градиенты кругов будут по цвету такими же, как и задний фон.
Чтобы добиться такого эффекта, в свойствах Layers выбираем опции «объект перед стеклом» для одного круга и «объект за стеклом» для другого, соответственно.
Таким образом, всего за 4 шага любой web-дизайнер может легко создать дизайн-макет с эффектом глассморфизма. Здесь нет ничего сложного, поэтому с реализацией уверенно справиться даже начинающий дизайнер.
Выводы
Широкие возможности программы Фигма дают возможность свободно экспериментировать, создавая такой эффект размытия, который требуется в зависимости от художественной задумки. Разобраться и освоить приложение несложно, поскольку программа обладает удобным пользовательским интерфейсом, а также понятным инструментарием.
Эффект стекла в Figma (glassmorphism)
Эффект на объекте, как будто он расположен за стеклом, называется — глассморфизм (glassmorphism).
Чтобы создать данный эффект в Figma нам потребуется:
- Создадим фрейм, внутри него прямоугольник, который зальем случайной картинкой
- Добавляем эффект к нашей картинке через панель Effect -> Layer Blur (Значение 100 вариативно, можете выбрать другое)
- Создаем «Стекло». Я не буду указывать все параметры в тексте, посмотрите на картинку и введите тоже самое. Для вашего удобства я отметил все свойства стрелочками
- Добавляем объект на передний и задний фон, относительно «стекла», чтобы проверить работоспособность. Для этого я создал два круга с градиентом, как у фона. Будьте внимательны и располагайте слои в левой панели правильно
Поздравляю мы сделали, сложный для многих, эффект всего за 4 шага.
Хотите изучить все инструменты в Figma, а также освоить процесс разработки дизайн-макетов? Приходите на вводный курс по UX/UI дизайну. Вы изучите начальный дизайн-процесс: работа в Figma, анализ информации, визуальная концепция, прототипирование и т.д. Ссылка на сайт курса.
Как создать эффект стекла в Фигме
Раз уж я в своей работе перешла на Фигму, то буду иногда публиковать небольшие уроки по ней здесь в блоге. Думаю, многим будет интересно. Без воды, простые понятные руководства. И начну с простого урока, как легко создать эффект стекла в Фигме.
Эффект стекла в Фигме
(Все картинки в статье кликабельны) Для начала создадим фрейм, допустим 800х500 пикселей и зальем его каким-нибудь цветом. Например зеленым. 
Теперь внутри фрейма создадим прямоугольник или квадрат. Из него мы будем делать наше прозрачное стекло. Я создам квадрат 300х300px белого цвета. 
Добавим для этого слоя эффект Backgound Blur (размытие заднего фона). 
Затем, нажав на «солнышко» выставим силу размытия на 15 
Все почти готово. Для наглядности, давайте добавим на задний фон какую-нибудь картинку или текст, чтобы эффект был более заметен. Я добавлю мужичка под деревом на закате. Закат пока не видно )) Но это пока… 
А теперь самое интересное. Чтобы появился эффект матового или полупрозрачного стекла, в Фигме достаточно изменить прозрачность заливки цвета слоя. Выделяем наш квадрат и Fill (заливку) уменьшим со 100% до 10% 
Главное не перепутать заливку с прозрачностью слоя. Если вы уменьшите процент в поле Layer, то такого эффекта не получится. Теперь можно поиграться с параметрами чтобы сделать стекло более матовым или наоборот… 
Дополнительные улучшения
Еще можем добавить немного реалистичности и объема. Скруглим углы у нашего квадрата. Я поставлю радиус 9. Затем воспользуемся плагином Isometric. Уверена, что вы умеете искать и устанавливать плагины, поэтому этот момент объяснять не буду. Запускаем плагин, выделяем наш квадрат и жмем любую из кнопок в окошке плагина. 
Изометрия есть. Теперь сделаем наше стеклышко чуть толще. Для этого выбираем группу, в которой лежит наш изометрический квадрат и добавим этой группе пару эффектов. Первый эффект вот с такими параметрами. Стекло приобретет объем. 
Снова в эффектах нажимаем плюсик и добавим эффект падающей тени. Здесь уже цвет тени и ее размытие подбирайте на ваше усмотрение. Все зависит от вашего фона и задумки. У меня в этот раз без особой идеи получилось вот так: 
Главное, чтобы вам было понятно, как это работает. Если понравился урок, дайте знать в комментариях. В ближайшее время хочу рассказать, как создавать изометрию в Фигме самостоятельно без плагинов.
Нашли ошибку? Выделите фрагмент текста и нажмите CTRL+ENTER
UX/UI Веб-дизайнер. Занимаюсь дизайном и разработкой сайтов для бизнеса более 6 лет. Связаться со мной можно через страницу Контакты Яна Ходкина
Глассморфизм — новый тренд в дизайне
Относительно свежий тренд в дизайне интерфейсов—глассморфизм, о котором мы писали в статье о визуальных трендах 2021 года. Сегодня разберем его подробно.
Автор HeiMaUX dribbble.com
Особенности глассморфизма:
- Эффект прозрачного матового стекла
- Вариации размытия и непрозрачности, создающие многослойный эффект
- Тонкая светлая граница по краям в 1-2 px, имитирующая края стекла
- Яркий фон или яркие элементы фона, подчеркивающие эффект размытия
Слайдер для проекта borus
Как и с любым другим трендом, важно не злоупотреблять глассморфизмом, используйте его аккуратно, чтобы он хорошо вписывался визуально. Избегайте переизбытка и следите, чтобы глассморфизм не вызывал затруднение и недопонимание у пользователя. При умеренном использовании этот эффект становится ярким акцентом, притягивающим внимание.
Аккуратный и ненавязчивый глассморфизм на сайте alfabank.ru
Не применяйте эффект к кнопкам и переключателям, их предпочтительно делать контрастными.
Используйте глассморфизм, например, как фон карточек или уведомлений. При этом важно убедиться, что контент в карточке хорошо читается на таком фоне.
Карточка с глассморфизмом на сайте virtualis.tours. Фон подобран правильно, не возникает проблем с прочтением
Плашки, имитирующие стекло
Чтобы добиться реалистичности, обратите внимание, как это работает в реальном мире
- Чем ближе плашка в стиле глассморфизма к фону, тем меньше размытие фона.
- Удаленность стекла от фона влияет не только на силу размытия, но и на прозрачность. Чем ближе плашка к фону, тем больше цвета она пропускает и плашка достаточно прозрачна. Если же плашка далеко от фона, прозрачность уменьшается.
- Для максимальной реалистичности можно добавить эффект шума
Все, как с обычным матовым стеклом.
Пример того, как выглядит глассморфизм на разном расстоянии от фона
Фон
Выбор фона играет важную роль в создании глассморфизма. Фон не может быть слишком простым, не контрастным или со множеством мелких деталей.
Для этой задачи выбирайте яркий контрастный фон без мелких деталей, на котором стеклянные плашки будут хорошо выделяться.
Автор Peramita Puja behance.net
Как сделать дизайнеру
С точки зрения дизайна сделать эффект глассморфизма достаточно просто.
Вот два видео урока для Фигмы и Фотошопа
Глассморфизм в Фигме
Глассморфизм в Фотошопе
Как сделать разработчику
Раньше единственным способом реализации глассморфизма было размещение размытой копии фона между нужным блоком и оригинальным фоном. Такой способ нес за собой много проблем с позиционированием размытого фона при адаптивной верстке или при динамичном положении элемента.
Размытая копия фона между нужным блоком и оригинальным фоном
С появлением свойства backdrop-filter реализация стала намного проще.
Backdrop-filter (blur) позволяет размывать только изображение, находящиеся ниже нужного блока. Если фон блока будет непрозрачен, эффект не будет заметен, поэтому чаще всего backdrop-filter используется в совокупности с полупрозрачным фоном и тенями.
Реализация с помощью свойства backdrop-filter
Код с разной степенью реализации данного эффекта. Как можно заметить, теперь он делается буквально в пару строк кода
Но нельзя полностью отказаться от старой реализации, новое свойство поддерживается еще не всеми браузерами. Пользователи FireFox, IE и некоторых мобильных браузеров не смогут увидеть эффекта размытости.
Красным отмечены браузеры, не поддерживающие эффект
Выводы
- Глассморфизм можно узнать по эффекту прозрачного матового стекла с тонкой границей по краям. Он максимально похож на настоящее матовое стекло
- Используйте этот эффект аккуратно, он должен хорошо вписываться
- Чтобы эффект выглядел реалистично, создавайте эффект глассморфизма с учетом того, как это работает в реальной жизни
- Выбирайте яркий контрастный фон, избегайте простого не контрастного фона или фона с мелкими деталями
- Дизайнеру создать эффект глассморфизма достаточно просто с помощью любого привычного инструмента
- Разработчик с появлением нового свойства backdrop-filter может реализовать глассморфизм в пару кликов. Но не все браузеры поддерживают этот эффект.