Плоский дизайн (flat design) остаётся главным трендом в сфере разработки веб-интерфейсов на протяжении последних 3-х лет. Взрывную волну популярности и всемирное распространение этому стилю обеспечила его востребованность у таких законодателей мод в области ITкак Microsoft и Apple.
Однако слава изобретателя новой эстетики дизайна ни за одним из софтверных гигантов не закреплена. Откуда же взялся flat? Когда и у кого впервые возникла идея использования визуально плоских конструкций? Что послужило предпосылкой для зарождения уникального графического стиля? Развёрнутые ответы на все эти вопросы на страницах издания TNW дала основательница веб-студии January Creative Эмбер Ли Тёрнер (Amber Leigh Turner). Давайте вслед за автором проследим историю становления и процветания flat-дизайна.
Что такое «плоский дизайн»?
Flat design - это стиль веб-дизайна, в котором графика полностью лишена визуального объёма и глубины. Элементы пользовательского интерфейса (UI) не имеют никаких стилистических 3D-компонентов: ни градиентов, ни скошенных углов, ни теней, ни текстур. У пользователей не возникает даже ложного впечатления, что кнопки или буквы трёхмерные и выпирают на поверхности макета - всё идеально гладко и на одном уровне.
Дизайнеры любят плоский дизайн, поскольку он позволяет сосредоточиться на главном: контенте и идее. Удалив все те стилевые компоненты, которые имеют свойство устаревать и выходить из моды, специалисты делают визуальное оформление страницы вневременным и вечно актуальным. Хороший задел на будущее. Плюс ко всему, flat-дизайн придаёт веб-страницам более серьёзный и солидный внешний вид, избавляя их от каких бы то ни было ассоциаций с играми и мультфильмами.
Flat как альтернатива rich дизайну и скевоморфизму
Освещая тему плоского веб-дизайна, нельзя не упомянуть об альтернативном направлении - rich design. Отличительной особенностью этого стиля является богатый визуальный рельеф, образованный теми самыми скосами, бликами, тенями и градиентами. Кнопки такого дизайна кажутся тактильно осязаемыми, юзабильными, ничем не отличающимися от своих аналогов из реального мира.
Многие специалисты сейчас наверняка вспомнили о скевоморфизме (Skeuomorphism). И напрасно: скевоморфизм и богатый дизайн нельзя отождествлять - это две разные концепции. Скевоморфизм стремится уподобить графические элементы предметам реального мира, чтобы они выглядели привычно и знакомо. Rich design перед собой столь глобальных задач не ставит.
Истоки flat дизайна
Всё, что мы сегодня видим в digital и веб-среде, уходит своими корнями либо в мир печати, либо в мир искусства. Однозначно определить прародителя плоского дизайна у экспертов пока не получается. Однако они услеживают в истории дизайна и живописи несколько периодов, которые вполне могли послужить источником вдохновения для создателей flat стиля.
Швейцарская типографика
Швейцарский стиль (или, как его ещё часто называют, международный типографический стиль) - первое, что приходит на ум, когда поднимается вопрос об истоках flat. Швейцарский дизайн был доминирующим стилем оформления печатной и рекламной продукции на протяжении 1940-1950-х годов.
Его концепция зиждется на применении модульных сеток, шрифтов без засечек, чёткой иерархии контента и ясно структурированных лейаутов. Узнать швейцарский дизайн во времена его расцвета можно было по сочетанию огромных фотографий с простой, минималистичной типографикой.
Кстати, именно в Швейцарии в 1957 г. был создан шрифт Helvetica. Он активно использовался в качестве основного элемента интернационального стиля типографики вплоть до заката эпохи функционального дизайна.
Для справедливости следует отметить, что Швейцарии международный типографический стиль обязан лишь тем, чем в наши дни flat веб-дизайн обязан компаниям Microsoft и Apple - своей популяризацией. Зародился же швейцарский стиль ещё в 1920-х годах в Германии. И своим появлением на свет был обязан школе дизайна и архитектуры Bauhaus.
Минималистичный дизайн
Не меньшее влияние на плоский дизайн оказал минимализм. Этот стиль использовался в архитектуре, изобразительном искусстве и дизайне ещё задолго до появления веба. Определяющей особенностью минимализма является избавление от всего лишнего. Среди других характерных черт можно отметить геометрические формы, немногочисленные элементы, яркие цвета и доминирование простых, чистых линий. Всё это нашло отражение и в плоском дизайне.
Приход плоского дизайна в цифровой мир
Как уже говорилось выше, flat web design повторил историю шведского стиля. Зародившись незнамо, где и когда, он долгое время пребывал в безвестности, пока Microsoft и Apple не соизволили его раскрутить.
Microsoft и Metro Design
Microsoft впервые применил flat в 2006 г., выпустив конкурентный для мегапопулярного iPod Apple медиа-плеер Zune. Тогда ещё уникальный стиль эстетики компании не оформился во всем знакомый дизайн Metro, однако, без сомнений, это был первый его образец. Крупные строчные буквы, большие фоновые изображения, автоматически сменявшиеся с воспроизведением каждого нового трека, обеспечивали безупречный опыт взаимодействия пользователям плеера и десктопной версии Zune.
В октябре 2010 г. Microsoft перенесла опыт Zune на операционную систему Windows Phone 7. С этого момента и начался расцвет дизайна Metro с его огромными яркими блочными панелями, напоминающими модульные сетки, острыми углами, простыми шрифтами без засечек, плоскими иконками и фоновыми фотографиями.
Эстетика стала настолько популярной, что у Microsoft просто не осталось другого выхода, как выпустить Windows 8 в том же стиле. Сегодня Metro используется практически во всём программном обеспечении и на всех девайсах софтверного гиганта, включая Xbox 360 и основной сайт компании.
Отход Apple от скевоморфизма
В то же время, когда Microsoft совершенствовал свой плоский стиль веб-дизайна, Apple начал медленно, но верно отходить от свойственного ему ранее скевоморфизма. Летом 2013 г. компания окончательно отказалась от реалистичной концепции в пользу визуально плоских конструкций. Переход к новой эстетике был ознаменован выходом iOS 7.
Как и следовало ожидать, вместе с Apple на flat перешёл и весь мир. Веб-дизайнеры сразу же отметили современность и привлекательность новой эстетики компании и стали использовать тот же стиль на собственных сайтах и в приложениях. Скевоморфизм в мгновение ока устарел, и все ресурсы, на которых он применялся, подверглись срочному редизайну.
Отзывчивый дизайн
Помимо Microsoft и Apple, стремительному распространению flat в последние годы способствовало развитие отзывчивого веб-дизайна. Респонсивность стала главным требованием эпохи: аудитория хочет с одинаковой долей комфорта взаимодействовать с сайтами как со стационарных компьютеров и ноутбуков, так и со смартфонов, планшетов и сотовых телефонов. Само собой разумеется, лучшей способностью подстраиваться под различные размеры экранов и разрешения браузеров обладают ресурсы без стилизованных текстур, теней и фиксированных изображений.
Flat design оказался более мобильно дружественным, чем rich и скевоморфизм. Без наворотов контент сайтов быстрее и проще воспроизводится на любых типах девайсов.
Плюс ко всему, плоский стиль отлично согласуется с требованием чёткости отображения картинок на мобильных экранах, разрешение которых с каждым днём становится всё выше. В разы удобнее использовать трансформирующиеся в любой формат блоки и шрифты, чем создавать несколько наборов изображений под устройства каждого типа.
Будущее плоского веб-дизайна
По мнению автора оригинала данной статьи, flat дизайн так же не вечен, как и предшествующий ему скевоморфизм. Эмбер Ли Тёрнер предсказывает, что в самое ближайшее время на смену плоским конструкциям придёт что-то новенькое. А возможно, и уже пришло - на роль главного тренда будущего вполне может претендовать материальный дизайн Google.
У него есть определённые преимущества перед flat: в частности, визуальные подсказки, столь необходимые в кликабельном digital мире. Google позаимствовал лучшее у плоского и rich дизайна для разработки оптимального для мобильной среды решения. Материальные конструкции не настолько просты и скучны, как плоские. Одного взгляда на кнопку в приложении Google достаточно, чтобы понять, является ли она влитой или плавающей, и что произойдёт, если на неё кликнуть. Смысловым и интуитивным содержанием материальный дизайн наделяют как раз те самые тени, которых классический flat лишён.
Огромное количество проектов с плоским дизайном вы можете посмотреть у меня в портфолио и заказать для своей компании логотип, фирменный стиль, полиграфию, лендинг. Работаю по безопасной сделки через сервис kwork
