Плоский дизайн: Флэт (flat) дизайн: лучшие практики плоского дизайна

Плоский дизайн: история, проблемы и эволюция

Плоский дизайн (от англ. flat design) вот уже несколько лет остается главной тенденцией веб-дизайна: его отличает отсутствие глянцевых или визуальных 3D-эффектов в графических элементах страницы, поэтому многие дизайнеры считают этот стиль проявлением минимализма.

Дабы представить, что такое плоский дизайн — нужно понять, чем он не является. «Плоскость» часто противопоставляют 3D-эстетике, скевоморфизму и реалистичности в дизайне. Настоящий плоский интерфейс предполагает полный отказ от использования любых элементов данных стилей.

3D-эффекты

3D-эффект создает иллюзию глубины интерфейса, что помогает пользователям интерпретировать визуальную иерархию и понять, какие элементы являются интерактивными:

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

С первых дней существования графических пользовательских интерфейсов дизайнеры используют псевдо-3D элементы (тени, градиенты, световые эффекты), чтобы помочь пользователям определить доступные действия интуитивно. Однако в ранних версиях интерфейсов они выглядели, как правило, агрессивно и визуально отталкивали.

В диалоговом окне Windows-95 3D-эффект создавался за счет использования тяжелых теней и света. Обратите внимание, как выглядят активные и неактивные кнопки. Также понятно, какая из трех вкладок выбрана. Тем не менее, тяжелые тени легко могут сделать интерфейс визуально непривлекательным

Скевоморфизм

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

Например, в ранних моделях планшета Kindle Fire от Amazon операционная система на базе Android использовала скевоморфный дизайн для виртуального книжного шкафа с 3D-полками и древесными текстурами.

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

Скевоморфный дизайн приложения в Kindle Fire

Реализм

Реалистичный дизайн имитирует физические предметы или текстуры из эстетических соображений.

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

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

История возникновения плоского дизайна

Релизы интерфейса Metro компанией Microsoft и Windows 8 в 2011 году во многом способствовали популяризации плоского дизайна. В документации Microsoft новый стиль назван «подлинно цифровым». Это словосочетание очень точно передает суть плоского дизайна.

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

Выбор плоского дизайна для домашней страницы Apple демонстрирует рост популярности тренда. Скевоморфизм и реализм долгое время были отличительными знаками дизайна Apple — вплоть до 2013 года дизайнеры компании сопротивлялись «плоскому» тренду:

Домашняя страница Apple в 2007 году: панель навигации глянцевая, имеются 3D вкладки

2012 год: метафора вкладок осталась в прошлом, но панель навигации по-прежнему глянцевая и скругленная (это скорее пример реализма, чем скевоморфизма).

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

Домашняя страница Apple в 2012 году

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

Домашняя страница Apple в 2015 году

Проблемы юзабилити

С появлением плоского дизайна в 2011 году компания Nielsen Norman Group критически высказалась о проблемах, присущих его юзабилити.

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

За многие годы люди привыкли к традиционным кликабельным ссылкам голубого цвета с подчеркиванием, 3D-эффектам на кнопках и т. д.

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

В ходе исследования в рамках курсов «Дизайн для миллениалов» (Designing for Millennials) 22-летнюю жительницу Канады спросили, как она понимает, куда можно кликать на сайте, и она ответила:

«Если текст выделен голубым цветом или подчеркнут, значит, на него можно кликать. Иногда это понятно из контекста. Но подчеркивание реально помогает. Удобно, когда есть кнопка — но на ней необязательно должно быть написано “Нажмите сюда”, или другой текст: “Купить” ,“Купить сейчас”, “Добавить в корзину”».

Эта цитата очень точно иллюстрирует типы сигналов, по которым люди понимают, что им нужно делать:

1. Традиционные знаки (например, текст, подчеркнутый голубым цветом, кнопки).
2. Нечто, напоминающее традиционные знаки (например, подчеркивание текста любым цветом, текст в рамке).
3. Контекстные подсказки (например, текст, на который можно кликнуть, размещенный в верхней части страницы).

Так, домашняя страница сайта Trader Joe`s демонстрирует разнообразие кликабельных элементов:

• подчеркнутый текст традиционного голубого цвета для ссылки «Смотреть все»;
• плоский, красный фон для кнопки «Искать», понятной даже без реалистичных или 3D-эффектов;
• черные разделы-ссылки в панели навигации (узнать, что они кликабельны, можно только по их расположению).

Обратите внимание, что в целом «плоская» страница имеет один скевоморфный элемент — деревянную полку под ассортиментом продуктов:

Домашняя страница компании Trader Joe`s

Эволюция плоского дизайна: версия 2.0

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

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

Плоский дизайн элементов с длинными тенями стал популярен в 2013 году. Длинные тени — пример того, что в версии 2.0 3D-эффекты служат исключительно эстетике и не несут никакой значимой информации для пользователей. К счастью, они уже не столь популярны, хотя значки с длинными тенями все еще используются в некоторых плоских интерфейсах

Material design от Google — один из примеров плоского дизайна 2.0 с правильно расставленными акцентами: в нем используются последовательные метафоры и заимствованные из физики принципы, помогающие людям разобраться в интерфейсе и интерпретировать визуальную иерархию контента:

Приложение Evernote для Android — хороший пример преимуществ плоского дизайна 2. 0. Несмотря на наличие в основном плоского интерфейса, в приложении есть тени на панели навигации и плавающая кнопка “Добавить”.

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

Вместо заключения

Для раннего псевдо-3D дизайна и скевоморфизма Стива Джобса были характерны тяжелые и неуклюжие интерфейсы. Отказ от излишеств данных стилей полезен, но есть риск впасть в другую крайность — убрать все визуальные различия плоских элементов дизайна.

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

Высоких вам конверсий!

По материалам: nngroup.com 

05-11-2015

Плоский дизайн.

Особенности стиля и его использование в web-дизайне Стиль flat стал полной противоположностью скевоморфизму, который был популярен до этого времени и приветствовал отображение элементов такими, какими они были в реальности: с объемом, тенью, текстурностью. Пользователь, который привык к особенному оформлению интерактивных элементов, не сразу ориентируется в навигации сайтов с flat дизайном. С другой стороны, flat стиль в дизайне перемещает акцент на контент страницы, не давая посетителю отвлекаться на посторонние элементы. Законодателями моды на плоский дизайн стали Apple и Microsoft, которые оформили в стиле flat интерфейсы своих операционных систем. Сегодня стиль сайта flat успешно применяют Amazon, YouTube, IBM и другие крупные корпорации.

Преимущества использования плоского дизайна

1. На первый план выходит типографика. Внимание пользователя концентрируется на контенте страницы.
2. Минимальное использование визуальных эффектов, что увеличивает скорость загрузки страниц в десктопной и мобильной версии.
3. Минимализм, отсутствие отвлекающих элементов. Сайты в стиле flat имеют лаконичную структуру.

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

Сайты в стиле flat

Плоский стиль подходит для любых сайтов – от творческих портфолио до лендингов и блогов. Правильно реализованный flat стиль сайта создает интуитивное понимание навигации для посетителей. Вот некоторые flat design сайты:

