Лайфхакер
Лайфхакер
Лучшее
Рубрики
Рецепты
Подкасты
Сервисы
Колонки
Лучшее
Рубрики
Рецепты
Подкасты
Сервисы
Колонки
🧡 Осень в радость
Новости
Здоровье
Спорт и фитнес
Покупки
Технологии
Отношения
Кино
Реклама
МакрадарТехнологии
26 марта 2014

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

Фото автора Александр Марфицин
Александр Марфицин

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

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

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

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

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

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

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

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

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

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

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

Важно понимать, что “богатый дизайн” — не то же самое, что скевоморфизм. Скевоморфизм предполагает сознательное использование физических аналагов тех или иных элементов (тумблеры, кнопки, текстуры кожи и так далее), чтобы они выглядели знакомо пользователям.

Откуда пошел плоский дизайн?

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

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

swiss-cover

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

Швейцарский дизайн в основном сфокусирован на использовании направляющих сеток, типографики без засечек (так называемый “гротеск” — прим. пер.) и понятной иерархии содержания и оформления. В течение 40‑х и 50‑х годов швейцарский дизайн можно было часто встретить на многих фотографиях как элемент оформления.

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

Интересно наблюдать, как плоский дизайн использовали еще до того, как его внедрили в свои наработки Microsoft и Apple и сделали его популярным, ведь швейцарский стиль можно проследить даже в Германии 20‑х годов XX века. В то время он стал очень популярным и его элементы использовались известной немецкой школой Баухауз — любители искусства не дадут соврать, что в баухаузе большой акцент делается на типографике, которая имеет много общего со швейцарским стилем.

Минимализм

18yk3cer2ztlsjpg

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

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

Одним из самых известных произведений искусства в стиле минимализма является вот эта картина Ива Кляйна “голубая Эпоха”:

blue-epoch

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

Эра плоского дизайна от Microsoft и Apple

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

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

Microsoft и интерфейс Metro

0654.Metro-style-UI_010DA84C

Microsoft начала работать с плоским дизайном задолго до появления интерфейса Metro. В середине 2000‑х, Microsoft выпустила конкурента iPod — плеер Zune (уверен, некоторые из вас еще помнят это названием — прим. ред.).

Тот самый Zune от Microsoft - вглядитесь в интерфейс, ничего не напоминает?
Тот самый Zune от Microsoft — вглядитесь в интерфейс, ничего не напоминает?

Именно с выходом Zune появился уникальный дизайнерский стиль, акцент в котором был сделан на крупную типографику. Дизайн программного обеспечения Zune резко отличался от большинства программных продуктов Microsoft того времени. Ведь Windows Phone 7 вышла только в конце 2010-го года и дизайн этой мобильной операционки многое взял от интерфейса ПО Zune. Большие и яркие формы, основанные на направляющих сетках, типография без засечек (гротеск), плоские иконки.

Этот интерфейс Microsoft вскоре назовет Metro 

Такой дизайн стал настолько популярным, что Microsoft выпустила настольную ОС Windows 8, которая основана на интерфейсе Metro. Четкие квадратные формы, акцент на типографике, яркие цвета — все это перекочевало и на персональные компьютеры. Этот же интерфейс используется практически во всех продуктах Microsoft, включая Xbox 360.

Как Apple встряхнула скевоморфизм

ios-6-ios-7_

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

Поскольку у Apple на тот момент было много адептов, выход “плоской” iOS 7 сделал этот дизайнерский стиль популярным, чем когда-либо. И произошло это в крайне сжатые сроки (имеется в виду быстрый переход с iOS 6 на iOS 7 — прим. ред.).

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

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

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

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

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

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

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

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

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

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


Комментарий редактора

Мне было интересно прочитать и перевести для вас эту заметку еще и потому, что буквально год назад, когда все гадали, какой же будет iOS 7, я написал пост “Почему в iOS 7 не будет плоского дизайна”, в которой поделился своим мнением касательно того, как должна выглядеть мобильная ОС от Apple. Тогда я был противником плоского дизайна и первое время очень ему сопротивлялся. Но месяцы пользовательского опыта изменили мое мнение. Я привык к плоскому дизайну и он не вызывает у меня отторжения.

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

