Стиль флэт дизайн: Что такое flat design или плоский дизайн / Skillbox Media

Flat design: минималистичный дизайн интерфейсов

Flat design — пользовательские интерфейсы в стиле минимализма

Немного о последнем тренде в веб-дизайне.

Сибирикс

«Плоский» дизайн (flat design) — это сокращённая версия философии дизайна…

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

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

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

Яркий пример «плоского» дизайна — Google Now. Разработчики сервиса применили интерактивные карточки в качестве основных информационных блоков — данные о пробках и маршрутах их объезда, местоположении отелей и магазинов, пройденном расстоянии, напоминания о встречах, днях рождения друзей и многом другом. Этими карточками удобно пользоваться, легко управлять прямо на экране телефона, редактировать и скрывать.

Ещё один пример — Windows 8 и стиль METRO в частности. Главная его особенность — представление информации в определённом графическом ключе, помогающем пользователю определить тип материала, который они читают.

Несколько наших работ, выполненных в стиле МЕТRO:

zimzum.ru	brutto. ru	expert.pravokonst.ru

…именно этих качеств не хватает скевоморфизму (

skeuomorphic design)…

Плоский дизайн — полная противоположность скевоморфизма — направления, ориентированного на создание похожих друг на друга элементов (за счёт общих деталей, орнамента и т. д.). Пример из реальной жизни — «порталы» вместо полноценных каминов — устанавливать такие можно без опаски даже в многоквартирных домах. В дизайне пользовательского интерфейса скевоморфизм проявляется при визуализации предметов материального мира, пример — карточки на «Pin Board» в Pinterest.

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

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

В сфере диджитала скевоморфизм появился в 1980-х. Так, в 1984-м компания Apple впервые ввела понятие «Рабочий стол» и стала использовать иконки, похожие на папки и листы бумаг. Скевоморфизм позволил дизайнерам перенести основные черты привычных нам предметов (папки для бумаг) на новые цифровые объекты (папка файлов).

Рабочий стол Apple Lisa, работа с изображением. 1984

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

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

Что же будет в трендах после «плоского» дизайна, как считаете?

Статья основана на «What Is Flat Design?»

Flat-design или плоский дизайн сайта

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

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

Популяризации плоского стиля в дизайне способствовал выпуск операционной системы Windows 8 от Microsoft в стиле Metro, а также iOS 7, в котором компания Apple также выбирает плоский стиль. Именно после этого и наступает настоящая эра плоского дизайна. Вскоре на Flat-design переходят и крупные поисковые сервисы и приложения – Google, Youtube, появляется множество сайтов, использующих принципы плоского стиля в своем дизайне. В последние годы дизайн в стиле flat является лидером в мировых тенденциях дизайна сайтов.

Классический логотип Google	Логотип Google плоский	Классический логотип YouTube	Плоский логотип YouTube

 

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

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

5 принципов плоского дизайна сайтов

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

1 – Использование двухмерных объектов

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

2 – Иконки и простые объекты

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

3 – Простые шрифты в стиль дизайна

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

4 – Игра цвета

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

5 – Минимализм

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

Почти плоский дизайн

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

 

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

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

 

 

 

 

Вернуться назад

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

Это было смело и захватывающе.

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

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

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

1. Что такое плоский дизайн?
   • Характеристики плоской конструкции
   • Как дизайнеры пользовательского интерфейса используют плоский дизайн?
2. Восемь примеров плоской конструкции
3. Что такое полуплоская конструкция?
4. Когда следует использовать плоский дизайн?
5. Плоский дизайн и анимация
6. Представляем плоский дизайн 2. 0
7. Плоский дизайн на вынос

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

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

Он стал популярным благодаря выпуску Windows 8 (2012 г.) и Apple iOS 7 (2013 г.). Акцентируя внимание на чистоте и иерархии, плоский дизайн создает функциональные веб-сайты, которые предоставляют информацию быстро и просто.

Шесть характеристик плоской конструкции

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