• Kentuckyderby (www.kentuckyderby.com/). Сайт, посвященный конным соревнованием в Луисвилле (Кентукки): продажа билетов, информация о скачках, новости, магазин тематических товаров. Функциональные кнопки меню и социальных сетей выделены визуальными эффектами: при наведении мыши меняется цвет. Ссылки при наведении курсора подчеркиваются. Текстовый и графический контент красиво распределен по странице.
• Teavana (www.teavana.com). Интернет-магазин чая и сопутствующих товаров. Дизайн минималистичный, черно-белая цветовая гамма, характерная для интернет-магазинов навигация. Красивая типографика. Функциональные кнопки меняют цвет при наведении курсора.

Плоский дизайн или скевоморфизм? — foykes.com

Если вы обращаете внимание на то, что происходит в мире дизайна, вы наверняка заметили постоянный спор между скевоморфизмом и плоским дизайном.

Поэтому, вот экспресс-тест. Который из двух калькуляторов относится к скевоморфному дизайну?

Которое из этих двух приложений является скевоморфным?

Если вы ответили «скевочто?», то вы очевидно не прочли ни одного из примерно 5000 постов в блогах, раскрывающих тему, ставшую популярной в последние месяцы, поэтому эта статья – ваш шанс наверстать упущенное.

Но если вы ответили, что это «конечно же, приложение справа!», то мне жаль вас огорчать, но вы снова ошиблись. Как вы понимаете, это был вопрос с подвохом.
Правильный ответ – это то, что оба данных приложения являются скевоморфами. Читайте далее, и вы поймете, почему.

Определение скевоморфизма

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

Или, как говорится в Википедии:

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

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

Эстетика дизайна “Metro” от Microsoft в Windows RT

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

Скевоморфизм или реализм?

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

Оба приложения имитируют внешний вид настоящего калькулятора, поэтому они оба являются скевоморфами.

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

Конечно, эти две концепции обычно идут рука об руку: скевоморфный дизайн старается выглядеть реалистично (чтобы сделать очевидной связь с оригинальным объектом), а реалистичный дизайн старается быть скеворморфным (иначе реализм будет выглядеть «не к месту»).

Поэтому, так как реализм представляет собой чистой визуальный стиль, скеворморфизм влияет на дизайн на более глубоком уровне. Но в самих этих техниках проблем как таковых нет. Как недавно отметил Лорен Бричтер (известный по Tweetie и Letterpress) в своем интервью:

Скевоморфизм – это совсем [не]плохо. Он нам нужен для взаимодействия с устройствами человеческим образом. Кричащие текстуры – это проблема только визуального дизайна… я надеюсь, получится их ослабить.

Так если проблема только в «кричащих текстурах», почему мы с ними покончили в первую очередь? И почему же нам так внезапно они надоели?

Find My Friends: яркий пример кричащих текстур.

Все началось с iPhone

Мне кажется, что тенденция реализма и недавняя отрицательная реакция на него начались с одного продукта: iPhone.

До появления iPhone, реализм в пользовательском интерфейсе был чем-то необычным, за исключением видео игр. С целью сохранить эффект погружения, разработчики игр давно начали делать пользовательские интерфейсы под дерево, металл и камень. Например, в Diablo 2 используются каменные кнопки и стеклянные счетчики энергии, окруженные готическими статуями.

Пользовательский интерфейс Diablo 2, как и многих других видеоигр, отличается реалистичными (но не скевоморфными) текстурами. А также ходящими коровами.

Но в более «серьезном» контексте, реализм все равно был ограничен. Единственным примечательным исключением были стеклянные кнопки «в стиле Web 2.0», унаследованные из более ранних версий Mac OS X.

Вы можете сказать, что эти довольно броские кнопки стали первым признаком страсти Стива Джобса к реализму (в качестве доказательства любви Джобса к реалистичным материалам, Fast Company сообщила, что кожаная обшивка в iCal была основана на креслах в личном самолете Джобса).

Реализм ранних версий OS X заключался в большом количестве стекла.

С iOS, компания Apple решила еще больше уйти в реализм. Но мне кажется, у них на это было несколько разумных причин.

Анимация при переворачивании страниц в iBooks – скучная сегодня и революционная в момент появления.

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

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

Аргумент в пользу реализма

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

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

Настройки и Погода: та же платформа, тот же разработчик, но абсолютно разные стили.

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

К тому же, iPhone был разработан для того, чтобы вы пользовались им при помощи пальца, а не при помощи более точного стилуса. Дизайнеры компании Apple быстро поняли, что это означает, что размер областей касания должен быть не меньше определенного размера (в Руководстве Apple по созданию пользовательских интерфейсов рекомендуется как минимум 44 на 44 пиксела).

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

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

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

Что касается iPhone, дизайнерам внезапно предложили платформу с единым механизмом визуализации, фиксированными разрешениями и намного более высокими границами веса ресурса (не говоря уже об отличном дисплее с яркими цветами). Стоит ли удивляться, что некоторые из нас немного перестаралась?

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

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

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

Проблема скевоморфизма

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

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

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

Приложение Apple «Контакты» для iPad выглядит как блокнот, однако не позволяет листать страницы для поиска контактов.

Ярким тому примером является приложение Apple «Контакты» для iPad, которое, как и iBooks, использует зрительный образ книги. Но, в отличие от iBooks, Контакты не позволяют переворачивать страницы влево и вправо, что полностью нарушает образ книги.

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

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

Например, в календарях традиционно на одном листе помещается один месяц, так как они ограничены физическими размерами листа.

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

Calculator, Calcbot, и Soulver: три различных варианта калькулятора. Обратите внимание, что ради реализма Apple использует традиционную кнопку «С» для очистки экрана, вместо более понятного символа «backspace», как в приложении Calcbot.

Еще один хороший пример – это собственное приложение-калькулятор Apple для iOS: подражая настоящему физическому калькулятору, Apple искусственно воспроизводит ограничения физического калькулятора: однострочный экран, ограниченное количество кнопок и пр.

Для сравнения, в Calcbot придумали намного лучше, нарушив эти ограничения и включив функцию истории, которой определенно не хватало физическим калькуляторам.

А приложение Soulver для Mac пошло еще дальше, полностью нарушив образ калькулятора и вместо этого используя его платформу.

Эти элементы пользовательского интерфейса выглядят шикарно, однако они все равно содержат неявные признаки физических ограничений (Braun UI Адриена Олкзака).

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

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

Рассвет плоского дизайна

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

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

Пропали тени, подсветка, градиенты и текстуры iOS-приложений. Вместо этого Metro предлагает плоские цветные квадраты с крупным шрифтом.

Metro против Metro

В 2012 году компания Microsoft нарвалась на конфликт с немецкой сетью супермаркетов Metro за нарушение торговой марки, что привело к тому, что ей пришлось отказаться от названия «Metro UI».

Но, так как они не придумали ничего лучше, чем назвать это «Язык дизайна Microsoft», я буду и дальше использовать название «Metro». Я надеюсь, что вы поймете, что я говорю о пользовательском интерфейсе, а не о сети супермаркетов.

Плоский дизайн использовался на протяжении довольно долгого времени (вы даже можете проследить, что его корни уходят в швейцарский дизайн ), но компания Microsoft определенно сделала довольно мощный толчок, используя его настолько заметно.

Несмотря на то, обращает ли основная аудитория внимание на крупные блоки с плоским цветом или нет, новая философия дизайна Microsoft определенно взяла за душу техносферу, восхваляя особое внимание Metro-стиля к шрифтам и цветам.