В iOS 8 хочется увидеть исправления некоторых недочетов в дизайне (особенно иконок некоторых приложений), но в принципе, Apple правильно сделала, что сделала плоский дизайн стандартом на ближайшие годы. Интересно посмотреть, как это повлияет на внешний вид OS X и какое будущее ждет интерфейсы приложений.

А что вы думаете о плоском дизайне и iOS 7 в частности? Не забывайте делиться своими мнениями в комментариях.

(via TheNextWeb)

Если нашли ошибку, выделите текст и нажмите Ctrl + Enter

Лучшие предложения

Как максимально сэкономить на AliExpress в ноябре

Как максимально сэкономить на AliExpress в ноябре

Nahodki AliExpress: 20 samyh poleznyh i interesnyh tovarov oktyabrya

Находки AliExpress: 20 самых полезных и интересных товаров октября

120 idej podarkov dlya «Tajnogo Santy»

120 идей подарков для «Тайного Санты»

30 полезных товаров со скидками до 86% на AliExpress

30 полезных товаров со скидками до 86% на AliExpress

Забираем зимние кроссовки от Humtto со скидкой 55%

Забираем зимние кроссовки от Humtto со скидкой 55%

Надо брать: видеорегистратор-новинка от 70mai со скидкой 60%

Надо брать: видеорегистратор-новинка от 70mai со скидкой 60%

Это правда покупают: 10 безумных товаров с AliExpress

Это правда покупают: 10 безумных товаров с AliExpress

Смартфон realme P3 Lite 5G

Свежий бюджетник realme P3 Lite 5G отдают со скидкой 55%

Это интересно
Пазл жизни: что нужно знать о донорстве костного мозга

Пазл жизни: что нужно знать о донорстве костного мозга

От традиций к инновациям: 8 перспективных профессий современного сельского хозяйства

От традиций к инновациям: 8 перспективных профессий современного сельского хозяйства

Как выбрать тренера для ребёнка: 7 признаков классного профессионала 

Как выбрать тренера для ребёнка: 7 признаков классного профессионала 

Как студенты-архитекторы улучшают благоустройство городов, не отрываясь от учёбы: 4 доступных формата

Как студенты-архитекторы улучшают благоустройство городов, не отрываясь от учёбы: 4 доступных формата