1. Контрастные цвета: часто ярких цветов, плоский дизайн основан на четком контрасте, чтобы посылать визуальные сигналы пользователям.
2. 2D-стилизация: простых форм и отсутствие реалистичных изображений.
3. Простая типографика: типичных шрифтов без засечек — выбор плоского дизайна. Он загружается быстро, соответствует минималистичному стилю и легко читается.
4. Пустое пространство: отрицательное пространство помогает дизайнерам указать, на какой части страницы они хотят, чтобы пользователи сосредоточили внимание, и делает веб-сайт более читабельным.
5. Макеты на основе сетки: обычно плоский дизайн является симметричным и использует сетку для макета и иерархии.
6. Простота: символических иконок, абстрактные формы, без текстур и без градиентов.

Как дизайнеры пользовательского интерфейса используют плоский дизайн?

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

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

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

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

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

Burger King

Trip Advisor

Flodesk

Lander

Apple

Elementor

Evernote

Oscar

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

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

По мере того, как эти удобные функции набирали обороты, полуплоский дизайн трансформировался в плоский дизайн 2.0, также иногда называемый «Плоский 2.0» или «почти плоский». Мы поговорим об этом позже!

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

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

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

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

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

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

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

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

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

Минусы плоского design

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

Некоторые примеры «чрезмерного минимализма» включают редизайн значков Google в 2020 году и Microsoft Windows 8. Когда плоский дизайн становится слишком плоским, он удаляет ключевые обозначения, указывающие на то, что на самом деле кликабельно, что приводит пользователей в замешательство.

значков приложений Календаря Google и Диска до и после редизайна 2020 года. (Изображение предоставлено Google)

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

Хотя плоский дизайн отличается минимализмом, это не означает, что вы не можете использовать анимацию!

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

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

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

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

Тени, блики, анимация при наведении курсора и градиенты — это три отличия плоского дизайна 2. 0 от базового плоского дизайна. На данный момент оригинальный плоский дизайн устаревает, и плоский 2.0 — это путь.

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

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

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

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

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

1. Плоский дизайн — это минималистичный подход к дизайну пользовательского интерфейса, веб-сайтов и приложений, отличающийся скоростью, удобочитаемостью, масштабируемостью и простотой.
2. Избегайте слишком минимализма при использовании плоского дизайна. Сейчас мы живем в эпоху Flat 2.0. Используйте затенение, градиенты и анимацию, чтобы донести свою точку зрения!
3. Чтобы научиться использовать плоский дизайн, попробуйте создать набор иконок! Векторы — это простой способ окунуться в идеи плоского дизайна. Если вам нужна дополнительная помощь, мы создали пошаговое руководство по созданию значка.

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

• Как стать дизайнером пользовательского интерфейса
• Что такое правило третей в дизайне?
• Figma или Sketch: какой инструмент лучше для дизайна пользовательского интерфейса?
• 5 главных принципов дизайна пользовательского интерфейса, которые вам нужно знать

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

История

Эмбер Ли Тернер

Владелец и креативный директор January Creative

Владелец и креативный директор January Creative в Нэшвилле, штат Теннесси, Эмбер более 10 лет работает не по найму графическим и веб-дизайнером. (показать все) Владелец и креативный директор January Creative в Нэшвилле, штат Теннесси, Эмбер работает не по найму графическим и веб-дизайнером более восьми лет, начав свою студенческую карьеру. У Эмбер уникальная страсть не только к дизайну, но и к бизнесу. Фриланс в студенческие годы дал Эмбер возможность написать книгу о фрилансе для студентов под соответствующим названием «Студенты-фрилансеры 101: курс от начала до конца, чтобы стать студентом-фрилансером», чтобы помочь другим студентам, которые хотят начать заниматься фрилансом. Следите за ней в Твиттере. Напишите ей по адресу https://21.co/amberleighturner/

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

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

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

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

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

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

Присоединяйтесь к нам на конференции TNW 15 и 16 июня в Амстердаме

Вот четыре причины, почему вы не можете ее пропустить