И, так как плоский дизайн часто является чисто визуальным, он резонирует с любовью дизайнеров к минималистическим концепциям, описанным знаменитым Антуаном де Сент-Экзюпери как: «Совершенство достигается не тогда, когда уже нечего прибавить, но когда уже ничего нельзя отнять».

Letterpress – прекрасный пример применения плоского дизайна в играх.

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

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

Две из наиболее обсуждаемых в последний месяц игр, Letterpress и Hundreds, отличаются плоским дизайном. Фактически, Лорен Бричтер, создатель Letterpress, признался, что во всей игре используется только одно изображение!

Влияние шрифта

Приложения вроде The Magazine ставят текст на передний план в центре.

Но Metro – это только половина истории. Пока компания Microsoft работала над Metro, со стороны Apple тоже имела место крупная инновация: были представлены дисплеи с высоким разрешением (или retina-дисплеи), сначала на iPhone, а потом на iPad и ноутбуках.

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

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

Но экраны с высоким разрешением позволили использовать даже шрифты, которые не были оптимизированы для использования на экране, как написал вТвиттере Эрик Спикерман:

Если вы хотите хороший шрифт на Retina-дисплее, прекратите обсуждать хинтовку. Просто ищите шрифты, которые когда-то смотрелись хорошо. Как в прежние времена.

Или, как написал Джон Грубер в своей статье по этой теме:

Тенденция, которая отошла от скевоморфических спецэффектов в дизайне пользовательского интерфейса, – это начало эры дизайна для retina-разрешения.

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

Отзывчивое веб-пространство

Влияние мобильного веб-пространства на дизайн стало ощущаться еще в одном: отзывчивом дизайне.

Отзывчивый (или адаптивный) дизайн – это концепция, которая подразумевает, что вместо создания нескольких отдельных дизайнов для различных устройств, один и тот же дизайн должен адаптироваться под различные экраны.

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

Недавний редизайн The Next Web является одновременно плоским и отзывчивым.

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

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

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

Ограничения плоского дизайна

Но это еще не говорит о том, что в плоском дизайне нет своих проблем.

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

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

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

Уберите все эти намеки, и у вас получится плоский мир, в котором все элементы внезапно оказались на одном том же уровне, сбивая вас с столку: кнопка это или просто баннер? Произойдет ли что-нибудь, если я нажму на это?

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

Поэтому стоит напомнить, что визуальный стиль – это не более, чем средство достижения цели. Если ситуация требует реализма, развлекайтесь с текстурами и тенями. С другой стороны, если плоская эстетика лучше помогает дизайнеру достичь цели, тогда, наверное, стоит отказаться от градиентов.

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

Неожиданный соперник

Одна из основных причин, почему спор «реализм против плоского дизайна» привлек столько внимания в последние месяцы – это то, что он тесно связан с историей «Apple против Microsoft».

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

«Почти плоский» дизайн Google Maps для iPhone.

С недавними релизами новейших мобильных приложений, компания Google начала продвигать стиль, который некоторые описывают как «почти плоский», или даже «скевоминимализм». В отличие от внушительных визуальных пустошей в Gmail и Google Reader, этот новый стиль изящно и со вкусом использует такие элементы, как тени и градиент.

Этот стиль предлагает лучшее из двух миров: возможности и тонкие намеки минимализма в сочетании с чистотой и простотой плоского дизайна.

Но если посмотреть на него с другой стороны – это просто правильно выполненный дизайн: стремление к эффективности и простоте без приношения в жертву юзабилти в пользу минимализма.

Другими словами, Google не столько является первооткрывателем нового стиля, сколько просто показывает нам, как выглядит правильно выполненный цифровой дизайн (… и таким же образом, насколько плохо это делаем мы).

Что дальше

И что же я думаю обо всем этом?

Рад, что вы спросили. Конечно, я считаю, что очень важно помнить, что визуальные стили – это только инструменты, а не цели. Но это (я надеюсь) абсолютно очевидная точка зрения, которая сложилась у большинства дизайнеров задолго до меня.

Поэтому я выберу поле и поставлю на плоский дизайн (в частности, на менее экстремальный вариант от Google). Но не по тем причинам, что вы думаете.

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

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

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

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

Плоский дизайн также заставляет вас действительно обращать внимание на текст и макет – две области, в которых веб-пространство по традиции отстает от своего более развитого печатного собрата.

А с точки зрения мобильных устройств, плоский дизайн может упростить акцентирование на дизайн анимации и взаимодействия, как нам это показали приложения, вроде Letterpress и Clear.

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

Это перевод статьи под названием “Flat Pixels” от Sacha Greif.

Плоский дизайн и Материал дизайн: В чем их отличие

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

По большому счету, разница между плоским дизайном (Flat design) и материал дизайном (Material Design) едва уловима. Человеку, который не имеет глубоких познаний в графическом дизайне, они и правда могут казаться очень похожими. В этой статье я попытаюсь “пролить свет” на некоторые различия между ними. Вы получите дополнительные знания, которые так необходимы, чтобы случайно не ранить нежную натуру дизайнера.

Немного истории

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

Скевоморфизм

Если говорить о пользовательском интерфейсе и веб-дизайне, то под понятием скевоморфизма подразумевается подход, основной идеей которого является имитация. Не вдаваясь в подробности, просто вспомним интерфейсы Apple до появления iOS 7 с их «реалистичными текстурами, освещенностью и претенциозными эффектами».

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

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

[highlight]Примечание: Ни в коем случае не думайте, что скевоморфизм полностью исчез. Он широко используется в играх, где необходимо создать реалистичный мир и помочь играющим прочувствовать своего героя, чтобы глубоко погрузиться в процесс игры.[/highlight]

 

Плоский дизайн

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

Во-первых, плоский дизайн заметно снижает время загрузки страницы. Отсутствие «тяжелых» скевоморфических деталей (только представьте: слои, шрифты с засечками, градиенты) делает плоские элементы дизайна «более легкими”, что в свою очередь значительно ускоряет время загрузки. Более того, плоские элементы выглядят одинаково привлекательно на экранах как с высоким разрешением, так и с низким.

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

И, конечно, плоские иконки со сравнительно простым шрифтом могут направить внимание пользователей на действительно важный контент.

На сегодня плоский дизайн получил заслуженное признание, но без проблем все же не обошлось. Самым очевидным примером таких проблем стал выпуск Windows 8 компанией Microsoft. Эта операционная система считается пионером плоского дизайна и поддерживает концепцию Metro дизайна. К проблемам же привело то что компания сочла нужным уделить типографии внимания больше чем собственно графике.

Результаты юзабилити теста Windows 8, проведенного NN Group, показали, что пользователи с трудом отличали кликабельные объекты от некликабельных. Пользователи жаловались, что объекты, которые выглядят как статичные, на самом деле оказывались кликабельными. В результате, основная миссия компании — помочь пользователям корректно интерпретировать систему, была провалена.

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

Материал дизайн

Давайте внесем ясность прямо сейчас: материал дизайн — это скорее фирменный продукт, чем спонтанно появившееся веяние в дизайне, завоевавшее широкое признание. Именно это в основном и отличает его от его от плоского дизайна.

Называя материал дизайн “фирменным”, я имею ввиду, что он имеет целый набор четко прописанных рекомендаций и принципов, которым следует каждый уважающий себя дизайнер. Вполне очевидно, зачем Google представил свой Material Design: возникла необходимость унифицировать дизайн, чтобы приложения выглядели однотипно на любом из множества Android устройств.