Комментарии
Njordy Jovanovich
26.03.14 22:43
Я ненавижу то, как выглядит iOS7. Да, Metro — замечательная штука, и направление Google мне тоже очень нравится. Но я всегда был сторонником старого пути Apple. Мне нравился скеуморфизм (если сделано профессионально). Я лизал свой телефон. И, спасибо Ретине, можно было рассмотреть мельчайшие детали. Сотни иконок были шедеврами, на которые можно было любоваться просто по-отдельности. А сейчас что, 90-95% экрана это залитый фон. Зачем ретина? Чтобы шрифт была плавным? Вот спасибо-то. И Метро, и интерфейс Гугл — самостоятельные, строгие, «законченные» стили. iOS7 это что-то недоделанное, недодуманное, брошенное на пол-пути. Мерзейшие иконки, цветастость, тупые градиенты, ужасные квадратичные элементы управления, кнопки-текст, который не всегда за кнопку принимается... Полный бред. К этому привыкнуть невозможно. От iOS8 жду кардинальнейших изменений.
Александр Журович
26.03.14 23:02
Лучше переходите на ведроид и будет вам щасье.
Alex Sherbakov
26.03.14 23:23
А я привык. Был одним из тех, кто громче всех кричал "фу!" в сторону iOS 7 и оставался на iOS 6 до февраля. А потом как озарение нашло, резко. Видимо, количество перешло в качество. :)
Njordy Jovanovich
26.03.14 22:45
И, да, я не считаю черные квадраты и выплескивание краски на холст чем-то выдающимся.
Dmitry Uvarov
27.03.14 02:17
Все правильно. Люди которые не могут нарисовать, создают свое псевдоискусство. И выставлять себя первыми. Я не имею ввиду Айва. Есть художники, а есть художники непонятно кто и как они себе статус такого уровня ставят непонятно. Про Айва скажу так - он индустриальный дизайнер, статического дизайна. Но не динамического, взаимодействия нет. Не зря Джобс его только для дизайна устройств оставил.
Alexander Marfitsin
27.03.14 02:20
А вы не видите в том, что Айв занимался только дизайном устройств некоторого несоответствия? Все таки дизайн он един и нужно работать по общим канонам как в железе так и в софте. Получается более гармонично что ли
Jon Snow
27.03.14 00:16
Недавно наткнулся на вашу статью про ios7 после ее релиза. Довользо забавно было читать комментарии ДиванныхАналитигов утверждавших, что Apple все вернет, т.к. побоится потерять аудиторию, что это ошибка и т.д...
Alexander Marfitsin
27.03.14 02:22
Ну, многие были слегка шокированы таким поворотом дел :)
Dmitry Uvarov
27.03.14 02:09
Частично не согласен с этой статьей. Флэт пройдет, дизайнерам надоест и кто-то добавит к квадрату тень. Уже так и происходит. И все скажут вау. Потом блик и тд. Так скеоморфизм постепенно надоел. Потому что уже начали перегибать с графикой. Но, приложения отличались от друг друга и запоминались. Сейчас же непонятно, чем приложение с кружочком отличается от того что с палочкой. И с такой палочкой у меня три в телефоне и они разные, как оказалось. Сравните feedly, File extractor, numbers. Объемный дизайн люди больше любят. Это красиво и интересно. Он влияет на обычных пользователей, чтобы те стали дизайнерами. iOS 7 можно было сделать лучше, гораздо. Плоско, но не кривота на кривоте. Сделать плоскими элементы интерфейса в объемном пространстве. Иконки и цвета. Сейчас уже все приложения все одинаково синие, зеленые и красные. Они незаметны, так все похожи одна на другую. Был выбор между плоским калькулятором и объемным, какой хочу такой и качаю. Сейчас выбора нет. Карточку разрезал шредер, фотка улетала в мусорку и тд. Можно было сделать плоско, но чтобы айфон был живой. Сейчас даже сири не чувствуется. Неуклюжесть iOS 6 можно было бы причесать, раз уж так говорить. Может плоский дизайн iOS постепенно как от наброска в набросок развивается. Но это будет долго, пока Айв сделает идеальную иконку Настроек. По поводу "привык" - это дело втереть и навязать. Показывают статистику как на iOS 7 перешло масса народу. Ещё бы, откат сделать нельзя. Всё больше приложений отказываются обновляться и становятся рычагом для обновления ОС. Переходить от старого ПО в новое хорошо, но тут лично для меня тупиковая ситуация. Я бы даже сказал, принудиловка.
Alexander Marfitsin
27.03.14 02:18
Про то что флэт пройдет, как проходит и все остальное, в статье как раз написано. Про объемный дизайн - думаю, это скорее дело привычки, но не исключаю что есть часть тех, которым он сознательно нравится. Но тех, кому нравится флэт - сейчас точно не меньше.
Dmitry Uvarov
27.03.14 02:19
Ну нам приходится рисовать потому что так модно, сейчас просто отход в сторону даже не принимается. А пользователям пофиг.
Alexander Marfitsin
27.03.14 02:21
Да сейчас это модно но спустя какое то время появится что то еще :) на то это и мода что сменяется
Dmitry Uvarov
27.03.14 02:18
Кстати, как же приятно ощущать такой четкий экран разглядывая белое пиксельное полотно
Игорь Васильев
23.10.14 15:37
двухмерный мир никогда не будет совершенней и прекрасней трехмерного. все как бараны стали делать для баранов плоский дизайн, убеждая, что это красиво. apple слюнями брызгает, рекламируя сначала ios7, а теперь и yosemite, какой у неё роскошный и расчудесный дизайн. фиг... хорошо, что очень многие это понимают. так и вспоминается знаменитая фраза: а король-то голый!
Что вы могли пропустить
Apple запустила новую веб-версию App Store — теперь все приложения собраны в одном месте
Apple запустила новую веб-версию App Store — теперь все приложения собраны в одном месте
0
12:10
Веб-сервисы
Новости
Всё, что вам нужно знать об SD-картах памяти, чтобы не облажаться при покупке
Всё, что вам нужно знать об SD-картах памяти, чтобы не облажаться при покупке
0
11:00
Как выбрать
Технологии
Apple представит минимум 15 устройств в 2026 году — раскрыт весь список
Apple представит минимум 15 устройств в 2026 году — раскрыт весь список
0
10:48
Новости
Устройства
Вместо СМС: WhatsApp начал просить у россиян указать почту для входа в аккаунт
Вместо СМС: WhatsApp начал просить у россиян указать почту для входа в аккаунт
0
Вчера
Новости
Технологии
10 лучших бесплатных сервисов октября
10 лучших бесплатных сервисов октября
0
Вчера
Технологии
Технологии
11 новых приложений для iOS: лучшее за октябрь
11 новых приложений для iOS: лучшее за октябрь
0
2 ноября
iOS
iOS
Как авторизоваться в Telegram, если СМС и звонки не приходят
Как авторизоваться в Telegram, если СМС и звонки не приходят
0
2 ноября
Ликбез
Технологии
10 новых игр для Android и iOS: лучшее за октябрь
10 новых игр для Android и iOS: лучшее за октябрь
0
1 ноября
Технологии
Технологии
Apple может выпустить iPhone 18 Pro в трёх ярких цветах — без чёрного
Apple может выпустить iPhone 18 Pro в трёх ярких цветах — без чёрного
0
1 ноября
Новости
Устройства
WhatsApp выпустит приложение-компаньон для Apple Watch
WhatsApp выпустит приложение-компаньон для Apple Watch
0
31 октября
Новости
Технологии
Apple не удалось превзойти Samsung на рынке смартфонов — названы лидеры 2025 года
Apple не удалось превзойти Samsung на рынке смартфонов — названы лидеры 2025 года
0
31 октября
Новости
Устройства
На замену Booking и Airbnb: 11 сервисов для поиска отелей и квартир в России
На замену Booking и Airbnb: 11 сервисов для поиска отелей и квартир в России
0
31 октября
Веб-сервисы
Как жить
Android 17 позволит приложениям работать в режиме Always-On Display
Android 17 позволит приложениям работать в режиме Always-On Display
0
31 октября
Android
Новости
Android оказался надёжнее iOS в борьбе с мошенниками
Android оказался надёжнее iOS в борьбе с мошенниками
0
31 октября
Новости
Технологии
В WhatsApp появилось шифрование резервных копий с помощью биометрии
В WhatsApp появилось шифрование резервных копий с помощью биометрии
0
31 октября
Новости
Технологии

