Скевоморфизм — это направление дизайна, которое отличается максимальной реалистичностью. Нарисованные объекты выглядят как настоящие предметы благодаря выбору оттенка и фактуры, игре света и тени. Прочитав статью, вы узнаете, что такое скевоморфизм, какие черты характерны для графики, и как появился и развивался этот стиль.
Истоки происхождения
Стиль появился вместе с первыми персональными компьютерами, разработанными для ученых и инженеров. Создатели программ позаботились о том, чтобы визуальные детали были подсказками при работе.
Максимальная реалистичность снижает порог входа для начала работы.
Главные отличительные характеристики стиля:
- достоверная имитация реальных предметов;
- использование визуальных метафор в качестве подсказок;
- реалистичное создание объема и глубины деталей;
- управление светом, бликами и затемнением;
- качественная прорисовка фактуры поверхностей;
- анимация нажатия клавиш или перелистывания страниц.
В первых версиях операционной системы от Apple рабочий стол выглядел как журнал или книга. Специалисты, которые учились работать на компьютере, могли догадаться, куда нужно нажимать для выполнения определенных действий.
В ранних версиях Windows значки на рабочем столе выглядели как реальные объекты. Интерфейс управления в программах содержал изображения знакомых вещей: чистый лист, дискета, принтер
Развитие в современные дни
Популярность скевоморфизма начала снижаться в середине 2010-х годов, что связано с активным развитием смартфонов. Веб-разработчики начали переходить на минималистичные интерфейсы с плоской графикой.
Лаконичные изображения лучше выглядят на маленьких экранах планшетов и смартфоном. Минимализм стал ассоциироваться с удобством и современностью, плоский дизайн вытеснил другие стили.
Следы реалистичной графики остаются во многих программах. Владельцы компьютеров привыкли к тому, что значок дискеты означает сохранение, в папках хранятся файлы, в корзине можно найти удаленные документы. Но изображения предметов стали лаконичными, исчезли мелкие детали и эффект объема. Реалистичность больше никого не удивляет, а минимализм позволяет создавать яркие эмоции и требует меньше времени на прорисовку деталей.
Преемником скевоморфизма считаются неоморфизм и глассморфизм. Это лаконичные стили, где элементы реалистичности используются в сочетании с плоскими деталями. Дизайнерские приемы используются для выделения ключевых разделов или функций приложения. Неоморфизм предполагает наличие объема у отдельных деталей. Нужный эффект достигается за счет бликов и затенения. Для реализации концепта требуется много пустого пространства между элементами. Глассморфизм включает детали, которые выглядят как полупрозрачное стекло.
Некоторые эксперты в сфере дизайна и веб-аналитики считают, что в течение 10−15 лет появится переосмысленный реализм. Он сохранит характерные черты стиля, но станет более лаконичным, футуристичным и подходящим для маленьких экранов. Это предположение основано на том, что в любой сфере модные тенденции являются цикличными.
Процесс создания интерфейса на практике
Создание интерфейсов в тематике скевоморфизм происходит по тем же правилам, что и в любом другом направлении. Работа начинается с исследования аудитории и составления плана. Затем дизайнеры выбирают цвета и шрифты, составляют макеты и прототипы. Созданный интерфейс проходит тестирование на удобство использования.
Исследование целевой аудитории
Разработка начинается со сбора данных о посетителях сайта или пользователях приложения. Для создания дизайна стоит уточнить пол и возраст аудитории, ожидания от сервиса и предпочтения. На основе психологических особенностей можно получить представление об идеальном решении для пользователей. Считается, что скевоморфизм предназначен для людей старшего поколения, которым нужны визуальные подсказки в программах.
Этап исследования дает представление, для кого разрабатывается продукт, и с какими условиями следует ее делать. В процессе сбора информации важно узнать, какими устройствами пользуется целевая аудитория, и как выглядят проекты конкурентов. Разработчики должны учитывать размер экранов и сделать макет адаптивным, предусмотреть визуальные отличия от аналогов.
Определение целей
После беседы с заказчиком создается описание работы программы и составляется список задач. Специалист должен понимать, какие задачи будут выполнять посетители, и сколько окон следует создать. Он составляет перечень рабочих сценариев с порядком действий и определяет структуру страниц. После постановки целей становится известным количество экранов, назначение страниц и общая структура разделов.
Выбор цветовой палитры и шрифтов
На следующем этапе определяется будущая стилистика проекта. Для элементов скевоморфизма характерны приглушенные цвета с имитацией поверхности пластика, металла, кожи или бумаги. При выборе шрифтов можно отдать предпочтение стилям с имитацией тиснения, объемных букв или надписей от руки. Можно использовать и классические шрифты.
Определить будущую стилистику помогают доски для вдохновения (moodboards). Это коллекции с иллюстрациями, фотографиям, скриншотами сайтов, цветовыми палитрами и наборами шрифтов. Изображения на moodboard стилистически связаны между собой. Разработчик создает несколько подборок, и заказчик выбирает желаемое оформление страниц. На основе подборки референсов создается дизайнерская концепция.
Создание макетов и прототипов
Черновые прототипы — это схематические изображения дисплеев. Можно настраивать переходы между экранами через сервисы прототипирования. В черновом варианте страниц отмечены зоны и краткие описания содержимого. Базовая версия не содержит проработанных деталей. Черновой вариант дает представление о структуре и назначении страницы.
Составить наглядное представление о стиле помогает финальный макет. Он отражает структуру страниц с кнопками, полями для ввода, ссылками и прочими деталями. На макете присутствуют выбранные шрифты, фоновые цвета, изображения и другие составляющие дизайна.
Тестирование и отладка
На финальном этапе выполняется проверка макета на тестовой группе. Разработчику становится понятно, правильно ли подобраны цвета и шрифты, являются ли тексты читаемыми. При проверке следует обратить внимание на толщину линий и высоту текста, от этих деталей во многом зависит внешний вид страницы. Необходимо проверить, не конфликтует ли размер и расположение форм с другими элементами верстки. После внесения правок в макет необходимо повторно выполнить тестирование.
Преимущества использования стиля
Главным достоинством является интуитивность. Название стиля даже используют как метафору для объяснения новых понятий через знакомые объекты. Когда детали интерфейсов напоминают физические предметы, пользователи сразу понимают их назначение.
Примеры удачного использования приема:
- иконка места хранения файлов выглядит как папка для бумаг;
- для сохранения изменений следует нажать на значок дискеты;
- корзина на рабочем столе символизирует место хранения удаленных документов;
- чтобы принять звонок, следует нажать на значок трубки стационарного телефона;
- перехода в корзину интернет-магазина может украшать значок с тележкой из супермаркета;
- фон приложения для чтения на смартфоне может выглядеть как книжная полка.
Когда компьютеры входили в повседневную жизнь, красивая и реалистичная графика нравились людям. Объемные рисунки с проработанными текстурами и множеством мелких деталей хорошо смотрелись на мониторах.
Владельцы компьютеров могли видеть на экране аналоги привычных вещей и учились пользоваться программами.
Скевоморфизм в веб-дизайне предполагает максимально точное изображение реальных объектов в интерфейсе приложения. Направление появилось, чтобы помочь пользователям быстро освоить компьютерные программы по основе ассоциаций. В наши дни стиль используют редко, некоторые дизайнеры называют его устаревшим. Реалистичные изображения выглядят перегруженными на маленьких экранах телефонов и планшетов. Разработчики используют отдельные свойства стиля в сочетании с минимализмом. Так появились направления неоморфизм и глассморфизм.