Будучи довольно функциональным, плоский дизайн все же считается непростым для понимания. Правда в том, что плоские объекты на экране могут запутать пользователей (особенно не имеющих опыта использования мобильных и веб-интерфейсов). Поэтому материал дизайн пытается вернуть обратно элементы скевоморфизма, но в сильно упрощенном виде. Изображения выглядят плоско, особенно когда речь идет о цветах, но все же являются многомерными, благодаря наличию оси Z.

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

Достоинства и недостатки плоского дизайна

Оставим позади историю эволюции стилей и перейдем к чему-то более существенному — перечислим сильные и слабые стороны плоского дизайна.

Плюсы:

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

Минусы:

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

Достоинства и недостатки материал дизайна

Что же насчет оппонента плоского дизайна?

Плюсы:

• Минималистичный стиль.
• Достаточно понятен на интуитивном уровне. Материал дизайн будет одинаково легко восприниматься как опытными пользователями, так и новичками.
• Умеренный скевоморфизм. Все выглядит более реалистично благодаря использованию оси Z (уникальной концепции Google).
• Имеется набор руководств, которые постоянно обновляются. Поэтому любой дизайнер всегда может обратиться к ним, если возникают трудности в процессе работы.
• Поощряется анимация для веб-решений. Нет необходимости напоминать, насколько люди любят движение. Кроме того, анимация позволяет сделать интерфейс более понятным и интуитивным.

Минусы:

• Имеет владельца (компания Google). Поэтому любые вопросы и предложения по улучшению должны быть адресованы с владельцу.
• Из-за наличия оси Z на процесс создания дизайна может потребоваться больше времени.
• Анимированные элементы требуют больше ресурсов.
• Неуклонное следование руководствам может ограничивать оригинальность дизайна.

Подведем итог

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

По правде говоря, плоский дизайн сильно эволюционировал за последние годы: от полностью “плоского” стиля до “полу-плоского”. Сейчас он допускает использование слоев и слабых теней, чтобы позволить объектам выглядеть более глубокими, чем они казались ранее. Так что, мы с вами — счастливые современники плоского дизайна 2.0.

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

 

Если вы нашли опечатку — выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать [email protected].

Плоский (Флэт) Дизайн или Материал Дизайн

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

Кратко из истории плоского стиля

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

Что такое материальный дизайн?

Материальный дизайн был впервые представлен компанией Гугл. Вокруг материального дизайна больше философии, принципов и идей. Это в первую очередь, улучшенный и модернизированный плоский стиль, даже в дизайне 2019 года. Здесь мы встречаем тени, плавную анимацию, насыщенные цвета. Контраст цветов очень сильный. Некоторые дизайнеры называют материальный дизайн semi-flat, или flat design 2.0. Важно определить что делать первым сайт или мобильное приложение.

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

Материальный дизайн или плоский дизайн?

Среди трендов графического дизайна 2019 года, нет материального дизайна, ни плоского. Почему? В чистом виде материальный дизайн используется только Гугл. Для них первая цель была объединение всех их цифровых продуктов единой темой и гаммой — словно они это электронная торговая площадка. Они этого достигли. Однако не всем далеко по душе материальный дизайн. Операционная система Андроид (дочерняя компания гугл) построена полностью на принципах материального дизайна. Пользователи iOS не очень ее любят, в первую очередь из-за цветовой гаммы. Ведь iOS гораздо красочнее, к тому же используют градиенты как тренд. Макеты построенный на принципах материального дизайна действительно отличается.

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

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

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

Cкевоморфизм

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

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

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

Плоский дизайн

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

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

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

Плюсы:

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

 Минусы:

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

Материал дизайн

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

Для тех кто не знал, материал дизайн зародился в Google, и они сделали небольшую страницу в которой изложены правила материал дизайна. У этого стиля есть бесчисленные и уникальные особенности, но, возможно, одна из самых лучших особенностей – это использование оси Z. По сути, это добавляет немного скевоморфизма, что позволяет двум плоскостям будто “плавать” друг по другу.

Он также является стандартом для приложений на Android. Должен ли он использоваться на iOS? Этот вопрос до сих пор является актуальной темой для обсуждений, хотя одни говорят, что данный стиль лучше оставить в тех рамках в которые он заключен сейчас. Ну, у каждого, как обычно, свое мнение относительно этого вопроса.

Плюсы:

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

Минусы:

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

Заключение

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

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

Ваш выбор пишите комментариях, посмотрим кого больше!

Читайте также:

8 книг, которые должен прочесть каждый дизайнер

400+ отличных полезных сервисов для каждого

Почему дизайнер и программист должны работать вместе

что это такое и как его использовать

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

Автор felipe_charria

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

Содержание статьи

Что такое плоский дизайн?

—

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

Посмотрите на несколько скриншотов из серия «Paper Mario», в которой плоский дизайн прямо контрастирует с 3D-дизайном Via Nintendo.

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

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

Astuaris

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

История плоского дизайна

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

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

• Высокая контрастность
• Минимализм
• Использование цвета и контраста для создания глубины
• Эффективное использование пространства
• Использование символов, а не точных изображений, для передачи идей

Стиль Баухауза не сложен и не является подробным. Это утилитарный, как плоский дизайн. Виа Баухаус Дессау. Модернизм берет правила искусства и отбрасывает все, что не соответствует видению художника. Via Osnat Fine Art.

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

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

Плоский дизайн в эпоху цифровых технологий

Плоский вид Windows 8 был создан для упрощения перевода ОС на планшеты. Через Microsoft.

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

В прошлом общая эстетика Apple была скейоморфной, и это побудило Microsoft двигаться вперед в другом направлении, начиная с интерфейсов Windows Media Player и Zune с начала 2000-х годов. К тому времени, когда в 2012 году Windows 8 была представлена ​​с совершенно плоским интерфейсом, Microsoft зарекомендовала себя как лидер этой тенденции.

Это был лишь вопрос времени, когда другие бренды последуют их примеру и обновили свой старый скейоморфный дизайн, как поляризационный ребренд Instagram. В конце концов, даже Apple в 2013 году запрыгнула на поезд с плоским дизайном с iOS 7, и к середине 2010-х плоский дизайн был повсюду.

Скеуоморфный дизайн отвечает на вопросы «что это такое и как его использовать» ? »Через Shopify

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

Плоский дизайн превращается в полуплоскостной дизайн

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

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

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

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

Когда использовать плоский дизайн

— Эта инфографика объясняет продукт простыми примерами, использующими полуплоский дизайн. By LittleFox.

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

Страницы с инструкциями по работе и учебные пособия для приложений — отличные места для плоского дизайна. Автор 9zArt.

• Инфографика, цель которой состоит в том, чтобы разбить сложную тему на легко усваиваемые примеры
• Руководства и страницы с инструкциями на веб-сайтах, на которых пользователю предлагаются пошаговые инструкции
• Реклама, когда зритель не искал материал и определенно не хочет выполнять дополнительную умственную работу, чтобы понять его
• Разработка логотипа и брендинга, когда бизнес-концепция может быть незнакомой и должна незамедлительно сообщать о ней
• Значки приложений и другие рисунки, которые слишком малы, чтобы быть слишком подробными
• Мобильные игровые интерфейсы, где пользователи, как правило, являются обычными игроками, которые ищут отвлечение, а не какую-то слишком сложную симуляцию
• Для интерфейсов, где пользователь должен знать, что делать дальше. Если у вас плотный многостраничный веб-сайт с множеством функций, плоский дизайн может не подойти вам. Но если вы стремитесь стать «Uber of [insert the industry you want to disrupt here]», квартира — это путь, по которому вы можете пойти

