For faster navigation, this Iframe is preloading the Wikiwand page for Flat design.

Flat design

Материал из Википедии — свободной энциклопедии

Меню «Пуск» ОС Windows 8.1 (Упрощённый вид)

Плоский дизайн (англ. flat design) — дизайн интерфейсов программ и операционных систем, представленный как противоположность реализму. По задумке, «плоский дизайн» должен подчёркивать эффект «очаровательной простоты» и утончённости[1]. Стал набирать популярность с 2010 года[2], а с 2013 становится новым стандартом в дизайнерском компьютерном направлении[2].

Прообразом для плоского дизайна стали направления в искусстве, связанные с традицией Интернационального стиля: минимализм, баухаус[3][4][5][6] и Международный типографический стиль[7] (также известный как швейцарский стиль). Последнее оказало наибольшее влияние на формирование плоского дизайна[3][8].

Несмотря на то, что интерфейсы и сайты с элементами плоскости и минимализма создавались ещё в 2000-е годы, массовую популярность они приобрели после того, как с 2010 года Microsoft стала выпускать продукцию, выдержанную в плоском metro-стиле, тем самым противопоставляя свою дизайн-политику продукции Apple, выдержанной в стиле скевоморфизма. Однако ещё в 2006 году компанией Microsoft был выпущен mp3-плеер Zune, который содержал в себе элементы плоского дизайна[8]. В 2010 году Microsoft выпустила мобильную операционную систему Windows Phone 7 с использованием интерфейса Metro, выдержанного в стиле плоского дизайна, где также доминируют яркие цвета. После коммерческого успеха Microsoft выпускает новую операционную систему Windows 8 в стиле Metro[4]. Фактически с началом выпуска Windows Phone и Windows 8 начинается эра плоского дизайна[2].

В 2013 году компания Apple выпустила операционную систему iOS 7, дизайн которой также отказывается от скевоморфизма в пользу плоскости[8], это приводит к ещё большей популяризации плоского дизайна и делает его новым преобладающим направлением в компьютерном дизайне[2]. Вскоре после этого на плоский дизайн также перешли поисковик и приложения от Google вместе с их операционной системой Android, вышедшей в интерфейсе Material Design[9].

К 2015 году использование объёмного дизайна практически прекращено.

Изображения 6 пар иконок из IOS 6 (2012 год) и IOS 7 (2013 год) Слева иконки выполнены в классическом стиле с элементами скевоморфизма, справа — в плоском

Изначально концепция плоского дизайна заключается в отказе от реализма — иллюзии трёхмерного изображения или объекта, которая достигается путём создания отражения, текстур, теней[4] и создании так называемого плоского дизайна с использованием простейших одноцветных элементов. Согласно задумке, визуально плоский дизайн выглядит более привлекательно и изящно[10]. Также простой дизайн снимает дополнительную нагрузку на сайты или программы, благодаря которому они работают и загружаются быстрее[4]. Плоский дизайн противопоставляется так называемому «богатому дизайну» (англ. rich design), в котором значительный акцент делается на разнообразные визуальные и звуковые эффекты[4][11].

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

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

Flat design и Интернациональный стиль

[править | править код]

Различными авторами высказывается устойчивое мнение, что flat design тесно связан с художественной системой 1930—1960 годов[3][13]. Искусствовед Екатерина Васильева обращает внимание на сходство элементов flat design с принципами Интернационального и Швейцарского стиля[14] — ключевого явления в архитектуре, дизайне и графике середины и второй половины XX века[15]. «Обнаруживая общее начало с такими явлениями, как интернациональный графический стиль, flat design выступает как одно из наиболее влиятельных направлений современной визуальной системы»[16]. Исследователи считают Flat Design идеологическим продолжением Швейцарского стиля[17].

Полагают, что устойчивость flat design может быть объяснена не только его функциональным удобством (графическая простота, двухмерное изображение), но и с обращением к системе Интернационального и Швейцарского стиля[13][14], который можно рассматривать как основу современного дизайна[15]. Влиятельность flat design в современной визуальной системе может быть связана с фактом сознательного обращения flat design к художественным и структурным принципам Интернационального стиля[3]. Элементы и принцип flat design могут быть соотнесены с архитектурой и промышленным дизайном Ле Корбюзье, Людвига Мис ван дер Роэ, Фрэнка Ллойда Райта, Алвара Аалто, а также с графикой Яна Чихольда, Макса Билля, Йозефа Мюллер-Брокмана, Армина Хофмана и др.[7]

Некоторые дизайнеры уверены в том, что мода на плоский дизайн в его радикальном виде является лишь временным явлением и интерес к нему со временем спадёт. Один из явных недостатков плоского дизайна заключается в том, что из-за отсутствия теней сложно различить ссылки и понять, являются ли они действующими[18]. С другой стороны, плоский дизайн хвалят за его простоту и универсальность, он может подходить для самых разных приложений и размеров экрана. Дизайнеры в конечном счёте уверены, что в будущем эволюция компьютерного дизайна закончится на том, что плоский дизайн также будет сочетать в себе элементы скевоморфизма, который позволит подробнее выделять мельчайшие детали[18][19]. Некоторые считают, что повальная мода на плоский стиль является следствием того, что скевоморфизм в течение слишком длительного времени навязывался как самый «идеальный и передовой» дизайн для сайтов и программ. Сначала пользователи недоверчиво относились к новому стилю IOS 7, но быстро привыкли к нему, приняв «плоскость» за новый стандарт[20].

Примечания

