22 Дек 16

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

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

История развития плоского дизайна. Как плоский дизайн стал новым мировым стандартом веб-интерфейсов. Преимущества и недостатки плоского дизайна. Сравнение плоского дизайна с скевоморфизмом, реализмом, трехмерным стилем. Концепция «почти плоского дизайна».

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

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

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

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

Несмотря на то, что операционная система Windows 8, использующая плоский дизайн, оказалось коммерчески неудачным продуктом, сама концепция дизайна стремительно набирает популярность, и спустя 3 года, в 2013 году, компания Apple отказывается от скевоморфизма в пользу плоского дизайна.

Таким образом, flat design за короткий срок, в основном благодаря «битве гигантов» — законодателей мод, Apple и Microsoft, стал очень популярным, фактически – новым стандартом веб-дизайна.

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

Трехмерный стиль

трехмерный стиль в веб дизайне

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

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

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

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

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

Реализм

реализм в веб дизайне

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

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

Как было сказано выше, плоский дизайн стремительно завоевал мировую популярность после использования компанией Microsoft в дизайнерском языке «Metro». В итоге даже Apple были вынуждены пересмотреть свой взгляд на дизайн интерфейсов – в 2015 году они полностью отказались от любых концепций скевоморфизма в пользу 2D.

плоский дизайн apple

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

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

В 2000-е годы — это действительно было проблемой, однако в настоящее время, когда flat design стал использоваться практически повсеместно, пользователи получили новый пользовательский опыт и оценили все преимущества:

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

Отдельный вопрос – использование плоского дизайна веб-мастерами. Одно дело – тренды, но следует помнить 2 вещи:

  • Flat Design подходит не для всех проектов
  • На создание качественного дизайна уходит много времени – пропустите одну маленькую деталь, и концепция перестанет работать

Эволюция плоского дизайна и повышение функциональности

В настоящее время чаще всего используют концепцию «почти плоского дизайна»: аккуратное смешение 2D и 3D, использование теней, различных световых эффектов, отдельных 3D элементов, например, кнопок. Это повышает юзабилити веб-интерфейса, и делает плоский дизайн еще лучше. Замечательный пример этому – «Material Design» от Google, использующийся в ОС Android.

почти плоский дизайн material design OC Android

Теги: ,

Комментарии:

Всего комментариев: 0

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

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>