Хотя это обычные подозреваемые, когда речь идет о плоском дизайне, стиль сам по себе имеет характер, и ничто не мешает вам воспользоваться им по чисто эстетическим причинам!

Когда не использовать плоский дизайн

— Подумайте о том, сколько из этого персонажа мы потеряем, если он будет отрисован в плоском стиле. Здесь глубина в деталях. Дизайн персонажей Яка!

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

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

Получите плоский дизайн с помощью этих шагов

—

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

Не путайте квартиру с скучной

Даже с несколькими элементами, с которыми можно работать, минималистичный дизайн может быть красивым. Typelab D.

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

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

Цвет, контекст и контраст — ваши друзья

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

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

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

Цвет, контекст и контраст направляют зрителя через дизайн. Фениксо.

Оживите свой плоский дизайн с помощью анимации

Автор Maryia Dziadziulia

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

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

Выберите плоский шрифт

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

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

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

Квартира там, где она находится в

—

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

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

Хотите дополнить свой бренд плоским дизайном?

Найдите дизайнера, чтобы создать его сегодня!

плоский дизайн. История, преимущества и практика. | by tubik

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

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

Toonie Alarm

Очевидно, плоский дизайн возник не на пустом месте. Его корни обычно уходят корнями в швейцарский стиль, прямого предка которого историки сферы дизайна считают. Швейцарский стиль, также известный как Международный типографский стиль или сокращенно Международный стиль, — это направление, которое появилось и получило дозу критики в 1920-х годах, а затем получило яркое выражение в графическом дизайне в Швейцарии 1940–50-х годов, став прочной основой графического дизайна. середины 20 века по всему миру.Лидерами этого творческого движения были Йозеф Мюллер-Брокманн, представитель Цюрихской школы искусств и ремесел, и Армин Хофманн из Базельской школы дизайна. Согласно порталу Design Is History, краткое описание ключевых особенностей этого стиля таково: «… стиль отдавал предпочтение простоте, разборчивости и объективности. Среди множества достижений, внесенных двумя школами, было использование шрифтов без засечек, сеток и асимметричных макетов. Также подчеркивалось сочетание типографики и фотографии как средства визуальной коммуникации.Основные влиятельные работы были разработаны в виде плакатов, которые рассматривались как наиболее эффективное средство коммуникации ».

Йозеп Мюллер-Брокманн, плакат автоклуба Швейцарии, 1955 г. Йозеф Мюллер-Брокманн, плакат ратуши Цюриха, 1955 г. Армин Хоффман, плакат 1959 г. к балету «Жизель»

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

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

Первый шаг к повышению популярности плоского пользовательского интерфейса в цифровых продуктах был сделан Microsoft, представив новый плоский и минималистский стиль своих продуктов: это движение началось в начале 2000-х годов и было широко распространено в продуктах 2010 года, в частности в дизайне мобильных интерфейсов Windows Phone 7.Основные черты плоского дизайна, такие как интуитивно понятные простые формы, жирная четкая типографика, яркие контрастные цвета, длинные тени, отсутствие сложных деталей и текстур, нашли свое дальнейшее развитие в 2013 году, когда Apple выпустила iOS 7, основанную на принципах плоской графики как основа для удобных интуитивно понятных интерфейсов. Можно также сказать, что некоторые ключевые принципы плоского дизайна нашли свое выражение в Материальном дизайне для Google, но с некоторыми отклонениями, такими как падающие тени и т. Д.

GIF для приложения Погода

Основные и выдающиеся особенности плоского дизайна включают:

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

Меню ресторана анимация

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

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

При всем вышесказанном плоский дизайн предоставляет широкое поле для творческого поиска и стилистических концепций.

Singify App Tutorial

Разнообразие направлений дизайна, доступных и развивающихся в наши дни, использует плоский дизайн как гибкий и художественный подход, позволяющий в большей или меньшей степени успешно занять свое место во всех из них. Давайте рассмотрим сферы применения его принципов на множестве примеров от дизайнеров Tubik Studio.

Взаимодействие с пользователем Каркасное изображение

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

Дизайн пользовательского интерфейса

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

Концепции взаимодействия пользовательского интерфейса

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

Обновить по нажатию Портрет или альбомная ориентация Взаимодействие GIF для вытягивания вниз Взаимодействие с панелью вкладок

Элементы навигации поля пользовательского интерфейса и еще

креативных

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

Набор из плоских значков Плоские значки, примененные в Veggie App Дизайн плоских значков и вкладок для Приложение для блога Плоские значки, примененные в Saily App Плоские элементы дизайна пользовательского интерфейса для PassFold

Иллюстрации интерфейса пользовательского интерфейса

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

Приложение Cafe Coupon Приложение Weather Приложение Moneywise Иллюстрация для SwiftyBeaver Приложение Timeline

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

Бесплатные красочные обои Обои для рабочего стола Free Space Star Wars Rogue One Подводный исследователь Halloween Haunted Castle Rio 2016 San Francisco Painted Ladies

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

Обложка книги «Сказки эпохи джаза» Плакат Пикачу Журнал Muscles Плакат «Отряд самоубийц» Девушка-весна также успешно оформлена поздравительная открытка применяет принципы плоского дизайна не только потому, что он придает модный вид, но и благодаря своей гибкости, поскольку многие продукты представлены на устройствах или получают цифровую поддержку в Интернете или через приложения и рекламу.Плоский дизайн в брендинге часто представлен в логотипах и талисманах.

Талисман логотипа для Saily App Буквенный знак логотипа для PassFold Дизайн логотипа для Andre Логотип для Design Toonie Alarm

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

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

Руководство для начинающих по плоскому дизайну

Лучшие практики для плоского дизайна

10 лучших советов по созданию плоского дизайна графики

Плоский дизайн и цвета

Принципы плоского дизайна

История плоского дизайна: как эффективность и минимализм превратили цифровой мир в плоский

Взгляд на плоский дизайн и почему он важен

Истинная история плоского дизайна

Дизайн — это история: швейцарский дизайн

Швейцарский графический дизайн

Взгляд на плоский дизайн и почему он важен

В Интернете наблюдается приливная волна плоских дизайнов, и недавние отчеты о тенденциях подтвердили, что их популярность только растет.

Разумеется, плоский дизайн легко отвергнуть как еще одну мимолетную эстетическую тенденцию.

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

Что такое плоский дизайн?

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

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

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

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

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

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

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

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

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

Проблемы со скевоморфизмом

Хотя о философии скевоморфизма есть что сказать, существует множество проблем, связанных с его использованием в цифровом дизайне. Например, аналоговые часы, представленные на приборной панели Apple, труднее читать, чем их цифровая альтернатива, и нажимать кнопки на калькуляторе занимает гораздо больше времени, чем просто вводить их в функцию Spotlight, которая также поставляется с продуктами Apple. . На самом деле существует довольно много проблем, возникающих при соблюдении скевоморфизма:

• Придерживаясь стандартов, которые не имеют отношения к цифровому формату, скевоморфизм ограничивает креативность и функциональность.
• Скевоморфные элементы выглядят несовместимыми в сочетании с элементами меньшего размера, и часто имитации даже не имеют логического смысла. Например, приложение Apple Find My Friends имеет фон, который выглядит как прошитая кожа. Но этот элемент не имеет никакого отношения к реальным ссылкам.
• Скевоморфные элементы могут занимать ценное пространство на экране и время загрузки с помощью лишних украшений.
• Они также имеют тенденцию выглядеть неправильно в сочетании с чем-то еще, что не обрабатывается скевоморфными эффектами, ограничивая весь дизайн, а также любой конкретный элемент.

Решение, найденное в плоском дизайне

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

Пример № 1:

Пример № 2:

Возьмите приведенные выше примеры веб-сайта LayerVault: пример № 1, старый дизайн, показывает очень подробную и сложную иллюстрацию в скевоморфном стиле, который, как упоминалось ранее , выглядит неправильно в сочетании с ровным чистым внешним видом остальной части сайта.Сравните его с плоским иллюстративным стилем нового дизайна, примером №2, и нет никаких сомнений в том, какой из них более привлекательный и функциональный. Исходная иллюстрация отвлекает, но не информативна, тогда как измененная иллюстрация направляет взгляд на важную информацию, не затмевая ее.

Плоский дизайн гармонизирует и развивает цели скевоморфизма и минимализма

Элементы, которые выводят плоский дизайн из преходящей тенденции в долговременную и всеобъемлющую стратегию, двояки:

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

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

Плоский дизайн — идеальный стиль для отличного UX

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

Плоский дизайн бесконечно адаптируется

Пример № 1:

Пример № 2:

Чтобы увидеть, насколько просто и красиво эти приложения могут быть интегрированы друг с другом, взгляните на дизайн Windows Phone, в примерах №1 и №2 выше. Компания выбрала роль ключевого игрока в уходе от внешнего вида, который был тесно связан с Apple, и ее решение окупается в великолепном интерфейсе; Яркие цветные блоки используются как для обозначения разделов, так и вся типографика и изображения выглядят элегантно и интегрированно.

Заключение

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

Изображение лингвини предоставлено Shutterstock.

Плоский дизайн против материала и скевоморфного дизайна

Иллюстрировано Наян де Соуза Хаблитцель

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

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

Skeuomorphism

Слово skeuomorph происходит от греческих слов skeuos (что означает «контейнер или инструмент») и morphḗ (что означает «форма»). В дизайне продукта мы определяем скевоморфизм как метод, используемый в дизайне пользовательского интерфейса, при котором объекты, значки и кнопки имитируют свои реальные аналоги. Например, значок корзины, похожий на корзину.

Зачем это нужно? Во-первых, это помогает нам улучшить взаимодействие человека с компьютером (HCI). Это было важно в 1980-х годах, когда персональный компьютер был новой концепцией почти для всех.Крупные компании, такие как Apple, пытались минимизировать кривую обучения, создавая элементы и значки, которые были бы знакомы пользователям. Стиву Джобсу нравился скевоморфизм, потому что он считал, что он упрощает использование технологий людьми.

Вторая волна скевоморфизма пришлась на конец первого десятилетия 2000-х годов. Рост мобильных устройств заставил дизайнеров снова использовать скевоморфизм, чтобы помочь пользователям понять, как взаимодействовать с этими новыми устройствами. Еще в 2008 году концепция сенсорного экрана была новой для многих пользователей, поэтому дизайнеры создали элементы пользовательского интерфейса, которые позволяли пользователям ссылаться на свой предыдущий опыт.Например, значок приложения камеры в Apple iOS 6 имел 3D-эффекты, такие как тени, глубину и текстуры, чтобы он напоминал реальную камеру.

Примеры скевоморфных значков в интерфейсе Apple iOS. Изображение предоставлено Apple.

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

Apple iOS 6 использовала скевоморфную книжную полку, которая выглядела как настоящая физическая книжная полка с трехмерными полками и текстурой дерева. Изображение предоставлено ipadyoupad.

Через несколько лет после смерти Стива Джобса в 2011 году Apple отказалась от скевоморфизма. Было несколько основных причин, по которым Apple и другие дизайнерские компании приняли это решение:

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

Многие дизайнеры считают, что скевоморфизм мертв, но это не так. Скевоморфизм проявляется в тонких визуальных деталях многих продуктов, которые мы используем сегодня. Например, в 2020 году Apple внесла элементы скевоморфизма в дизайн macOS под названием Big Sur.

На приведенном ниже экране обратите внимание на Центр управления ОС, в частности на элементы управления «Дисплей» и «Звук» — на панели яркости дисплея используются мелкие детали скевоморфизма, такие как сильная тень для управления яркостью.

Визуальный стиль Центра управления в macOS Big Sur использует элементы скевоморфизма. Изображение предоставлено Apple.

Другой примечательный пример — значки в Биг-Суре. Проверьте значки Apple Mail и Apple Messages на снимке экрана ниже.

Док-станция в macOS Big Sur содержит псевдо-3D-значки.Изображение предоставлено Apple.

Плоский дизайн

В 2006 году Microsoft выпустила музыкальный проигрыватель под названием Zune. Предполагалось, что этот плеер будет конкурировать с iPod Apple, и, как мы его знаем, Microsoft проиграла эту битву. Однако игрок представил миру новую концепцию: плоский веб-дизайн.

Для создания Zune дизайнеры создали новый визуальный язык под названием Microsoft Metro, который был интерпретацией Microsoft плоской эстетики. Метро было полной противоположностью скевоморфизму. В основе этого языка лежал минимализм, цель которого заключалась в том, чтобы убрать все чисто декоративные элементы и сделать дизайн чисто утилитарным.Metro был одним из первых примеров плоского дизайна в цифровых продуктах, и Microsoft использовала этот язык для многих продуктов, включая Windows 8.

Визуальный дизайн Windows 8 основан на языке Metro. Изображение предоставлено Giorgosarv18.

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

Как видно из названия, эта тенденция использует такие характеристики, как:

• 2D-элементы
• Простая типографика
• Минимализм
• Жирные цвета

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

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

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

Пытаясь решить эту проблему, сообщество дизайнеров разработало Flat 2.0, визуальный стиль, который воплощает в себе все гладкие, минималистичные характеристики плоского дизайна с некоторыми заметными исключениями, которые немного приближают его к 3D. Например, он вводит только тонкие тени и градиенты, чтобы предложить улучшенный UX. С тех пор Flat 2.0 стал де-факто стандартом для приложений и веб-дизайна сегодня.

Дизайн-система Adobe Spectrum использует элементы эстетики Flat 2.0. Изображение предоставлено Adobe.

Material Design

Позже, в 2014 году, Google выпустила собственный язык под названием Material Design. Эта система дизайна представляет собой более сбалансированную интерпретацию Flat 2.0 и пытается объединить реальный и цифровой миры. Слово «материал» относится к цифровым объектам, которые напоминают свойства объектов реального мира.

Хотя непонятно, зачем Google вообще создал Material Design, одной из возможных причин была необходимость унифицировать то, как все выглядит на разных устройствах Android, в том числе с экранами разных размеров и разрешений.Материальный дизайн хорошо работает как набор рекомендаций, облегчающих эту задачу. Являясь важной частью эволюции пользовательского интерфейса Google, этот внутренний гигант включает Material Design в большинство своих продуктов. Примеры материального дизайна включают YouTube, Evernote и многие другие приложения.