Новые комментарии

Аватар автора комментария
Евгения6 минут назад

0 / 0

Хороший список, много из того что написано смотрела, я бы добавила сериал "Убежище" 2008-2011, 4 сезона
44 сериала для тех, кому не хватает мистики и чудес
Аватар автора комментария
Horugvi1 час назад

0 / 0

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

0 / 0

Вот еще статья на эту тему https://dzen.ru/a/Y5QeL2IE1GBKJyWn
Бывший физик NASA пытается доказать, что мы живём в симуляции — как в «Матрице»
Аватар автора комментария
Valentina Kudyakova1 час назад

0 / 0

Нам тоже не понравилось. Зря потраченные деньги и время.
Быстрое хачапури на кефире с сыром
Задача — дойти до школы самому: как подготовить ребёнка и убедиться, что всё будет в порядке 

Задача — дойти до школы самому: как подготовить ребёнка и убедиться, что всё будет в порядке  

Лайфхакер
Информация
О проектеРубрикиРекламаРедакцияВакансииДля начинающих авторов
Подписка
TelegramВКонтактеTwitterViberYouTubeИнициалRSS
Правила
Пользовательское соглашениеПолитика обработки персональных данныхПравила применения рекомендательных технологийПравила сообществаСогласие на обработку персональных данныхСогласие для рекламных рассылокСогласие для информационной программы
18+Копирование материалов запрещено.
Издание может получать комиссию от покупки товаров, представленных в публикациях