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

После того, как Apple представила широкой публике свою новую iOS7, во всю идет обсуждение преимуществ и различий скевоморфизма и флэт дизайна. Не смотря на это, многие люди упустили из виду эту специфическую дискуссию. Если вы один из этих людей, прочитайте небольшой обзор об iOS7 в блоге Веровского. Ну а мы, тем временем, изучим некоторые особенности флэт дизайна, а так же выясним чем он отличается от скевоморфизма. Автором этой статьи является 20-летний студент . Он изучает интерактивный дизайн и является победителем премии OKFN. В свободное время пишет статьи. Перевод подготовила редакция Хронофаг.ру

Дизайн, как правило, развивается в определенном тренде. При появлении нового направления дизайна нет никакой гарантии что оно наберет популярность. Тем не менее, чем больше дизайнеров из индустрии подхватывают направление, тем более вездесущим и полезным это направление становится. Флэт дизайн (дословно плоский дизайн) вовсе не является чем то новым, и те кто так считают, заблуждаются. Флэт дизайн присутствовал в индустрии уже долгое время, но лишь сейчас был окончательно и массово подхвачен крупными компаниями.

 

Google адаптировала графику под флэт дизайн

Mobile-Design_Flat_flat-google

Mobile-Design_Flat_googleflat2

Мы все знаем, что у Google очень строгий и выверенный фирменный стиль и отличные руководства по дизайну. Их цель заключается в том, чтобы позиционировать свое визуальное оформление как современное и простое. Можно утверждать, что их дизайн созрел и сфокусировался на форме и цвете. Фирменный стиль, который они выложили на Behance очень интересен и полезен для изучения.

Microsoft адаптировала графику под флэт дизайн

На скрине пре-флетовый дизайн Windows Mobile 6.5

Mobile-Design_Flat_windowsmobile6-2

К 2010 году в Microsoft поняли, что их подход к дизайну идет не в ногу с пользователями и не соответствует их ожиданиям и потребностям. Вместо того, чтобы сфокусироваться на продукте они решили пересмотреть свои подходы к эстетике оформления и сфокусироваться на пользовательском интерфеисе. На скрине ниже Windows Phone 8.

Mobile-Design_Flat_windowsphone8-2

Это привело Microsoft к созданию новой философии дизайна, в следствии чего они изменили визуальную и поведенческую механику своих продуктов. Как они любят говорить «делать больше с меньшими затратами». Результат такого капитального ремонта породил Windows 8 и новую дизайнерскую стратегию.

Флэт или скевоморфизм?

В скевоморфизме, особенно для дизайна, мы воссоздаем то, что уже знаем. В индустрии термин часто трактуется неверно. Дизайнеры подчас уверены, что в скевоморфизме мы отрисовываем оригинал. Тем не менее скевоморфизм не обязательно должен быть близок к оригинальному объекту. Проще говоря, реалистичный дизайн всегда скевоморфичен, а скевоморфизм далеко не всегда реалистичен. И чтобы еще больше все запутать, флэт дизайн может быть скевоморфичным (но не обязан им быть).

Давайте посмотрим на картинки и все станет проще.

Автор  Alex Volkov
Автор Alex Volkov

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

Автор Justin Pervorse
Автор Justin Pervorse

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

Автор Andrew Hesham
Автор Andrew Hesham

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

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

В iOS7, компания Apple продемонстрировала комбинацию двух направлений. Это хорошо видно в примере с камерой и совершенно не скевоморфичной иконкой для приложения фотографий.

Mobile-Design_Flat_flat-ios7-2

Скевоморфичный дизайн

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

Mobile-Design_Flat_flat-apple

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

Mobile-Design_Flat_flat-notes-2

Флэт дизайн

Флэт дизайн старается подчеркнуть простоту. Подчас упор сделан на минималистическое исполнение и яркие цвета. Если вы слышали, как другие дизайнеры обсуждали флэт, то в таких разговорах должно было промелькнуть и выражение «пользовательский интерфеис». В целом, люди верят в то, что флет дизайн более прост в использования чем скевоморфизм. Некоторые известные дизайнеры, как например Dieter Ram, признают флэт дизайн лучшим способом для создания устойчивого дизайна. Как говорится, «чем меньше дизайна, тем лучше».

Mobile-Design_Flat_flat-hypemachine

Скриншот Hype Machine, флэт дизайн.

Непрекращающаяся битва?

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

Заключение

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