Итак, что такое материальный UI с точки зрения дизайна? По сути, материальный дизайн — это использование в основном плоских элементов с тонкими трехмерными штрихами. Трехмерные штрихи помогают дизайнерам создавать многомерные ощущения, позволяя им создавать несколько слоев, играя с осью Z.

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

Анимированный переход в материальном дизайне. Видео кредит Google.

Заключение

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

Плоский дизайн против материального дизайна

Вы помните результаты нашего предыдущего сравнения плоского дизайна со скевоморфизмом и последними тенденциями веб-дизайна? Если нет, зацените! Теперь настала очередь другого сравнения — Flat design и Material design. Что лучше выбрать для своих цифровых продуктов?

История плоского дизайна

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

Что такое материальный дизайн?

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

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

Материальный дизайн или плоский дизайн?

Среди трендов графического дизайна 2021 года нет материального или плоского дизайна. Почему? Чистая форма использует только Google в своих продуктах. Все остальные решили выбрать микс . Как мы уже говорили, первая их цель — объединить все цифровые продукты в единой теме.Никто не думает о присоединении своего проекта к Google, верно?

Операционная система Android (дочерняя компания Google) полностью построена на принципах материального дизайна. iOS пользователям она не очень нравится, в первую очередь из-за цветовой схемы. Ведь iOS намного красочнее , кроме того, пока в тренде еще градиенты в веб-дизайне.

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

Flat 2.0: почему полностью плоский дизайн устарел | by Hai Ho

Источник изображения

На протяжении большей части истории человечества считалось, что Земля плоская.

В этом представлении мало что изменилось до третьего века до нашей эры, когда Пифагор и Аристотель постулировали, что Земля сферическая, и в 1500-х годах исследователи, такие как Магеллан, плавали по морям, чтобы проверить это.Сегодня идея о том, что Земля плоская, архаична, потому что все мы знаем, что она круглая (ну, большинство из нас).

В дизайне происходит обратное, и уже довольно давно. Откройте любое приложение или веб-сайт, чтобы понять, что я имею в виду. Полнотные трехмерные формы теперь считаются архаичными, а плоские двухмерные элементы — свидетельством современного дизайна. Этот стиль графических пользовательских интерфейсов (GUI) называется плоским дизайном, из которого и возник плоский 2.0.

Прежде чем говорить об этом, давайте пройдемся по переулку памяти.

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

Характеристики

• Элементы, которые кажутся «приподнятыми», означают нажатие (или щелчок).
• Элементы, которые кажутся «пустыми», означают ввод информации

Пример

Это окно из Windows 95 применяет основные моменты и тени для создания размерной кнопки, в то время как вставленные тени заставляют поле ввода выглядеть утопленным и пустым, как если бы оно было заполнено.

Источник изображения

Проблемы

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

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

Характеристики

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

Пример

Приложение контактов Apple для iPad (около 2012 г.), выглядел как адресная книга в кожаном переплете, с вкладками первых инициалов и закладкой с красной лентой, которая была даже крупной — поговорим о внимании к деталям! Эта метафора была призвана помочь пользователям перенести свои знания об объекте, который они ранее использовали (физическая адресная книга), в цифровой (приложение адресной книги).

Источник изображения

Проблемы

Было обнаружено, что скевоморфизм мало влияет на понимание пользователями интерфейсов и слишком тяжел для визуальной графики, что также снижает производительность приложения / сайта. Этот стиль потерял популярность почти сразу после того, как Apple выпустила iOS 7.

Реализм

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

Скевоморфизм

• Имитирует объекты реального мира
• Цель: облегчить понимание интерфейса

Реализм

• Имитирует объекты реального мира
• Цель: чисто для эстетической привлекательности

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

Microsoft Metro Language и Apple iOS 7, несомненно, способствовали бешеной популярности плоского дизайна. Созданный под влиянием международного типографского стиля (швейцарский стиль), лаконичный, обтекаемый стиль плоского дизайна используется сегодня практически во всех цифровых интерфейсах.

Характеристики

• Отсутствие трехмерных сигналов, таких как тени, градиенты, блеск, тиснение и скосы
• Простые элементы, формы и изображения
• Полужирный, яркие цвета
• Акцент на типографике, особенно без serif

Примеры

Влияние языка дизайна Windows Metro (вверху) очевидно в ряде приложений, таких как The Homework App (внизу).Обратите внимание на сходство пользовательского интерфейса: мозаичный дисплей, яркие цвета, плоская иконография.

Все на этом полностью плоском веб-сайте существует в двухмерной плоскости, от кнопок до логотипа и иллюстрированных персонажей. Здесь нет теней или градиентов.

Проблемы

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

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

Итак, как ответ на плоский дизайн, родился плоский 2.0.

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

Характеристики

• В основном плоские и минималистичные, но с использованием намеков на тени, блики и наслоения вдоль оси z (или третьего измерения) для добавления тонкой глубины. Однако на нем все еще нет блеска и градиентов.
• Элементы движутся и действуют в соответствии с законами физики, чтобы помочь пользователям понять их функции.
• Большие и негабаритные изображения, текст и кнопки, чтобы произвести неизгладимое впечатление на пользователя; увеличенные кнопки на мобильных экранах также увеличивают область касания и уменьшают количество ошибок пользователя.
• Ненавязчивая анимация, имеющая цель, например, предоставление обратной связи, и никогда не мешающая пользователю или дизайну

Примеры

Google Material Design — это яркий пример квартиры 2.0. В приложении Google Docs кнопка с плюсом («добавить новый») имеет тонкую тень, которая создает впечатление, что она парит над страницей. Когда вы нажимаете, чтобы развернуть меню боковой панели, фон тускнеет, чтобы четко передать, что плоскости многослойны, а плоскость меню находится на переднем плане. Меню также имеет небольшую тень, чтобы еще больше усилить идею слоев.

5 причин, почему плоский дизайн может привести к эпическим преобразованиям

Плоский дизайн — одно из самых популярных модных словечек в современном UI / UX пространстве.

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

Так в чем причина его растущей популярности? Проще говоря, работает!

Плоский дизайн может помочь улучшить взаимодействие с пользователем на веб-сайтах и ​​в приложениях. Это, в свою очередь, может увеличить количество конверсий.

Этот пост познакомит вас с плоским дизайном и преимуществами, которые он может предложить.

Ну вот.

Что такое плоский дизайн?

Это подход к дизайну, который включает создание минималистичных двумерных (плоских) иллюстраций для веб- и мобильных интерфейсов.

Источник изображения ^[1] Плоский дизайн избавляется от ненужных стилей и элементов, создающих иллюзию трех измерений (таких как градиенты, текстуры и падающие тени). Это контрастирует со скевоморфизмом, другой практикой проектирования, которая включает создание дизайна, напоминающего реальные объекты.

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

Проблемы с плоским дизайном

Изначально плоский дизайн был слишком тесно связан с минимализмом и дизайном, ориентированным на мобильные устройства ^[1] . Хотя оба эти атрибута во многом способствуют успешному плоскому дизайну, они не могут быть единственным аспектом плоского дизайна.

Пример можно найти в Windows 8, выпущенной Microsoft. Metro-дизайн Windows 8, который некоторые считают пионером плоского дизайна, имел некоторые врожденные недостатки.

NN Group провела тест на удобство использования Windows 8 и обнаружила, что пользователи испытывают трудности с идентификацией активных объектов в ее интерфейсе.

Что касается интерфейса ОС (как показано на рисунке выше), в исследовании говорится:

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

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

Плоский дизайн 2.0