[править | править код]
  1. 1 2 3 4 5 «Плоский дизайн»: с чего начать? Пять основных принципов Flat дизайна. Дата обращения: 3 декабря 2014. Архивировано 12 марта 2015 года.
  2. 1 2 3 4 The True History Of Flat Design. Дата обращения: 3 декабря 2014. Архивировано 21 июля 2014 года.
  3. 1 2 3 4 Васильева Е. В., Гарифуллина (Аристова) Ж.С. Flat-Design и система интернационального стиля: графические принципы и визуальная форма // Знак: проблемное поле медиаобразования. 2018. № 3 (29). С. 43-49
  4. 1 2 3 4 5 Turner, Amber Leigh The history of flat design: How efficiency and minimalism turned the digital world flat. The Next Web (19 марта 2014). Дата обращения: 11 апреля 2014. Архивировано 16 октября 2014 года.
  5. Diogo Terror. Lessons From Swiss Style Graphic Design. Smashing magazine (17 июля 2009). Дата обращения: 28 марта 2014. Архивировано 24 июня 2015 года.
  6. A brief history of flat design. Tech Samurais (31 июля 2013). Дата обращения: 3 декабря 2014. Архивировано 2 октября 2014 года.
  7. 1 2 Васильева Е. В., Гарифуллина (Аристова) Ж.С. Flat-Design и система интернационального стиля: графические принципы и визуальная форма // Знак: проблемное поле медиаобразования. 2018. № 3 (29). С. 45
  8. 1 2 3 Taimur Asghar. The True History of Flat Design. Web Design Ai (9 июля 2014). Дата обращения: 3 декабря 2014. Архивировано 21 июля 2014 года.
  9. 9 principles Google created for its colorful ‘Material Design’ UI refresh. The Next Web. Дата обращения: 3 декабря 2014. Архивировано 29 июня 2016 года.
  10. Carrie Cousins. Flat design principles. designmodo.com (28 мая 2013). Дата обращения: 3 декабря 2014. Архивировано 2 декабря 2014 года.
  11. Yair Grinberg. iOS 7, Windows 8, and flat design: In defense of skeuomorphism. VentureBeat (11 сентября 2013). Дата обращения: 13 апреля 2014. Архивировано 23 мая 2017 года.
  12. Kelsey Campbell-Dollaghan. What Is Flat Design? Gizmodo Australia (27 мая 2013). Дата обращения: 13 апреля 2014. Архивировано 3 марта 2016 года.
  13. 1 2 Terror D. Lessons From Swiss Style Graphic Design. Smashing magazine (17 июля 2009). Дата обращения: 14 декабря 2018. Архивировано 15 декабря 2018 года.
  14. 1 2 Васильева Е. В., Гарифуллина (Аристова) Ж.С. Flat-Design и система интернационального стиля: графические принципы и визуальная форма // Знак: проблемное поле медиаобразования. 2018. № 3 (29). С. 43-49.
  15. 1 2 Hollis, R. Swiss Graphic Design: The Origins and Growth of an International Style, 1920—1965. New Haven: Yale University Press, 2006. — 272 p.
  16. Васильева Е. В., Гарифуллина (Аристова) Ж.С. Flat-Design и система интернационального стиля: графические принципы и визуальная форма // Знак: проблемное поле медиаобразования. 2018. № 3 (29). С. 43
  17. Филиппова М. Принципы Flat-design и проблема интернационального стиля: графическая программа и её специфика. // Месмахеровские чтения — 2022. Материалы международной научно-практической конференции. Сборник научных статей. Санкт-Петербург, 2022. С. 650—656. Архивная копия от 19 августа 2023 на Wayback Machine
  18. 1 2 Kyle Stalzer and Dan Klammer. Why Flat Design Will Die. tackk (n.d.). Дата обращения: 3 декабря 2014. Архивировано из оригинала 4 ноября 2014 года.
  19. Alex Peters. Why Flat Design is Here to Stay. How Design (10 марта 2014). Дата обращения: 3 декабря 2014. Архивировано из оригинала 8 декабря 2014 года.
  20. Как и почему плоский дизайн победил скевоморфизм. macradar.ru (28 апреля 2014). Дата обращения: 3 декабря 2014. Архивировано из оригинала 29 ноября 2014 года.

Литература

[править | править код]
{{bottomLinkPreText}} {{bottomLinkText}}
Flat design
Listen to this article

This browser is not supported by Wikiwand :(
Wikiwand requires a browser with modern capabilities in order to provide you with the best reading experience.
Please download and use one of the following browsers:

This article was just edited, click to reload
This article has been deleted on Wikipedia (Why?)

Back to homepage

Please click Add in the dialog above
Please click Allow in the top-left corner,
then click Install Now in the dialog
Please click Open in the download dialog,
then click Install
Please click the "Downloads" icon in the Safari toolbar, open the first download in the list,
then click Install
{{::$root.activation.text}}

Install Wikiwand

Install on Chrome Install on Firefox
Don't forget to rate us

Tell your friends about Wikiwand!

Gmail Facebook Twitter Link

Enjoying Wikiwand?

Tell your friends and spread the love:
Share on Gmail Share on Facebook Share on Twitter Share on Buffer

Our magic isn't perfect

You can help our automatic cover photo selection by reporting an unsuitable photo.

This photo is visually disturbing This photo is not a good choice

Thank you for helping!


Your input will affect cover photo selection, along with input from other users.

X

Get ready for Wikiwand 2.0 🎉! the new version arrives on September 1st! Don't want to wait?