Что такое скевоморфизм в дизайне

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

Узнать больше информации о скевоморфизме можно на курсах «UX/UI дизайнер» от Band Band Education и «Веб-дизайнер с нуля» от Логомашина.

Содержание

• Что такое скевоморфизм?
  • Почему стиль скевоморфизм был популярен?
  • Почему скевоморфизм стал исчезать к концу 2000-х годов?
• Плюсы и минусы скевоморфизма
• С помощью чего создаётся дизайн в стиле скевоморфизм?

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

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

Примеры скевоморфизма:

• Иконка «корзины» для удаления файлов, которая похожа на мусорную корзину.
• Кнопки в интерфейсе Apple, которые выглядят как физические кнопки, с тенями и текстурами.
• Интерфейс электронной книги, который имитирует внешний вид и перелистывание настоящей книги.

Почему стиль скевоморфизм был популярен?

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

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

Почему скевоморфизм стал исчезать к концу 2000-х годов?

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

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

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

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

Скевоморфизм уже давно устарел, но в дизайне появились новые тренды и инструменты — о них рассказывают на онлайн-курсах с сайта tutortop:

• «Профессия дизайнер интерфейсов» от Contented
• «Графический дизайнер со стажировкой» от Eduson Academy
• «Дизайнер: старт в профессии» от Bang Bang Education

Плюсы и минусы скевоморфизма

Скевоморфизм — это как винтажная мебель в современном доме. В некоторых случаях она создаёт пространство уютным и интересным, но если всё вокруг винтажное, дом может показаться музеем, а не местом для жизни. Так и в дизайне: немного скевоморфизма может сделать технологии ближе и понятнее, но если переборщить, то всё становится неудобным и старомодным. 

Выбрать своё направление в дизайне можно пройдя онлайн-курсы. Например:

• «UX/UI дизайнер» от Нетологии
• «UX/UI-Дизайнер» от Pentaschool
• «UX-дизайнер» от Нетологии

С помощью чего создаётся дизайн в стиле скевоморфизм?

Когда дизайнеры создают дизайн в стиле скевоморфизма, они как бы играют с имитацией реальности и используют разные приёмы — рассказываем о каждом подробнее.

Реалистичность

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

Глубина

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

Тени

Чтобы вещи на экране казались как живые, иллюстраторы используют тени. Они рисуют так, чтобы создать иллюзию, что объекты на экране имеют объём, как будто они могут вот-вот выпрыгнуть из экрана. Это как когда на солнце у вас за спиной растягивается тень, и вы кажетесь больше. Дизайнеры могут тянуть тени, искривлять их. Так формы кажутся более реалистичными. Это помогает пользователям лучше ориентироваться: мы видим, что кнопка выделяется, и понимаем, что на неё можно нажать.

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

Блики

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

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

Использование текстур

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

Игра со светом

Свет в скевоморфизме — это как солнце в реальном мире. Он создаёт тени и подсказывает нам, что скевоморфные объекты объёмные. Если свет падает сверху, тень будет снизу, и наоборот. Это помогает создать ощущение, что кнопки можно нажать, как из концепции реального мира. А ещё с помощью света можно показать, когда кнопка активна и когда нет.

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

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