Устранение связанных с этим проблем с удобством использования, плоский дизайн со временем эволюционировал. Он перешел от абсолютно плоской к полуплоской .

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

Вот пример (обратите внимание на тонкую тень и слои):

Теперь, когда мы знакомы с тем, что такое плоский дизайн, давайте посмотрим, как он на самом деле помогает веб-сайтам привлекать внимание пользователей.

# 1 Плоский дизайн улучшает читаемость

Один из краеугольных камней плоского дизайна — удобочитаемость.

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

Заменяет сложные изображения упрощенными (минималистичными) значками и векторами. Плоские значки и сопровождающий их текст позволяют пользователям легко понять любую концепцию.

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

В плоском дизайне основное внимание уделяется контенту.

Возьмем пример.

Это сайт Crazyegg с 2009 года:

И это новый плоский вид веб-сайта в настоящее время:

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

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

# 2 Без отвлекающих факторов

Плоский дизайн — это минимализация.

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

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

Эту конструктивную особенность часто называют пустым пространством.

Белое пространство — неотъемлемая часть плоского дизайна.

Вот еще один пример с GetWalnut.com.

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

Плоский дизайн позволяет легко расставлять приоритеты и выделять контент.

Связанное чтение : JellyTelly обнаружил, что их элементы навигации отвлекали внимание, вы делаете ту же ошибку?

# 3 Уменьшает время загрузки страницы

Медленная загрузка веб-сайтов и приложений раздражает; пользователи отскакивают.

Источник изображения ^[2] Если вы не можете вырезать контент, который нужно показать пользователям, и вам по-прежнему нужно поддерживать скорость своего веб-сайта, вы можете либо использовать изображения и графику с низким разрешением, либо использовать плоский дизайн. .Плоский дизайн здесь кажется очевидным выбором.

По сравнению с веб-сайтами, на которых используются тяжелые изображения и графика, плоский дизайн загружается быстрее. При отсутствии градиентов, шрифтов с засечками и других скевоморфных свойств плоские элементы дизайна имеют меньший размер (файл). Веб-элементы с меньшим размером файла загружаются быстрее, чем элементы с большим размером файла. Google недавно изменил свой логотип на логотип без засечек, чтобы уменьшить размер логотипа ^[2] и, в конечном итоге, время загрузки своей домашней страницы.

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

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

Быстро загружаемые веб-сайты могут привести к большему количеству конверсий.

# 4 Преимущество SEO

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

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

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

Плоский дизайн действительно может помочь веб-сайтам в SEO.

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

Дополнение : По всей видимости, Google тестирует новую функцию в своей поисковой выдаче, которая помечает веб-сайты как «медленные», если у них большое время загрузки.

Взгляните на снимок экрана ниже.

# 5 Современный образ

Web-пользователей формируют впечатление о сайте примерно за 50 миллисекунд! ^[3]

Это означает, что когда пользователи провели на веб-сайте всего 0,05 секунды, они решают, нравится им веб-сайт или нет.

Так как это работает? Пользователи не могут просмотреть содержание сайта за такой короткий промежуток времени.

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

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

Плоский дизайн, пожалуй, самая большая тенденция дизайна на данный момент.Гиганты веб-индустрии и мобильной индустрии, такие как Apple, Google, Microsoft и т. Д., Приняли плоский дизайн с распростертыми объятиями. Пользователи могут принять это как сигнал и установить плоский дизайн в качестве ориентира для всех посещаемых веб-сайтов.

Заключение

Плоский дизайн — это тенденция дизайна, преобладающая в настоящее время в Интернете и на мобильных устройствах. Несмотря на то, что плоский дизайн лучше всего известен своим улучшением взаимодействия с пользователем, он имеет ряд других преимуществ: лучшую читаемость, сокращение времени загрузки страницы, преимущества SEO и т. Д.Мы видели, как отраслевые гиганты внедряли плоский дизайн и использовали эти преимущества.

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

Продолжить чтение

Ваш гид по использованию плоского дизайна

Попрощайтесь с анимацией и яркими 3D-эффектами.В городе появилась новая тенденция: плоский дизайн.

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

В этом посте мы обсудим, что такое плоский дизайн, его плюсы и минусы, передовой опыт и многое другое. Давайте нырнем.

Что такое плоский дизайн?

Плоский дизайн — это минималистский стиль дизайна с использованием двухмерных элементов и ярких цветов, ставший популярным с выпуском Windows 8, iOS 7 от Apple и Material Design от Google.Он преследует две основные цели: работать в рамках параметров экрана и использовать эту простоту для оптимизации дизайна и повышения скорости и функциональности веб-сайтов.

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

С другой стороны, плоский дизайн

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

Плюсы и минусы плоской конструкции

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

К преимуществам плоской конструкции относятся:

• Минимализм
• Упор на функциональность по сравнению с украшениями
• Простые формы и элементы
• Жирный и читаемый шрифт
• Строгая визуальная иерархия
• Яркие цвета и контраст для удобства использования

Однако плоский дизайн не идеален: проблема номер один с плоским дизайном — это отсутствие знакомых пользователю подсказок.Отсутствие 3D-эффектов, таких как падающие тени, убирает визуальные подсказки, которые показывают , как пользователи должны взаимодействовать с дизайном. Например, кнопки в стиле плоского дизайна выглядят так же, как и любой другой элемент — без тени, идентифицирующей их как кнопку, они не выглядят интерактивными.

Дизайнеры избегают этой опасности с помощью подхода под названием «плоский дизайн 2.0», «полу-плоский» или «почти плоский», который берет простые визуальные эффекты из плоского дизайна и добавляет некоторые тонкие скевоморфные качества, такие как тени, блики и т. Д. слои.

Примеры плоской конструкции

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

Майкрософт 8

Metro-UI от Microsoft 8 — один из самых популярных примеров плоского дизайна, доведенного до крайности, без намека на трехмерные функции.

Google Santa Tracker

Ежегодный Santa Tracker от Google включает плоский дизайн 2.0 с тонкими градиентами и тенями на зданиях и всплывающими пузырями, которые появляются при наведении курсора на различные элементы.

Готово, система отслеживания ошибок и проблем

Это программное обеспечение для отслеживания проблем также напоминает плоский дизайн 2.0 благодаря цветовым градиентам и теням.

Lander, конструктор посадочных страниц

Еще один пример традиционного плоского дизайна. Lander делает ставку на двумерное изображение реальных объектов.

Лучшие практики использования плоского дизайна

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

Вот лучшие практики использования плоского дизайна:

• Выберите правильные шрифты. Чтобы сохранить минималистский подход плоского дизайна, выбирайте шрифты без засечек. Шрифты с засечками имеют небольшую линию, прикрепленную к концу каждого штриха, добавляя ненужное украшение.
• Используйте контраст в своих интересах: используйте яркую цветовую палитру плоского дизайна, чтобы текст был четко разборчивым и заметным.Например, светло-серый шрифт на темно-сером фоне популярен в плоском дизайне, но его трудно читать. Вместо этого выберите белый шрифт на жирном фоне.
• Свяжите связанные элементы: при отсутствии 3D-эффектов для обозначения кнопок, на которые можно нажимать, вам нужно проявить осторожность и связать все, что пользователи разумно сочли бы интерактивным. Например, если у вас есть несколько эскизов изображений, представленных вместе, все эти элементы должны вести на одну и ту же страницу.

Как начать работу с плоским дизайном

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

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

.