«Плоский» дизайн и почему это важно

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

Итак, Что такое «плоский дизайн»?

UX-02 UX-03

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

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

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

UX-04

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

«Плоский» дизайн — ответ на проблемы скевоморфизма (skeumorphism)

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

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

UX-05

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

Сложности скевоморфизма

UX-06

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

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

— Скевоморфические элементы плохо сочетаются с менее объемными, причем иногда такая объемная имитация просто нелогична. Например, в приложении Apple — Find my friend — фон имеет тектуру кожи, спрашивается — зачем, к чему?

UX-07

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

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

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

Пример №1

UX-08

 

Пример№2

UX-09

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

«Плоский» дизайн гармонизирует среду и достигает целей, обозначенных скевоморфизмом и минимализмом

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

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

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

UX-10

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

«Плоский» дизайн — идеален для великих UX

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

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

UX-12

Вот так все просто, ярко и понятно.

Заключение

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

 

Перевод статьи Luke Clum

 

Оставить свой комментарий

Пожалуйста, введите ваше имя

Ваше имя необходимо

Пожалуйста, введите действующий адрес электронной почты

Электронная почта необходима

Введите свое сообщение

Оставайтесь на связи

webydesign © 2020 Все права защищены