Сравнительно недавно популярным стало такое направление дизайна как FLAT – дизайн или плоский дизайн.
Пользователи Windows 8 и более поздних версий уже знакомы с FLAT – дизайном, так как первое, что встречает их при загрузке системы – это вот такой экран.
Само появление FLAT – дизайна обусловлено распространением мобильных приложений. И я думаю, что обусловлено это тем, что объекты FLAT дизайна создаются с помощью векторных объектов, и соответственно их легче адаптировать под различные платформы гаджетов.
FLAT – дизайн имеет следующие особенности:
Полный или частичный отказ от градиентов, сложных текстур и теней , чему лично я очень рада. К теням я никаких претензий не имею и сама люблю их использовать, а вот извечные проблемы с отображением градиента пусть уходят.
На первый план выходит типографика, , геометрия. Особенно если это касается web – дизайна.
Гармония и . В дизайне используется ограниченное количество цветов. Вот пример популярной палитры FLAT – дизайна.
Использование креативных информативных иконок.
Как я уже говорила, FLAT – дизайн стал очень популярным в мобильных приложениях, так как основной его особенностью является простота верстки и адаптивность. Так же широкое распространение FLAT-дизайн получил в инфографике , так как ставит в основу гармоничность восприятия информации за счет использования конструктивных приемов типографики и колористики .
В свое время самым популярным направлением в web-дизайне был Web 2.0. Теперь его место занял FLAT-дизайн. Мода имеет обыкновение возвращаться к хорошо забытому старому, чтобы сделать из него новое. Кто знает, когда выйдет из моды FLAT — дизайн, а пока наслаждайтесь простотой, гармонией и информативностью текущего веяния. К слову, плоский дизайн уже был популярен в 80-е годы, но тогда это было обусловлено техническими особенностями, невозможностью отображения теней и градиентов. А сейчас уже большинство ведущих IT компании перешли на Flat — дизайн.
Ну чтож, будем и мы подстраиваться под изменчивый мир. В следующей статье я покажу вам, как с помощью проcтых фигур в Photoshop можно создать иконки в стиле FLAT — дизайна.
Если мои публикации заинтересовали вас, то предлагаю , чтобы быть в курсе последних обновлений на сайте сайт.
(Visited 2 635 times, 1 visits today)
Flat - design (плоский дизайн) - это популярный стиль в дизайне сайтов и интерфейсов, а также операционных систем, отличительной чертой которого является простота, утонченность и минимализм. Плоский дизайн стал набирать популярность в 2010 году как противоположность скевоморфизму.
Скевоморфизм — физический орнамент или элемент дизайна, который скопирован с формы другого объекта, но изготовлен из других материалов или иными методами. Примеры включают в себя керамику, украшенную имитацией заклёпок для схожести с аналогичными горшками, сделанными из металла, или компьютерный календарь, который имитирует внешний вид скрепления страниц бумажного настольного календаря (определение из Wikipedia ).
Популяризации плоского стиля в дизайне способствовал выпуск операционной системы Windows 8 от Microsoft в стиле Metro, а также iOS 7, в котором компания Apple также выбирает плоский стиль. Именно после этого и наступает настоящая эра плоского дизайна. Вскоре на Flat -design переходят и крупные поисковые сервисы и приложения - Google , Youtube , появляется множество сайтов, использующих принципы плоского стиля в своем дизайне. В последние годы дизайн в стиле flat является лидером в мировых тенденциях дизайна сайтов .
Преимущества плоского дизайна
- Практичность - использование плоского дизайна позволяет минимизировать количество стилей, скриптов и анимации, что позволяет сайту быстрее загружаться.
- Простота в адаптации - плоский дизайн достаточно просто адаптировать под различные разрешения экранов.
- Удобство использования - благодаря упрощенному стилю пользователям легче воспринимать информацию на сайте.
- Красота - внешняя непредвзятость и простые конструкции позволяют сделать акцент на дизайне, который действительно цепляет.
5 принципов плоского дизайна сайтов
Флэт дизайн совсем не скучный, как может показаться на первый взгляд. Благодаря своей чистоте и утонченности решения дизайна могут быть стильными и красивыми, без лишнего шума, что позволяет сконцентрироваться на вашем товаре либо услуге.
1 - Использование двухмерных объектов
В плоском дизайне исключается использование элементов, придающих глубину и объемность объекту: тени, градиенты, блики, текстуры, рефлексы, анимация. При изображении объекта отображаются лишь его контуры.
2 - Иконки и простые объекты
Использование плоских иконок и односложных фигур с четкими контурами и одного цвета позволяет максимально упростить дизайн и сделать его более легким. Элементы управления становятся интуитивно понятными пользователю и стимулируют к взаимодействию.
3 - Простые шрифты в стиль дизайна
Большое внимание уделяется в плоском дизайне типографике и шрифтам. Здесь не используется курсив, шрифт гармонично вписывается в дизайн сайтов не только в контенте, но и в навигации. Даже в типах шрифта для сайта приветствуется стиль минимализма.
4 - Игра цвета
Flat дизайн содержит нескольких основных цветов, которые исключают использование плавных переходов и градиентов, но могут быть яркими и контрастными по отношению друг к другу.
5 - Минимализм
Плоский дизайн предполагает применение визуализации элементов, использование всей ширины экрана и в то же время минимализацию информации.
Существует такое понятие, как почти плоский дизайн. Это одна из концепций плоского дизайна, которая заключается в использовании простых элементов и двухмерного пространства. Примером этому может быть качественное фото, которое размывается на заднем фоне или затемняется. Это позволяет создать глубину и перспективу объекта.
Примеры плоского дизайна
На просторах интернета, в том числе и в белорусском сегменте, можно встретить много примеров разработок сайтов с плоским дизайном в разных тематикам, в том числе новостные ресурсы, порталы и даже интернет-магазины.
Легкое и располагающее оформление веб-страницы принято считать наиболее правильным. Плоский стиль дизайна сайта целесообразен во многих случаях. Простые интерфейсы зачастую работает лучше, а благодаря общей тенденции к минимализму направление Flat до сих пор актуально (Microsoft и Apple сделали свои ОС плоскими). Используя красивые плоские цвета в дизайна, известные компании не упускают возможности выразить свою индивидуальность, привлечь внимание к бренду или повысить конверсию.
Примеры хорошего Flat-дизайна
Красиво и толково сделанные плоские сайты с удобной навигацией и понятным интерфейсом. Их продуманный, отрисованный дизайн хорошо продает и создает хороший пользовательский опыт.
Launch
Уникальный серо-бело-оранжевый вариант плоского . Красиво выглядят микроитерации в выразительном UI с призрачными кнопками и параллакс-прокруткой размытых фонов. Cкролл-эффекты, вроде липкого меню и перекрытия футера бэкграундом тела страницы, визуально делают сайт компактней.
eTecc Interactive
Простой дизайн сайта американского агентства не выглядит заурядным, т.к. сделан качественно и со вкусом. Старая школа дизайна работает не хуже новаций, может выгодно представить компанию и ее услуги.
Nehora Law Firm
Чистый плоский дизайн с утонченными элементами придает сайту калифорнийской юридической фирмы профессиональный вид. Красиво оформлены шапка и футер. Белый цвет и оттенки золотистого на темно-бирюзовом фоне создают красивый мягкий контраст. Ориентированный на пользователя интерфейс страниц позволил упорядочить контент.
Towa
У wordpress-сайта немецкого агентства приятный минималистичный дизайн с HTML5/CSS3 эффектами и . Пастельные / серо-золотистые оттенки, цветокоррекция фотографий и модульная разметка помогли красиво оформить сайт в виде коллажа интересных фактов о компании.
Amazee Labs
У сайта швейцарских Drupal-разработчиков лаконичный дизайн с приятными цветосочетаниями. Креативно оформлены элементы призыва к действию, применяются Flat и техники HTML5/CSS3.
Space Needle
«Космическая игла» символ Сиэтла. У сайта и главная страница с отрисовкой фонов. Уникально оформлена прокрутка с эффектами осветления и мини-слайдами в конце.
Build in Amsterdam
У голландского брендингового агенства красивый флэт-сайт с нестандартным меню навигации. Приятно и стильно оформлен интерфейс, хороший .
The Yellow Conference
Оптимистичным контентом, ярким желтым цветом и сайт настраивает на позитив.
Joy Intermedia
Сайт международного креативного агентства из Польши с плоским дизайном на CSS3 и хорошим UX. Сайт использует с боковой и нижней панелями и удобен в пользовании.
Fuse Lab Creative
Хорошо структурированный, дружественный к пользователю сайт американского агентства с удобным полупрозрачным боковым меню, панелью проектов и ненавязчивыми мини-интро в главном экране.
Chobani
У небольшой b2b компании приятный и очень удобный кулинарный сайт с чистым дизайном на основе HTML5. Представить ассортимент помогают фиксированное выпадающее меню и оригинальная четырехуровневая система вторичной навигации.
Уникальный Flat Design и плоская стилистика
Подобраны примеры уникальной плоской стилистики, которые доказывают – флэт интерфейсы бывают эффективными, интересными и привлекательными. Сочетая выразительную графику с приятным шрифтовым контрастом, добавив немного анимации и микроитераций можно не только сделать творческий или деловой сайт красивым, но и показать свою индивидуальность, выразить дизайном основной посыл.
RJ Investments
Сайт британского агентства недвижимости со стильным лаконичным flat-дизайном в серо-белых тонах. Мягкую выразительность добавляет акцентный золотистый цвет. Основан на WordPress HTML5/CSS3, jQuery, SVG.
Ttilted Chair
Экспрессивно оформленный сайт – типографика становится визуально интересней, когда с минималистичностью и плоским стилем в дизайн возвращаются броские цвета. Притягивающим внимание красным заголовкам в портфолио отведена роль «трамплина».
FHOKE
Чистый, плоский дизайн и уникальный пользовательский интерфейс сайта. Изображения в фокусе внимания, в т.ч. продуктовые c компьютерами и айфонами (фотографии выведенные отдельным слоем выглядят реалистично).
Nation
Запоминающийся, яркий и динамичный сайт студии из Лондона. Контурный заголовок на компактной главной странице не останется незамеченным, также как эффектные призрачные кнопки в портфолио / кейсах. Используются зацикленное фоновое видео, фотобекграунды с размытием и цветокоррекцией, стильные анимации, переходы, прелоадер загрузки страниц. Выразительным дизайном в синих тонах передается посыл о надежности студии & энергичности команды.
Mayven Dev
Mayven Dev – креативная команда 30 кодеров / UX-дизайнеров из Сан-Франциско. Их сайт отличают сдержанная эстетика оформления, индивидуальность стиля, приятные цветовые решения с выразительными контрастами белой типографики и анимированной контурной графики на изумрудном фоне.
HughesLeahyKarlovic Agency
Чистый и аккуратный дизайн сайта американского агентства сразу настраивает на позитив. Уникально оформлено навигационное меню: hover-эффект с наложением цветового фильтра обращает фоновую картинку в закольцованное видео.
Satis Satellite Communications
Обширный сайт российского оператора спутниковой связи. Бизнес-эстетика реализована через плоский стиль дизайна с контурными иллюстрациями.
Иллюстрации, эффекты и креатив в плоских дизайнах
Примеры динамичных дизайнов, креативного флэт-оформления и удачного сочетания плоской иллюстрации с анимацией. Современный Flat позволяет совмещать элементы игрового дизайна с реалистичным контентом деловых сайтов.
Tectonica Studios
Дизайнер применяет плоскую графику с градиентами (актуальный web тренд), блок ярких flat-иллюстраций на главной странице. Для привлекательного разделения секций – свободное пространство и анимированная графика.
Pixity-land
Микросайт с классическим Flat-дизайном использует скролл-анимацию, плоские иллюстрации и видео.
100 Years of Design
Креативный веб-проект дизайнерского сообщества AIGA. Плоскими цветами обозначены пункты меню, открываемые разделы, навигационные hotspot-точки и разделенные пополам окна с каруселями иллюстраций.
Drap Agency
Эффектный, броский колоритный сайт креативного агентства, ориентированного на технологии. Тут ценят дизайнерское новаторство и любые новшества в подаче информации.
Mobkii
Без плоских иллюстраций с градиентами сайт мексиканского агентства выглядел бы скучноватым, а дизайн слишком заурядным для разработчиков web & приложений.
Ecodom Consorzio
Официальный сайт итальянской компании, занимающейся оживлением бытовой техники и утилизацией. Оживленный зеленый дизайн, интерактивные и динамичные эффекты подходят веб-сайту организации с таким родом деятельности.
Thing of Wonder
Проект предлагает ознакомиться с вещами интересными любознательным людям, сообществом и мероприятиями для расширения кругозора. Начиная с абстрактно оформленного главного экрана, оригинальный дизайн вовлекает эту аудиторию.
Green Man
Сайт служит гидом по Уэльскому фестивалю. Желто-зеленый дизайн и анимация с креативной плоской графикой соответствуют как доменному имени, так и позитивным целям проекта.
Читайте также: Сочетание цветов в веб-дизайне - зеленые сайты
Amelia Thompson Portfolio
Одностраничное из Чикаго. У Амелии интересное портфолио работ в плоском стиле.
Читайте также: 30 стильных сайтов агентств и персональных портфолио дизайнеров
DoneDone
Сайт системы управления проектами с баг-трекером красиво оформлен в стиле Flat. Яркие цвета, плоскую графику / видео и контрастную кнопку с призывом невозможно не заметить.
Peppermint
Креативный сайт польского digital-агентства применяет геометрические фигуры и невообразимые анимации, иллюстрации, фотографии, рисунки.
Geex Arts
Сайт молодой московской веб-студии впечатляет высокотехнологичным ультра-современным дизайном и входит в ТОП 40 digital-агентств. Его отличают стильное навигационное меню, эффектные переходы, интерактив, анимация и хороший UX при нестандартных решениях.
DAESK
У сайта немецкой студии захватывающий продающий дизайн на HTML5 и нестандартное меню навигации. Возбуждающие кислотные цвета продают продукт (трекер учета рабочего времени). Ховер эффекты с параллакс прокруткой фиксируют внимание на кнопках с призывами и социальных доказательствах. После великолепно оформленных отзывов, стартовая страница отсылает к кейсам / историям клиентов. Интерактив на векторном фоне запускает продающую видеграфику.
Fcinq
Сайт французской креативной студии: стильный плоский дизайн начинается с красивой предзагрузки. Привлекательным этот дизайн делают цветокоррекция фотографий и уникальные цветовые сочетания.
D.FY
Гибкий сайт корейского агентства с креативными видео в фоне. Современный чистый дизайн на html5/css3. В полноэкранном навигационном меню впечатляет эффект бесшовных переходов.
Brave People
Прошлые редизайны сайта креативного агентства из Флориды отмечались в творческом ТОП-е. Сейчас у Brave People эффективный дизайн с понятным и компактным флэт-интерфейсом.
Nea Media
Французский производитель игрушек & видеоигр использовал стиль FLAT и веб-дизайна. Созданный на ВордПрессе сайт удивляет модным дизайном.
Llittle Flyers
Австралийский сайт детской тематики с сочными плоскими цветами. Контрастные рубленые шрифты выдвигают призывы на передний план и сочетаются с крупными элементами дизайна.
Ic creative
Сайт английской студии выделяется крупными заголовками с призывом и СТА-элементами акцентного оранжевого цвета.
FATbit
Объемный сайт веб-разработчиков из Индии сделан на wordpress и отличается оформительским разнообразием с микро-взаимодействиями и анимированными иллюстрациями. В шапке и футере красный плоский цвет акцентирует CTA-призывы. На главной странице фиксированные фоны с цветокоррекцией, поддерживается перетаскивание слайдов в каруселях (первый экран, социальные доказательства, промо на полупрозрачных плашках).
Domain Menada
Продолжая 100-летнюю традицию качества, болгарский винодел впечатляет посетителей предзагрузкой анимированного штопора. Темный плоский дизайн с мягким контрастами, творческой обработкой фотографий и неизбитыми решениями продает идею элитности бренда.
Frans Hals Museum
У сайта нидерландского арт-музея необычный дизайн в стиле Flat с гигантскими заголовками рубленым шрифтом. Разобраться в нестандартном горизонтальном & вертикальном меню помогают иконки навигации.
Meticulosity
Флэт сайт разработчиков из технологической долины штата Нью-Йорк. Выразительный, чистый дизайн с геометрией и фиксированными фонами. Красивые контрасты в шапке, футере, секциях с кнопками CTA.
Лендинги и продающие дизайны в стиле FLAT
Привлекательность и яркость главной или внутренней страницы помогают выразить уникальное предложение. Лендинговое оформление сайта расширяет возможности применения Flat и повышает шансы на дальнейшее взаимодействие с клиентами. Цель продающего и лэндингового дизайна – обеспечить высокую конверсию. LP-сайт или посадочная страница запоминаются интересным или необычным дизайном.
Сегодня мы сосредоточим наше внимание на одном из самых популярных направлений современного графического дизайна, который называется флэт дизайн.
Известный художник Эдгар Дега однажды сказал: «Искусство — это не то, что вы видите, но то, что вы даете увидеть другим». Это касается и графического дизайна, который также можно определить как искусство, решающее конкретную задачу. Графический дизайн способен изменять настроение и сообщение через малейшие изменения форм и оттенков, букв и интервалов. Тенденции в этой сфере, которые стали неотъемлемой частью повседневной жизни, поскольку они влияют на процесс принятия решений и решения проблем представления современного продукта, а также формируют вкусы пользователей.
Сегодня термин «флэт дизайн» применяется в графике для множества целей и задач, которые имеют общие стилистические особенности. Флэт дизайн — это направление, которое нашло множество проявлений в сфере диджитал продуктов, благодаря лаконичному использованию визуальных выразительных средств.
В настоящее время этот термин широко используется как противоположность «богатому дизайну» из-за гармоничной простоты, взятой за основу этого подхода. Наиболее заметной особенностью, которая дала название этому направлению, является применение плоских (flat) двумерных визуальных деталей, в противоположность высокореалистичным и детализированным скевоморфным изображениям. Плоский дизайн активно развивается в течение последних лет, охватывая все больше и больше областей графического дизайна, которые находят широкое и разнообразное применение в области цифрового дизайна для веб-и мобильных интерфейсов. Такой подход можно рассматривать как стиль, способствующий повышению удобства использования и визуальной гармонии пользовательских интерфейсов.
История флэт дизайна
Очевидно, что флэт дизайн не появился из воздуха. Его истоком обычно считают швейцарский стиль. Швейцарский стиль, также известный под названием International Typographic Style или более коротко — международный стиль, — это направление, которое зародилось в 1920-х годах, но было встречено очень критично, а затем получило яркое перерождение в графическом дизайне в Швейцарии 1940-50-х годов, ставшим прочной основой графического дизайна середины 20-го века во всем мире. Основоположниками этого творческого движения были Йозеф Мюллер-Брокманн и Армин Хофманн.
Согласно сайту Design Is History, краткое описание ключевых особенностей этого стиля заключается в следующем: «… стиль ориентировался на простоту, удобочитаемость и объективность. Наследие этого стиля — использование шрифтов без засечек, сеток и асимметричных макетов. Также выделяется и фотографии как средства визуальной коммуникации. Основные влиятельные работы были разработаны как плакаты, которые считались наиболее эффективным средством предоставления информации».
Плакаты, представленные в качестве примеров, показывают, что приверженцам этого стиля нравились простые формы, смелые и строгие шрифты с высокой степенью удобочитаемости, геометрические комбинации деталей, плоские иллюстрации и четкая визуальная иерархия. Швейцарский дизайн быстро становился все более популярным в разных странах и получил новую жизнь в искусстве начала XXI века.
Хоть этот стиль получил множество выражений в области визуального дизайна для печати: плакаты, штампы, открытки, обложки книг, журналы и т. д., он значительно расширил свои горизонты в эпоху цифрового дизайна, особенно в области дизайна пользовательских интерфейсов.
Веб-сайты и мобильные приложения, открыли удивительную и плодотворную перспективу для этого минималистичного и функционального подхода к дизайнерским решениям. Стиль получил название «флэт дизайн», который стал сразу популярным и начал новое направление в графическом дизайне.
Первый шаг к повышению популярности плоского UI в цифровых продуктах был сделан Microsoft, это движение началось в начале 2000-х годов и широко развилось в продуктах 2010 года, в частности, в разработке мобильных интерфейсов для Windows Phone 7. Основные особенности плоского дизайна, такие как интуитивные простые формы, жирная четкая типография, яркие контрастные цвета, длинные тени, отсутствие сложных деталей и текстур, хорошо прижились. Следующий скачок популярности флэт дизайна произошел в 2013 году, когда Apple выпустила iOS 7 на основе принципов плоской графики в качестве основы для удобных интуитивно понятных интерфейсов. Можно также сказать, что некоторые ключевые принципы плоского дизайна нашли свое выражение в Material Design от Google.
Так основными особенностями плоского дизайна стали:
- простота форм и элементов;
- минимализм;
- функциональность;
- жирная и хорошо читаемая типографика;
- четкая и строгая визуальная иерархия;
- комбинация контрастных цветов, обеспечивающая быстрое визуальное восприятие;
- избегание текстур, градиентов и сложных форм;
- применение принципов сеток, геометрический подход и визуальный баланс.
Преимущества плоского дизайна
Фдат дизайн имеет ряд преимуществ, определивших его популярность и разнообразие в цифровом дизайне. Среди из наиболее значительных:
- удобочитаемость;
- четкая визуальная иерархия с помощью форм, цветов и шрифтов;
- эффективная организация быстрой и интуитивно понятной навигации в веб- и мобильных интерфейсах;
- легкая масштабируемость для адаптивного дизайна;
- незначительная нагрузку для цифровой системы.
Со всем вышесказанным, плоский дизайн обеспечивает широкое поле для творческого поиска и стилистических концепций.
Флэт дизайн — применение на практике
Разнообразие направлений дизайна, доступных и развивающихся в наши дни, хорошо подходят для применения флэт дизайна из-за его гибкости и художественной свободы.
Даже на начальном этапе планирования общей компоновки, логики и переходов могут применяться принципы плоского дизайна. Инструменты и программное обеспечение для цифрового дизайна, используемые на этом решающем этапе, позволяют дизайнерам представить клиентам и команде единую схему всех экранов приложений или веб-страниц, и даже эта базовая схема уже имеет ключевые черты визуализации, типичные для плоского дизайна. На этом этапе он идеально подходит для быстрого и эффективного отображения дизайнерских решений, приведенных в простой монохромной схеме.
Дизайн пользовательского интерфейса
Пользовательские интерфейсы определенно стали широким и благоприятным полем для плоского дизайна. Он нашел свое развитие как в абстрактных концепциях взаимодействия с пользователем, так и во множестве оригинальных интерфейсов, иконках, элементов интерфейса и иллюстрациях.
Подобные иллюстрации обеспечивают дополнительную поддержку цифровых продуктов и, как правило, более сложны с точки зрения детализации и удовлетворения эстетических потребностей пользователей, в то же время мгновенно устанавливая связь с конкретной темой.
Печатные иллюстрации
Разнообразие целей современного флэт дизайна и его растущая популярность в цифровых продуктах также повлияли и на другие области дизайна, в частности на дизайн для печатных изделий, таких как плакаты и обложки книг, из которых, этот подход брал когда-то свое начало.
Брэндинг
В наши дни бренд-дизайн также успешно применяет принципы плоского дизайна благодаря его гибкости, поскольку многие продукты представлены на устройствах или получают цифровую поддержку в Интернете. Флэт дизайн в брендинге часто представлен в логотипах и иконках приложениях.
Все факты и преимущества, упомянутые о флэт дизайне, определенно, не означают, что этот стиль победил другие подходы к дизайну. Любой стиль и направление дизайна имеют свои преимущества и недостатки. Тем не менее, плоский дизайн открыл новые перспективы, особенно в области пользовательских решений, которые представляют гармоничный баланс красоты и функциональности.
Что такое флэт-дизайн? Данное направление дизайна является одним из самых обсуждаемых в интернете. Если коротко, то флэт-дизайн это предельно упрощенный стиль, корни которого уходят в минимализм. Но это не совсем минимализм, так как данный стиль может принимать самые разные формы в зависимости от требований к дизайну. Чтобы лучше понять, что же собой представляет плоский (flat) дизайн, лучше пойти от обратного и определить, чем он точно не является.
Это не 3 D . Сама по себе 3D-графика позволяет получить очень реалистичные, но при этом двухмерные изображения. В отличие от 3D в плоском дизайне не уделяется большого внимания деталям, которые создают глубину и объем, таким, как тени, блики и текстуры.
Это не скевоморфизм . Флэт-дизайн появился в качестве альтернативы псевдообъемным элементам дизайна, которые имитировали реальные объекты или процессы. Скевоморфизм предполагает активное использование различных эффектов: теней, отражений, рефлексов и реалистичных текстур. Ничего этого во флэт-дизайне нет и быть не может.
Впервые о плоском дизайне заговорили в 2012-2013 годах, когда этот стиль только появился. Тренд был очень заметный и наделал много шума, так как одним из первых, кто начал развивать это направление, была компания Microsoft. Выход Windows 8 с новым интефейсом навсегда изменил дизайн и в значительной степени предопределил вектор развития веба, по крайне мере, его визуальной составляющей.
Не осталась в стороне и Apple, которая также отказалась от псевдообъемных элементов в дизайне интерфейсов своих устройств. Microsoft и Apple сформировали новую реальность, в которой сайтам с устаревшим дизайном не было места. При этом Apple поступила не так радикально, как ее вечный конкурент, и избавлялась от элементов скевоморфизма постепенно.
Сам по себе флэт-дизайн не плох и не хорош, удобным или неудобным его делают веб-дизайнеры. Но если говорить начистоту, в своих крайних проявлениях плоский дизайн выглядит не слишком эстетично. Вероятно, зона наилучшего восприятия в этом случае находится где-то посередине между плоскими и псевдообъемными элементами.
Вполне возможно, что доминирующий на протяжении нескольких последних лет тренд на предельное упрощение сменится чем-то другим. Кое-какие предпосылки к этому существуют – например, направление Material Design, созданное дизайнерами корпорации Google.
СОВМЕСТИМОСТЬ С АДАПТИВНЫМ ДИЗАЙНОМ
Отказ Microsoft и Apple от скевоморфизма в дизайне интерфейсов вызвал большие последствия. Новый стиль был практически сразу принят в качестве нового подхода к UX. С тех самых пор флэт-дизайн превратился в доминирующий тренд, который по-прежнему остается актуальным. Сегодня плоские элементы встречаются повсеместно, мы видим их на сайтах, в приложениях и на дисплеях различных устройств.
Принципы флэт-дизайна применимы к самым разным категориям проектирования, но его строгие сетки и упрощенная графика как нельзя лучше отображаются на устройствах с небольшим размером экрана.
Тренд на минимализм во многом упростил работу дизайнеров – им стало легче проектировать интерфейсы, которые корректно отображаются на любом типе устройства. В случае с псевдообъемными элементами все было не так – порой интерфейс, который потрясающе выглядел на экране десктопа, превращался в тыкву нечто невнятное на мобильном устройстве.
Одним из главных преимуществ флэт-дизайна является его масштабируемость. Плоские элементы хорошо смотрятся независимо от размера и с ними, в отличие от pixel-perfect дизайна, гораздо проще работать.
ГИБКАЯ ПЛАТФОРМА
Флэт-дизайн в своем стремлении к простоте отличается хорошей гибкостью: все элементы, как правило, созданы из однородных геометрических фигур, что упрощает создание сбалансированной компоновки, где каждый модуль или блок имеет свое место. Все элементы при этом легко различимы и, что немаловажно, во время работы их можно быстро менять местами, не нарушая изначальных установок.
Сетки также имеют гибкую структуру, которая может быть представлена во множестве конфигураций. Это позволяет дизайнерам создавать наиболее оптимальные подходы, которые наилучшим образом демонстрируют имеющийся распоряжении контент. Отсутствие ограничений и необходимости корректировать сетку в случае изменения или добавления новых элементов существенно ускоряет рабочий процесс.
ЧИТАЕМАЯ ТИПОГРАФИКА
Флэт-дизайн существенно изменил отношение дизайнеров к типографике. Новый стиль требовал иного подхода к выбору шрифтов и к качеству верстки. В результате отсутствие теней и различных эффектов сделало тексты более удобными для чтения.
Для плоского дизайна характерно широкое использование шрифтов без засечек, однако, это не акисома и серифы также могут хорошо смотреться в сочетании с плоскими элементами. Шрифты с засечками будут вполне уместны в качестве заголовка, также их можно использовать и в основном тексте, если типографика не нарушает композиционного единства.
МИНУСЫ
Может показаться, что у флэт-дизайна нет недостатков, но это не так. В своем стремлении подчеркнуть чистые линии и формы, некоторые дизайнеры попадают в ловушку: они фокусируются на эстетике и при этом забывают о юзабилити. Простой и красивый дизайн, в котором нет ничего лишнего, не всегда бывает удобным и особенно ярко проявляются такие ошибки при использовании мобильных устройств.
В плоском дизайне зачастую бывает трудно определить, какой элемент является интерактивным, а какой нет. Все одинаковое, нет явных отличий, все элементы лежат в одной плоскости. В погоне за простотой дизайнеры могут ненароком скрыть или невольно замаскировать важные особенности или действия и пользователь, не видя привычных подсказок, может потерять ориентацию на сайте.
Возьмем для примера вот этот сайт. Какие элементы в нем являются интерактивными. Все? Или только некоторые? Непонятно. Выяснить это можно только «методом тыка», но это уже лишние движения, что нежелательно.
ПОТЕРЯ ИНДИВИДУАЛЬНОСТИ
Для любого бренда, бизнеса или дизайн-проекта огромное значение имеет уникальность. Будь то сайт, приложение, буклет, плакат или визитка – дизайн должен быть оригинальным и хорошо узнаваемым.
Одним из недостатков флэт-дизайна является его визуальный стиль. Использование простых геометрических форм часто приводит к тому, что два совершенно разных дизайна могут оказаться очень похожими друг на друга. Дизайнеры, которые используют плоские элементы, ограничены в своих возможностях, так как у них в распоряжении не слишком большой выбор приемлемых вариантов. В последнее время в интернете можно увидеть множество сайтов-клонов, которые на самом деле клонами не являются. Это просто совпадение. Причем совпадение неприятное, так как сайт утрачивает крайне необходимую ему индивидуальность, теряясь на фоне других ресурсов с аналогичным дизайном.
Иногда доходит до смешного. Глядя на эти картинки, можно подумать, что перед нами разные разделы одного и того же приложения. Но нет, дизайнеры Марко Ла Мантиа и Симоне Липполис работали независимо друг от друга. В качестве главных элементов дизайна используются основные геометрические фигуры и белый шрифт без засечек – решение более чем логичное. Но результат плачевный – одинаковая цветовая схема напрочь лишила дизайн уникальности. И таких случаев масса.
ПОГОНЯ ЗА МОДОЙ
Плоский дизайн еще долго будет оставаться одним из самых актуальных трендов, просто потому, что он хорошо смотрится на дисплеях мобильных устройств. Но многие дизайнеры выбирают флэт не только из-за того, что он позволяет быстро решить большинство поставленных задач, но также и из-за своего стремления создать нечто современное и модное.
Однако в погоне за модой можно допустить серьезную ошибку: если бездумно следовать за всеми трендами, вполне реально забыть о полезности дизайна. Флэт может быть очень красивым, элегантным и даже изящным, но все-таки выбор дизайнера должен быть обусловлен функциональностью, а не стремлением к красоте. Порой желание «впихнуть» в дизайн что-нибудь модное только вредит, например, длинные тени, одна из самых узнаваемых фишек плоского дизайна.
Перед нами работы дизайнеров Александра Лотоцкого и Эрика Мальмскельда. Это типичные примеры использования длинных теней в дизайне. Сейчас этим никого не удивишь, но в свое время, а обе работы были созданы еще в 2013 году, когда флэт-дизайн только-только входил в моду, новый визуальный стиль был очень интересным и привлекательным. В результате появилось такое количество похожих иконок, что сегодня использование теней является шаблонным и неинтересным решением. Когда-то было модно, но уже нет. Тени как тени. Смысла в них нет никакого, никакой полезной функции они не выполняют.
НЕУДАЧНЫЙ ВЫБОР ШРИФТОВ
Каждый дизайнер мечтает создать нечто красивое и при этом функциональное. Но в погоне за эстетикой, можно сделать неудачный выбор, который повлияет на юзабилити. В качестве примера можно привести повальное увлечение тонкими и светлыми шрифтами. Такая типографика выглядит чистой и легкой, но при этом она плохо читается.
Иногда выбор тонкого шрифта бывает оправдан – например, для использования в заголовках. Но когда тем же шрифтом набирается основной текст, то зачастую прочитать его невозможно. Особенно заметны подобные ошибки на мобильных устройствах – маленький размер экрана резко снижает читаемость контента.
FLAT 2.0
В течение нескольких последних лет дизайнеры экспериментировали с плоскими элементами и привнесли во флэт-дизайн много нового. Стиль вполне сформировался и как всякий другой устоявшийся стиль, он имеет свои плюсы и минусы.
На заре своего появления флэт отличался строгой визуальной простотой, в нем не было намека на тени и структуры. Даже градиенты были не в почете, хотя они никак не противоречат принципам плоского дизайна.
Но постепенно дизайнеры стали уходить от слишком простых решений, пытаясь найти некое компромиссное решение между флэтом и скевоморфизмом. В результате появился новый стиль, который некоторые дизайнеры называют Flat 2.0. В элементах дизайна постепенно стали появляться тени, градиенты и даже легкие, почти незаметные структуры. Плоскому дизайну явно не хватает глубины, и дизайнеры начали использовать гибридные подходы. Например, визуально располагать элементы на разных уровнях, экспериментировать с оттенками и тенями. Другим часто используемым примером гибридного подхода является использования во флэте не только значков и плоских иллюстраций «под вектор», но и фотографий.
Очень много для продвижения Flat 2.0 сделала компания Google. Гайдлайн Material Design – это попытка создать новый визуальный язык, объединяющий плоские и объемные элементы дизайна. Рекомендации Google очень подробны и следовать им легко и просто. При этом Google не настаивает на жестком соблюдении всех правил, изложенных в гайдлайне – дизайнеры могут экспериментировать, создавая свои оригинальные проекты, где могут сочетаться самые разные элементы.
ВЫВОД
Сегодня Flat 2.0 находится на стадии формирования, но уже вполне различимо направление, в каком будет развиваться этот стиль. Существенных изменений не предвидится – законодатели мод Google, Apple и Microsoft не собираются отказываться от флэта. Если изменения и будут, то незначительные – появятся новые подходы, кто-то придумает интересную «фишку», продолжатся попытки взять самое лучшее из скевоморфизма. Но в глобальном смысле ожидать чего-то действительно нового не приходится – плоский дизайн тренд долговременный и сместить его с завоеванных позиций сможет только стиль, наилучшим образом отвечающий новым технологиям, которых пока еще нет.
