Земля всё же плоская: стиль flat в дизайне. Флэт-дизайн: прошлое, настоящее и будущее Плоская графика в стиле flat
Flat дизайн -это ключевое направление в дизайне на ближайшие годы, поэтому предлагаем познакомиться с ним ближе и узнать 5 основополагающих принципов, легших в его основу.
Знакомство с flat дизайном
На русском языке flat design переводится как «плоский дизайн», а стал он абсолютным фаворитом после презентации Apple ОС iOS. Во главу угла встал минималистичный подход к дизайну для юзабилити. Ставка сделана на комфорт пользователя. Это ярко выраженный протест против «сквеформизма» (визуализация объектов, как в реальности). Выбор пал на более упрощенные и при этом простые в эстетическом плане решения. Пользователи, уставшие от реалистичных визуализаций, с восторгом встретили это направление, и все больше web-проектов переходят именно к этому формату.
Хочется отметить, что «плоско» - не значит «скучно». Решения flat дизайна могут быть красивыми, они более утонченные, чистые, избавленные от избыточности чего-либо, трансформируясь в «островок спокойствия». Они, наконец, делают контент понятным. Осталось узнать основные принципы, чтобы применять их на практике.
Принцип №1: долой ненужные эффекты«Плоский» дизайн не стремится передавать объемы, поэтому в основе лежит двумерная визуализация. Это значит, что вы не увидите ни теней, ни рефлексов, ни бликов с текстурами (исключение составляют длинные тени). Только передача контуров, и ничего более.
Рекомендуется использование односложных фигур в дизайне, как и следить за четкостью контуров, что призвано подчеркнуть легкость и невесомость. Кроме того, такие лаконичные элементы хорошо имитируют сенсор, порождая желание к взаимодействию с объектом (призыв к нажатию, прикосновению). Впрочем, простота элементов не равна простоте дизайна в целом - это относится только к очертаниям. В результате, все, что видит пользователь, ему понятно, и он может с легкостью этим пользоваться.
Флэт дизайн призывает крайне осторожно работать со шрифтами. То есть их характер обязан дополнять дизайн-схему, не противореча ей. Более того, во флэт дизайне шрифт - это еще и ключевой навигационный элемент.
Не только шрифт, но и цвет -существенная часть в «плоском» дизайне. В подавляющем большинстве палитры базируются на 2-3 цветах, хотя, конечно, есть и исключения. Обычно выбираются сочные и яркие, но при этом чистые цвета. Как было отмечено, нет никаких градиентов и излишних переходов.
Flat дизайн - это яркий пример такого всемирного тренда, как минимализм. Дизайнеры отказываются от излишних «наворотов», уходят от сложных и неявных подходов к визуализации, что дает свои плоды в виде пользовательской активности.
Плоский или почти плоский? Ищем компромисс!
В завершение хочется отметить, что сегодня имеет место быть синергия между плоским и неплоским дизайном. Речь идет о «почти плоском» дизайне. Это наиболее распространенное применение описанного концепта, когда вместе с простыми и лаконичными элементами и двумерным пространством дизайнеры применяют 1-2 приема для глубины и перспективы.
Также трендом 2017 года стал Semi Flat Design - полуплоский дизайн. Под влиянием Material Design, он стал немного более пространственным. Появляются легкие тени, которые делают дизайн полуплоским. Флэт-дизайн актуален и сегодня, за счет теней он стал глубже и сложнее, но основная концепция не нарушается.
Плоский (Flat) дизайн, в наши дни заполонил практически весь простор интернета. Его можно встретить на всех типах сайта, совершенно разной тематики. Это и не удивительно, так как он современный стильный и конечно же простой. Но проблема в том, что многие люди очень часто принимают плоский дизайн за минимализм. Таким образом получается своеобразная путаница.
Как оказывается, что это совершенно 2 разных понятия, и мы сегодня постараемся с Вами разобраться в этом вопросе.
Flat дизайн — это не минимализм
Плоская конструкция сайта представляет собой только визуальное соотношение. Это значит, что здесь упор идёт только визуальное восприятие человека. Это как бы стиль дизайна. Вот Вам пример: есть сайты, которые имеют дизайн построенный только на иллюстрациях, а есть такие которые построены на блоках залитых одним цветом. То же самое и с плоским дизайном, это как один из видов дизайна, его отличие лишь в том, что он выглядит немного упрощённым.
Минимализм, в свою очередь, это философия дизайна для сайта. В этом случае дизайнером делается максимальный упор на самое удобное расположение элементов на странице. Выбираются интуитивно понятные места, чтобы человеку было просто ориентироваться. Хотя некоторые элементы дизайна могут смотреться глупо и безвкусно, но очень удобно.
Плоский дизайн и минимализм можно сравнить одним простым примером из жизни. Возьмём обычную книгу, в ней элементарные чёрные буквы на белой бумаге — это настоящий минимализм, который никогда не умрёт. А самая современная электронная книга — это плоский дизайн. И многие берут эту электронную книгу потому что это модно и современно. Но согласитесь, что обычную книжку ничего не заменит.
Важен ли в дизайне минимализм?
Это у же зависит от конкретного проекта. Например, если Вы дизайнер, то несомненно нужно учитывать некоторые Важные моменты. А так в принципе всё зависит от заказчика, нужен ли ему такой дизайн вообще? Я считаю, что такие вопросы нужно обсуждать индивидуально.
Во-вторых поможет ли Вам минимализм в привлечении посетителей на сайт? Мне почему то кажется, что не всегда, всё же большая часть зависит от вида контента на Вашем проекте. Тем более есть такое понятие как «слишком» минимализм. Вот такой сайт вряд ли будет удобным для пользователя. Но есть и исключения. Если Вы уверены, что такой дизайн понравится пользователям, тогда пробуйте и делайте.
Останется ли плоский дизайн?
Никто и никогда не может сказать наверняка. Возможно, что IPhone и IPad совершили дизайн революцию во всех мобильных девайсах и останутся такими навсегда. А может быть и такое, что какой нибудь уникальный человек в скором времени создаст, что то более интересное, и о плоском дизайне просто все забудут.
То, что делает тенденции скорее всего создаётся не сразу, а многими дизайнерами на протяжении нескольких лет. Например, если Вы повар, Вы с лёгкостью сможете добавить в своё блюдо какой нибудь экзотический продукт, таким образом получится настоящий шедевр. Но в любом случае, Вы не можете игнорировать все элементарные правила и принципы приготовления пищи. Если дизайнер имеет чёткое представление, что он делает и придерживается всех принципов, то в скором времени это будет шедевр, и ещё чуть позже — тренд.
Что выбрать?
Опять повторюсь, всё зависит прямо от того, что Вы хотите. Сколько существует людей столько мнений и пожеланий. Но по моему мнению не стоит пренебрегать этими двумя видами дизайна. С одной стороны, минимализм никогда не умрёт, а вот Flat дизайн он сейчас только сильно популярен, но не известно на протяжении которого времени он таковым останется. И вообще, нужно идти в ногу со временем, а не останавливаться на дизайне 90х. Ну правильно ведь?
Какое Ваше мнение?
Друзья, а какое Ваше мнение по этому поводу? Как Вы считает долго ли продержится плоский дизайн или же займёт твёрдое место в мире дизайна?
Плоский дизайн или flat-стиль существовал ещё в 80-е годы и не имел альтернатив, так как уровень технологий не позволял работать со сложными текстурами. Со временем появились сначала простые элементы скевоморфирзма (имитации реальных объектов), а затем и сложные отображения визуальной псевдовыпуклости.
Мода циклична и с 2010 года плоский дизайн быстро восстанавливал популярность, пока в 2014 году не стал новым стандартом компьютерного дизайна.
Эволюция flat-дизайна
Изначально плоский дизайн задумывался как полная противоположность сквеморфизма. Отрицались тени, градиенты и любые намёки на объём. Первой эту концепцию воплотила компания Microsoft. Но после юзабилити-тестирования выяснилось, что пользователи с трудом идентифицируют некоторые элементы интерфейса. Так, фокус-группа не могла понять какая иконка кликабельная, а какая нет, ведь все они плоские. Ещё больше проблем возникло с кликабельными надписями, потому что выглядели они как стандартная подпись к объектам.
В связи с этим, появилась адаптированная версия плоского дизайна - flat 2.0 или наполовину плоский дизайн. Он имеет слабый контраст и едва различимые тени, которые показывают пользователю, что иконка кликабельна. Когда говорят о плоском дизайне, имеют в виду именно версию flat 2.0. С развитием данного стиля псевдотени и легкий контраст был снова сменен на полную плоскость объектов. При этом в веб для понятия кликабельности элементов стала использоваться просто смена цвета на контрастный в таком же плоском стиле, без использования градиентов.
Принципы плоского дизайна
1. Двухмерная графика.
В плоском дизайне акцент делается на контурном изображении объекта. Дизайнер не стремится к реалистичности, его задача - передать суть, используя простые двухмерные формы.
2. Иконки.
Использование простых иконок с прослеживающимся призывом к действию (иконка дискеты или облачного хранилища, призывающая сохранить файл) делает интерфейс более лёгким и понятным интуитивно.
3. Простые шрифты.
Flat стиль большое внимание уделяет типографике в целом и шрифтам в частности. Плоский дизайн подразумевает минималистичные шрифты без засечек и любых украшений, под запретом даже курсивное начертание. Характер шрифта должен дополнять концепт проекта и не выбиваться из общей стилистики.
4. Игра с цветами.
Так как плоский дизайн не допускает градиентные переходы, в стилистике создаваемого элемента можно и нужно использовать несколько основных цветов, часто контрастных по отношению друг к другу.
5. Минимализм.
Flat дизайн предполагает визуализацию объектов, использование всего экрана, но при этом минимализирование информации. Это значит, что дизайнер не стремится заполнить всё свободное пространство и не боится пустого места.
6. Простые фоновые изображения.
Однотонный фон - лучший выбор. Можно забыть об изображениях а-ля кирпичные стены или шкура леопарда. Спокойные и едва заметные фоновые цвета не перетягивают внимание на себя и позволяют посетителю сфокусироваться на важных элементах интерфейса.
Учитывая все эти принципы, бытует мнение о простоте создания плоского дизайна. На самом деле именно flat дизайн большое внимание уделяет деталям и передаче движения, ритма. Перед дизайнером стоит задача создать привлекательную, понятную и завершённую картинку, используя исключительно простые формы.
Преимущества плоского дизайна для сайта
1. Читабельность текста
.
В плоском дизайне акцент делается не на графику, а на текст, что улучшает его восприятие. Кроме того, используются простые шрифты, которые не перетягивают внимание на себя.
2. Время загрузки сайта.
Благодаря отсутствию тяжёлой графики и сложных элементов, страницы грузятся быстро и не подвисают. Даже страница Google загружается быстрее, после того как компания сменила логотип, используя плоский и простой шрифт.
3. SEO-оптимизация.
Этот пункт вытекает из предыдущего. Скорость загрузки страницы влияет на ранжирование результатов поиска. Таким образом, просто сменив стиль дизайна, можно поднять свой ресурс в поисковой выдаче. Кроме того, теперь Google использует технологию, помечающую медленно загружающиеся сайты специальным значком. А это значит, что количество ваших посетителей может упасть, если вы не адаптируете дизайн сайта.
4. Внешний вид.
Как вы думаете, сколько времени нужно пользователю, чтобы сформировать мнение о ресурсе? Минута? Может, 30 секунд? Правильный ответ: 0,05 секунды! За это время невозможно изучить контент сайта, но можно просканировать внешний вид и понять, какие ощущения он вызывает. Flat дизайн говорит пользователям, что ваш сайт современный, что его развивают, а это уже предпосылка к формированию базового доверия.
Где можно использовать плоский дизайн?
Flat дизайн особенно актуален для разработки мобильных приложений и адаптивного дизайна сайтов. Кроме того, плоский стиль постепенно из цифрового мира переходит в реальный.
Элементы фирменного стиля, разные виды полиграфической продукции в «плоской» адаптации при должном исполнении смотрится весьма оригинально. Стоит отметить, что очень интересным решением является использование плоской линейной стилистики в дизайн-проектах.
Если судить по нынешним тенденциям, то стиль flat через непродолжительное время станет стандартом не только для цифровой сферы. Так, может, стоит озадачиться ребрендингом и созданием проектов в плоском дизайне уже сейчас?
Если вам понравилась или была полезна данная статья, будем рады получить небольшое поощрение в виде ссылки в социальных сетях. Для этого нажмите на кнопку любой социальной сети, расположенной ниже.
Что такое флэт-дизайн? Данное направление дизайна является одним из самых обсуждаемых в интернете. Если коротко, то флэт-дизайн это предельно упрощенный стиль, корни которого уходят в минимализм. Но это не совсем минимализм, так как данный стиль может принимать самые разные формы в зависимости от требований к дизайну. Чтобы лучше понять, что же собой представляет плоский (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 не собираются отказываться от флэта. Если изменения и будут, то незначительные – появятся новые подходы, кто-то придумает интересную «фишку», продолжатся попытки взять самое лучшее из скевоморфизма. Но в глобальном смысле ожидать чего-то действительно нового не приходится – плоский дизайн тренд долговременный и сместить его с завоеванных позиций сможет только стиль, наилучшим образом отвечающий новым технологиям, которых пока еще нет.
Термин «плоский дизайн» (от англ. flat design) в настоящее время на слуху у каждого, кто занимается проектированием пользовательского опыта. В последние несколько лет этот вид дизайна превратился в мэйнстрим — даже крупнейшие компании применяют его при создании сайтов и лендингов.
В чем же причина возрастающей популярности flat дизайна? Если ответить в двух словах: он реально работает! Плоский дизайн может помочь вам усовершенствовать пользовательский опыт как на лендингах, так и в мобильных приложениях. Это, в свою очередь, положительно отразится на конверсии.
Рассмотрим подробнее преимущества данного метода.
Что такое плоский дизайн?
Плоский дизайн получил такое название в связи с тем, что он использует минималистичные двухмерные (плоские) объекты для веб и мобильных интерфейсов:
Концепция плоского дизайна не подразумевает излишеств в оформлении, например, элементов, которые создают иллюзию трехмерных объектов (градиент, различные текстуры, тени). Flat дизайн развивается в противовес концепции скевоморфизма, или дизайна, имитирующего реально существующие объекты.
Плоский дизайн подразумевает создание простых форм и очертаний с использованием как сдержанных, так и ярких оттенков. Основной шрифт, который используется при создании страниц — это sans-serif (шрифт без засечек).
Проблемы, свойственные плоскому дизайну
Как только появился flat дизайн, он был ориентирован исключительно на мобильные устройства. Минималистичность и отсутствие сложных элементов хоть и являются основными чертами этой концепции, однако это не единственные ее особенности.
Компания Microsoft была одной из первых, кто реализовал подход на практике — в виде так называемого Metro для Windows 8. Тем не менее, когда специалисты NN Group провели дизайна, выяснилось, что у пользователей возникали трудности с идентификацией некоторых элементов интерфейса.
На скриншоте ниже изображен пример интерфейса Windows 8. Исследования показали, что пользователи не могли понять, куда они могут кликнуть, ведь все иконки плоские. К тому же функция «изменить настройки компьютера» (Click PC settings), выглядит просто как подпись к группе иконок, а не как кликабельная область:
Вместе с этим, Windows 8 был скорее адаптирован под мобильные устройства. Большие разноцветные прямоугольники в меню «Пуск» выглядят очень мило на экране мобильного телефона — такой интерфейс отлично подходит для жестов на тач-скрине:
Однако на большом экране стационарного компьютера данное меню выглядит громоздко и аляповато. Кликать по цветным прямоугольникам мышью не совсем удобно с точки зрения юзабилити.
Flat дизайн. Версия 2.0
С течением времени плоский дизайн «эволюционировал». Были исправлены многие проблемы с юзабилити, описанные выше. Flat дизайн перестал быть абсолютно «плоским», а стал «плоским наполовину». Теперь для создания элементов дизайна используются слои, контрасты и едва различимые тени, чтобы дать пользователю понять, что данная иконка кликабельна. Ниже приведен пример «обновленного» flat дизайна:
Теперь пришло время разобраться в том, каким образом плоский дизайн способен «завоевывать» посетителей.
Flat дизайн улучшает читабельность текста
Ключевое преимущество плоского дизайна — читабельность текста. Посетители могут с легкостью просматривать и воспринимать контент сайта, независимо от типа устройства, которое они используют.
Плоский дизайн подразумевает . Текст, на который делается основной акцент, обычно контрастирует с фоном, что делает его удобочитаемым. Кроме того, сложные изображения заменены на минималистичные иконки или векторы. Плоские визуальные элементы и яркий, четкий текст невероятно легки для восприятия.
Ниже приведен пример сайта Crazyegg в 2009 году:
А на данном скриншоте представлена обновленная версия того же сайта:
Сравнивая эти две версии сайта, можно увидеть, что информация на обновленном ресурсе более упорядочена и удобочитаема. Новый сайт четко и без лишних слов демонстрирует пользователям преимущества сервиса. Страница выглядит очень лаконично и минималистично.
Используя плоский дизайн, можно без лишних хлопот донести до покупателей нужную информацию. Если посетители будут знать больше о вашей услуге или продукте, они с большей вероятностью станут вашими клиентами.
Пользователя ничто не отвлекает
Плоский дизайн тесно связан с понятием минимализма. Дизайнеры избегают декоративных элементов, которые не несут никакой информационной ценности для пользователя. Их цель — привлечь внимание посетителей к основному контенту.
Если снова обратиться к примеру CrazyEgg, то можно лишний раз убедиться в том, что на странице пользователя ничто не отвлекает. Человек, оказавшийся на данном лендинге, концентрирует свое внимание на одном единственном действии.
Ничем не заполненное белое пространство — еще одна «фишка» flat дизайна. Этот эффект наглядно демонстрирует сайт GetWalnut.com:
Walnut — это приложение, позволяющее отслеживать свои расходы, ключевые функции которого отображены на странице. Плоские иконки и текст располгаются на белом фоне, а так как незаполненного светлого пространства на сайте предостаточно, поэтому пользователь без труда сосредотачивает свое внимание на контенте. Flat дизайн акцентирует контент, убеждающий в выгодности предложения.
Медленно загружающиеся сайты и «подвисающие» приложения раздражают пользователей. Из-за длительного времени ожидания вы рискуете потерять клиентов:
Если вы не можете сократить объем контента на сайте, но хотите, чтобы он загружался быстро, вам следует либо использовать изображения с более низким разрешением либо прибегнуть к flat дизайну. Второй вариант здесь, очевидно, более приемлем.
По сравнению с сайтами, на которых используются «тяжелые» элементы оформления, ресурсы, созданные при помощи плоского дизайна, загружаются намного быстрее. Благодаря отсутствию градиента, сложных шрифтов и прочих скевоморфных особенностей общий вес сайта имеет меньший размер. Так, недавно Google сменил свой логотип, упростив шрифт, что положительно повлияло на время загрузки страницы.
Плоский дизайн удобен и для разработчиков. Его компонентами являются векторные или основанные на программном коде графические элементы, что также сокращает время загрузки сайта. Если копнуть глубже, то flat дизайн способствует оптимизации конверсии, а следовательно, увеличивает прибыльность сайта.
Время загрузки страницы играет существенную роль в ранжировании результатов поиска. Именно этот фактор является одним из ключевых для успешной SEO-оптимизации. Плоский дизайн положительно влияет на время загрузки сайта, а, следовательно, помогает ресурсу продвинуться в ТОП-10 в результатах поиска.
Сайты, созданные при помощи flat дизайна, имеют хорошие шансы появиться на первой странице результатов поиска и, следовательно, привлечь внимание наиболее заинтересованных в покупке пользователей.
Обратите внимание на то, что Google тестирует новый функционал для поисковых систем. Теперь медленно загружающиеся сайты будут помечены специальным значком на странице результатов поиска. Эта новая функция наглядно продемонстрирована на скриншоте ниже:
Современный внешний вид
Пользователи формируют свое мнение о сайте в течение 50 миллисекунд! Это означает, что проведя на странице всего лишь 0.05 секунды, человек уже понимает, нравится ему данный ресурс или нет.
Как же это происходит? Разумеется, невозможно изучить весь контент за столь короткий промежуток времени. Люди оценивают сайт по внешнему виду и ощущениям, которые он вызывает.
Flat дизайн, пожалуй, является самым современным трендом в интернет-индустрии на настоящий момент. Такие крупнейшие компании как Apple, Google, Microsoft и другие с энтузиазмом приняли эту новую тенденцию. Пользователи в скором времени, возможно, станут воспринимать подобные сайты как эталон, которому должен соответствовать любой ресурс в сети.
Заключение
Помимо того, что плоский дизайн является широко распространенным трендом при создании сайтов, он положительно влияет на пользовательский опыт благодаря целому ряду преимуществ: хорошей читабельности, ускоренной загрузки страниц, более эффективной поисковой оптимизация и просто приятному внешнему виду.
Крупнейшие компании уже используют его при оформлении своих страниц и приложений, извлекая соответствующие выгоды. Если вы ищете направления по увеличению прибыльности своего бизнеса, рассмотрите flat дизайн как возможный вектор для развития.