Узнать больше их, чтобы сосредоточиться на самом важном: содержании и сообщении.

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

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

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

Next: Откуда взялся плоский дизайн?

Откуда изначально взялся плоский дизайн?

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

Швейцарский стиль дизайна

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

Швейцарский дизайн в основном сосредоточен на использовании сеток, типографики без засечек и четкой иерархии контента и макета. В 40-х и 50-х годах швейцарский дизайн часто сочетал в себе очень большую фотографию с простой и минимальной типографикой.

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

Точно так же, как современный плоский веб-дизайн существовал задолго до того, как Microsoft и Apple сделали его популярным, швейцарский стиль дизайна можно проследить еще в 1920-х годах в Германии, но именно швейцарцы сделали его популярным. и заслужила тезку (для любителей истории искусств школа Баухаус в Германии сосредоточилась на архитектуре и типографике, и типографика имеет сходство со швейцарским дизайном, но практиковала этот стиль дизайна до того, как швейцарцы заявили о себе).

Минималистский дизайн

Другое сильное влияние современного плоского веб-дизайна можно найти в истории минимализма. Термин «минимализм» иногда используется взаимозаменяемо с сегодняшним плоским дизайном, но минимализм был популярен задолго до того, как Интернет стал даже мыслью. Минимализм имеет свою историю в архитектуре, изобразительном искусстве и дизайне.

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

Вероятно, одним из самых популярных произведений искусства эпохи минимализма является картина Ива Кляйна «Голубая эпоха » (см. ниже).

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

Next: Эпохи плоского дизайна Microsoft и Apple

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

История повторяется, и то же самое относится и к современной тенденции плоского дизайна. Как мы видели выше, плоский дизайн восходит к 19 веку.20-х годов и повлияли на нашу текущую адаптацию плоского дизайна.

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

Microsoft и Metro Design

Microsoft начала заниматься плоским дизайном до того, как нынешняя эстетика дизайна «Metro» была названа Metro. Пытаясь конкурировать с чрезвычайно популярным iPod от Apple, Microsoft выпустила медиаплеер Zune в конце 2006 года.0005

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

Дизайн операционной системы Zune на устройствах Zune кардинально отличался от большинства других доступных программ Microsoft в то время (а именно Windows). Когда Microsoft выпустила Windows Phone 7 в октябре 2010 года, она взяла то, что узнала из дизайна Zune, и применила его к внешнему виду Windows Phone 7: большие, яркие, сетчатые формы, простые шрифты без засечек. типографика и плоские значки доминировали в стиле Windows Phone 7.

Этот дизайн вскоре будет называться «Метро» его создателем, Microsoft.

Дизайн стал настолько популярным, что Microsoft сохранила стиль дизайна Metro и представила его в своей операционной системе Windows 8, соблюдая строгую сетку блоков контента, резкие края, яркие цвета, шрифт без засечек и фоновые изображения. Этот же стиль дизайна до сих пор используется Microsoft почти во всем своем программном обеспечении и устройствах, таких как Xbox 360 и на ее текущем веб-сайте (хотя технически название Metro больше не используется).

Apple потрясает скевоморфизмом

Пока Microsoft работала над своим плоским дизайном, у Apple было что-то еще в рукаве. Apple начала намекать на отказ от использования скевоморфизма, а затем полностью отказалась от усовершенствованного скевоморфизма в пользу более плоского дизайна с выпуском iOS 7 летом 2013 года.

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

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

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

Адаптивный дизайн

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

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

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

Next: Будущее плоского дизайна

Будущее плоского дизайна

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

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

Одним из ключей к тому, что нас ждет в будущем для плоского дизайна (или даже после), является текущая работа Google по дизайну (в основном в их мобильных приложениях). Хотя приложения Google демонстрируют признаки плоского дизайна, они, похоже, не удаляют такие элементы, как тени; он также все еще использует градиенты тонкими способами. Кажется, что компания берет лучшее из плоского и насыщенного дизайна и интегрирует их так, чтобы это просто работало. Может быть, Google выяснил что-то, чего не знаем мы?

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