почему дизайн стал плоским? / Хабр
Не знаем, заметили вы или нет, но в последнее время (особенно в последний год) в веб-дизайне по всему миру начала прослеживаться чёткая тенденция к упрощению, жесткому минимализму и визуальному облегчению того, с чем мы как пользователи взаимодействуем каждый день. Проще говоря, дизайн стал «плоским»: в отличии от выпуклых иконок времен бурного роста социальных сетей и web 2.0, сейчас нас всё чаще встречают простенькие иконки новых сервисов. Всё это получило своё название – flat design. Не квартирный, а плоский.
Своей вчерашней презентацией новой мобильной ОС, iOS 7, компания Apple окончательно подтвердила стремительный рост популярности этого направления, традиционно обрадовав часть своих фанатов, но и встретив значительное недовольство среди опытных пользователей и дизайнеров. В чём же дело? В чём польза этого плоского дизайна и действительно ли он нужен миру? Мы решили обратится к экспертам из Украины и зарубежья.
Мы попросили их ответить на три главных вопроса:
- почему мир начал двигаться к flat design в вебе и мобайле и что он из себя представляет;
- что это даст Apple и iOS 7;
- как это повлияет на дизайнеров — с одной стороны, и на пользователей — с другой.
Денис Судилковский, Киев
Interaction Design специалист, продюсер Prodesign.in.ua
«Эффект маятника» в предсказании будущего проявляется в том, что если в каком-то вопросе существуют две крайности — человечество будет кидаться из одной стороны в другую. Без сомнения, это справедливо и для дизайна интерактивных систем. Плоский и неинтересно-примитивный веб в своё время изменился на объёмные вебдванольные кнопочки. Визуализации интерфейсов достигли своего апогея реалистичности и маятник летит в обратную сторону — flat&simple.
Что получит от этого Apple? Сохранит своё место в тренде и сотни тысяч комментариев, что их iOS становится очень похожей на Android.
Дизайнерам придётся эволюционировать (и не шутить на тему, когда же flat-дизайн придёт в машиностроение и подарит нам плоские автомобили :). Когда нет декораций — вся работа состоит в создании настроения контентом для конкретного сценария с пользователем. Эта профессия будет иметь всё больше общего с Режиссёром, нежели с Художником.
Daniel Bruce, Stockholm
Senior Digital Creative, danielbruce.se
Для начала, я хотел бы отметить, что я не люблю термин «плоский дизайн». Большинство графического дизайна на протяжении столетий были «плоскими». Я также считаю, что это ограничивает вашу возможность сделать выдающимся дизайн, когда выбор стоит между flat и чем-то ещё. Дизайн может быть чем-то значительно большим, нежели это. Весёлым, ярким, темным, позитивным, минималистичным — его можно назвать как угодно. Но сегодня я редко слышу, чтобы кто-то считал дизайн не только плоским или склероморфным. Это немного грустно.
Почему веб и мобайл медленно идут к плоскому дизайну? Я вижу это так — это просто тренд. Я никогда не видел статей про преимущества плоского дизайна в пользовательских интерфейсах и до сих пор не убедился в этом.
Простой и ясный дизайн — да, но это не то же самое что и «flat». Посмотрите, например, на Google. Они не делают полностью плоские дизайны, они — и я разделяю этот момент — до сих пор видят потребность в некоторой глубине и вариациях.
Я был очень удивлён, когда Microsoft выбрали для себя это направление несколько лет назад, презентовав известный Metro стиль. Фактически, они использовали графический дизайн для больших знаков, на которые люди смотрят с определённых расстояний и никогда не взаимодействуют с маленькими экранами со значительным количеством элементов. Это выглядит красиво, но имеют ли они хорошее юзабилити?
То, что я увидел вчера вечером от Apple, было лишь плохой копией нескольких интересных дизайнов, которые появляются на сайтах наподобие Dribbble i Behance на протяжении последнего года. Я не увидел ничего нового — кроме того, что это далеко не тот же «старый Apple» Стива Джобса. Компания показала, что она не на передовой дизайна мобильных интерфейсов. Конечно, мы увидим и фанатов, которые будут наследовать все эти белоснежные дизайны и креативные градиенты следующие несколько месяцев, но я не думаю что этот аспект будет настолько влиятелен, как недавние прекращения Google.
Что касается обычных пользователей, то им нравятся яркие цвета.
Иван Клименко, Киев
дизайнер мобильных интерфейсов, 5tak.com
В значительной степени я отношусь к этой ситуации с увлечением плоскими стилями немного по-философски. Не впервые дизайнеры увлекаются минимализмом и искуственными материалами. Всё проходит.
Эпоха Баухауса 20-30-х годов принесла огромный вклад в дизайн, но всё-таки тональная герметичность и искуственность не выдержала желания и внутреннего позыва людей существовать в окружении более натуральных вещей.
Потом в 60-х все начали восхищаться пластиком.
Мебель, посуда и даже одежда — всё из пластика. Казалось, что это новая надежда человечества, но снова нет — люди очень быстро вернулись к природным формам или к копиям натуральных материалов.
Жесткий контраст форм и минималистичная графика всегда выражали накопление внутренних конфликтов внутри общества.
Минималистичность и все эти электронные железяки — всего-лишь шаг на дороге к чему-то более природному и человеческому. Большему чем просто ещё один компьютер. Мне даже жаль, что Apple, которая умела смотреть глубоко, больше не существует.
Олеся Гричина, Киев
UI designer at Componentix, twitter: elendiel
Думаю, что на дизайнеров очень повлияло большое количество гаджетов с разными размерами экрана и разрешающей способностью — для всего этого разнообразия легче создавать дизайн без текстур, сложных теней, которые правильно учитывают освещённость и т.п. Больше стали думать в направлении «как бы удобнее для пользователя сделать», а не «как бы красиво нарисовать». Контент — это главное, и в нашей работе важно подать его наилучшим образом.
Мне кажется, что за внешними изменениями (flat UI, иконки) особенно и не заметили серьёзных изменений в удобстве работы, и того, как ругаются на эту тему. Когда проверят в работе — начнётся «ооо, как удобно, и почему раньше так не сделали». На дизайнеров, надеюсь, это повлияет таким образом, что они больше внимания будут уделять удобству интерфейса, а не текстурам и теням. В конце концов заказчикам можно будет пояснять, что это в тренде 🙂
На пользователей flat design, думаю, особенно не повлияет — если им удобно будет создавать и потреблять контент, довольных будет много. Но иконки на домашнем экране всё же кислотные 🙂
Павел Грозян, Киев
Product Designer at MacPaw, grozyan
«Apple! А-ха-ха, прекрати! — Кричат дизайнеры. — Ура, стало проще. — скандируют пользователи». Понимаю обе точки зрения. Сегодня, после презентации с WWDC2013, многие из моих коллег встали и сказали «да ну её, эту профессию! Кто угодно теперь такую дурость нарисовать сможет.
Flat — он не для кликов, он для нажатий, тапов, taps. Плоским его не назовёшь — отсутствие «толстых» текстур и теней у кнопок делает его, скорее, упрощённым, и без визуальной агрессии.
И без градиентов к кнопкам не обойтись. Я поддерживаю эту тенденцию. Если это не будет мешать качеству опыта использования, но с ним всем будет легче жить. В первую очередь пользователю. Во-вторую — творцу: будет проще в технической реализации, удобнее для нажатия (подчеркиванию ссылок — привет), и мультиплатформенно — объединяя веб, мобайл и декстоп в один единый опыт. Без сомнения, для Apple это смелый шаг. И только они могут на него решится. Их история имеет десятки подтверждений, потому им это скорее удастся, нежели наоборот.
Земля всё же плоская: стиль flat в дизайне
Категория / Дизайн
Поделиться
Стиль flat: тренд на плоский дизайн. История и эволюция стиля. Будет ли актуален flat дизайн в будущем и почему его стоит применять в дизайне?
Плоский дизайн или flat-стиль существовал ещё в 80-е годы и не имел альтернатив, так как уровень технологий не позволял работать со сложными текстурами. Со временем появились сначала простые элементы скевоморфирзма (имитации реальных объектов), а затем и сложные отображения визуальной псевдовыпуклости.
Мода циклична и с 2010 года плоский дизайн быстро восстанавливал популярность, пока в 2014 году не стал новым стандартом компьютерного дизайна.
Эволюция flat-дизайна
Изначально плоский дизайн задумывался как полная противоположность сквеморфизма. Отрицались тени, градиенты и любые намёки на объём. Первой эту концепцию воплотила компания Microsoft. Но после юзабилити-тестирования выяснилось, что пользователи с трудом идентифицируют некоторые элементы интерфейса. Так, фокус-группа не могла понять какая иконка кликабельная, а какая нет, ведь все они плоские. Ещё больше проблем возникло с кликабельными надписями, потому что выглядели они как стандартная подпись к объектам.
В связи с этим, появилась адаптированная версия плоского дизайна – flat 2.0 или наполовину плоский дизайн. Он имеет слабый контраст и едва различимые тени, которые показывают пользователю, что иконка кликабельна. Когда говорят о плоском дизайне, имеют в виду именно версию flat 2.0. С развитием данного стиля псевдотени и легкий контраст был снова сменен на полную плоскость объектов.
При этом в веб для понятия кликабельности элементов стала использоваться просто смена цвета на контрастный в таком же плоском стиле, без использования градиентов.
Принципы плоского дизайна
1. Двухмерная графика.
В плоском дизайне акцент делается на контурном изображении объекта. Дизайнер не стремится к реалистичности, его задача – передать суть, используя простые двухмерные формы.
2. Иконки.
Использование простых иконок с прослеживающимся призывом к действию (иконка дискеты или облачного хранилища, призывающая сохранить файл) делает интерфейс более лёгким и понятным интуитивно.
3. Простые шрифты.
Flat стиль большое внимание уделяет типографике в целом и шрифтам в частности. Плоский дизайн подразумевает минималистичные шрифты без засечек и любых украшений, под запретом даже курсивное начертание. Характер шрифта должен дополнять концепт проекта и не выбиваться из общей стилистики.
4. Игра с цветами.
Так как плоский дизайн не допускает градиентные переходы, в стилистике создаваемого элемента можно и нужно использовать несколько основных цветов, часто контрастных по отношению друг к другу.
5. Минимализм.
Flat дизайн предполагает визуализацию объектов, использование всего экрана, но при этом минимализирование информации. Это значит, что дизайнер не стремится заполнить всё свободное пространство и не боится пустого места.
6. Простые фоновые изображения.
Однотонный фон – лучший выбор. Можно забыть об изображениях а-ля кирпичные стены или шкура леопарда. Спокойные и едва заметные фоновые цвета не перетягивают внимание на себя и позволяют посетителю сфокусироваться на важных элементах интерфейса.
Учитывая все эти принципы, бытует мнение о простоте создания плоского дизайна. На самом деле именно flat дизайн большое внимание уделяет деталям и передаче движения, ритма. Перед дизайнером стоит задача создать привлекательную, понятную и завершённую картинку, используя исключительно простые формы.
Где можно использовать плоский дизайн?
Flat дизайн особенно актуален для разработки мобильных приложений и адаптивного дизайна сайтов. Кроме того, плоский стиль постепенно из цифрового мира переходит в реальный. Элементы фирменного стиля, разные виды полиграфической продукции в «плоской» адаптации при должном исполнении смотрится весьма оригинально. Стоит отметить, что очень интересным решением является использование плоской линейной стилистики в дизайн-проектах.
Если судить по нынешним тенденциям, то стиль flat уже стал стандартом не только для цифровой сферы, но и для графического дизайна в целом.
ДальшеЛеттеринг и каллиграфия, в чем разница?
Переход на 2D: как плоский дизайн улучшает веб-сайт
Включение загруженной графики на одну веб-страницу — правильный стилистический выбор. Но загроможденный дизайн может препятствовать работе пользователя.
Если перегруженный дизайн веб-страницы скрывает информацию, посетители отказываются от посещения сайта с вероятностью до 90%.
Чистый веб-дизайн предлагает более четкий путь к информации, которую ищут пользователи.
Введите плоский дизайн. Этот подход фокусируется на двухмерных (2D) элементах дизайна, чтобы сделать веб-сайт удобным и понятным на любом экране. Это вариант, который каждый дизайнер должен иметь в своем наборе инструментов, когда пользовательский интерфейс (UI) начинает вызывать клаустрофобию.
Что такое плоский дизайн пользовательского интерфейса?
Источник: Сайт студии BrightsideПлоский дизайн — это минималистичный стиль, ориентированный на графическую простоту. Он удаляет затенение, блики и трехмерный (3D) дизайн в пользу 2D-форм, разделяя элементы до их основных функций.
В приведенном выше примере раздел Brightside Studio «Что мы делаем» использует плоские значки для представления своих основных принципов:
- Стратегия: Компас, указывающий пользователям правильное направление
- Дизайн: Глаз для визуального повествования
- Проработка: Несколько сложенных друг на друга прямоугольников, напоминающих веб-браузеры
Эти значки передают историю Brightside Studio, дополненную кратким текстом, не утяжеляя читателей деталями.
С точки зрения дизайна, плоское изображение не лучше и не хуже максималистского дизайна. Оба стиля имеют свои преимущества. Максималистский дизайн предлагает волнение, сильную индивидуальность бренда и уникальный пользовательский опыт. Плоский дизайн лучше воспринимается на небольших экранах и может даже ускорить загрузку. Это хороший выбор для брендов, которые хотят, чтобы все было просто.
Ключевые элементы плоского дизайна различаются, но могут включать:
- Несложные значки и формы, которые быстро передают смысл
- Типографика без засечек с упором на удобочитаемость
- Плоские, чистые текстуры
- Много пустого пространства
Скевоморфный : противоположность плоскому дизайну
Источник: Mac App Store Скевоморфный дизайн имитирует реальные объекты и использует тени, градиенты и другие элементы для придания глубины и сложности. Например, использование подробного изображения старинной пленочной камеры для представления приложения цифровой камеры смартфона — это скевоморф в действии.
Популярность движения также вызвала появление таких недолговечных дизайнерских движений, как неоморфизм.
Forbes сообщил об упадке скевоморфного дизайна в 2007 году, но некоторые говорят, что он возвращается. Хотя чрезмерное использование скевоморфизма может привести к беспорядку и путанице, это полезно, когда компании и бренды хотят представить на экране реальные объекты. Он соединяет цифровой продукт с его реальным аналогом.
Дизайнеры выбирают скевоморфный дизайн, чтобы показать узнаваемые версии продуктов компании. Это также позволяет 3D-объектам сиять, лучше представляя их формы. Думайте о 3D-корзине как о значке корзины на рабочем столе — он не фотореалистичен, но узнаваем. Это знакомство может сделать дизайн более интуитивным и помочь понять, что представляет собой приложение или продукт.
Напротив, многие плоские дизайны, такие как обновленное меню Microsoft ниже, предлагают несложную двухмерную версию узнаваемых символов. 2D-белое солнце обозначает погоду, а 2D-белая буква служит приложением Mail.
Эти плоские значки представляют то, что люди найдут после нажатия, без добавления ненужных деталей.
Зачем использовать плоский стиль дизайна?
Источник: Пользователь Flicker okubaxЭлементы 2D-дизайна — распространенная тенденция веб-дизайна, отчасти потому, что их используют такие известные компании, как Google, Apple и Microsoft.
Выше приведен пример плоских значков, используемых в меню Windows 10. Microsoft представила эти значки еще в Windows 8. Благодаря четким линиям и значкам макет не становится громоздким, несмотря на то, что существует множество вариантов навигации.
Владельцы веб-сайтов, жаждущие перемен, могут выбрать веб-сайты с плоским дизайном из-за их современной привлекательности и минималистских мотивов. Но плоский дизайн также может помочь им достичь целей, к которым они стремились, например, сократить время загрузки и очистить интерфейс.
Вот несколько преимуществ плоского дизайна для веб-сайта.
Обновление загроможденных домашних страниц
Плоский дизайн пользовательского интерфейса дает компаниям возможность обновить старый веб-сайт без полной переделки.
Обновленные значки и иллюстрации могут обновить пользовательский интерфейс, оставив основной макет нетронутым. Это помогает веб-сайтам выглядеть более современно без капитального ремонта — иногда достаточно заменить несколько старых элементов плоским дизайном, чтобы добавить современный стиль.
Снижает показатель отказов
Запутанные целевые страницы, нечеткие меню и медленные веб-сайты — все это способствует высокому показателю отказов. Отказ происходит, когда посетители не проходят дальше первой страницы, которую они открыли, потому что на ней было сложно ориентироваться, она не была связана с их поиском или слишком долго загружалась. Плоский дизайн решает эти проблемы, используя базовую графику, которая четко показывает, что пользователи могут ожидать найти при нажатии на значок или кнопку, чтобы повысить удобство использования.
Сокращает время загрузки
Сложная графика и изображения с высоким разрешением способствуют увеличению времени загрузки, а более длительное время загрузки может привести к тому, что посетители потеряют терпение и покинут сайт, не увидев, что там есть.
Google обнаружил, что вероятность отказа посетителей увеличивается на 32%, когда время загрузки увеличивается с одной секунды до трех. Плоский дизайн не имеет такого же большого размера файла, как фотографии или анимация с высоким разрешением, а это означает, что веб-страница загружает контент быстрее.
Охватывает более широкую аудиторию
Фотографии могут ограничить репрезентацию — невозможно включить все типы людей. В стилях плоского дизайна, таких как Corporate Memphis, используются нечеловеческие тона кожи и преувеличенные тела, чтобы отобразить более универсальное население, а не несколько конкретных.
Оптимизирует работу с мобильными устройствами
Мобильный дизайн должен подходить для небольших экранов и обслуживать мобильных пользователей, а веб-сайты, на которых слишком много всего, могут не соответствовать этим критериям. Плоский дизайн помогает веб-сайтам использовать более удобные для мобильных устройств элементы, которые загружаются быстрее и не загромождают пространство.
Оптимизирует воронку продаж
По мере того, как клиенты приближаются к транзакции — будь то подписка на информационный бюллетень или покупка в электронной торговле — навигация по веб-сайту должна быть максимально простой. Плоский дизайн выделяет важные призывы к действию (CTA) и кнопки с минимальным беспорядком, чтобы пользователи знали, куда идти.
Как внедрить плоский дизайн в свой веб-сайт
Источник: Домашняя страница RobinhoodПомните, что не все на веб-странице должно использовать плоский дизайн. Небольшая тень или стекломорфизм (который добавляет затенение для придания глубины плоскому дизайну) по-прежнему приносит пользу веб-сайту. Существует даже материальный дизайн, который сочетает в себе плоские элементы с избранными точками анимации или глубины, чтобы удерживать внимание пользователя.
Но элементы дизайна складываются, и добавление небольшого количества плоской иконографии или минимализма придает изношенным элементам новый вид, не перегружая посетителей.
Сосредоточьтесь на обновлении нескольких элементов, чтобы освежить дизайн, если вы не хотите полного пересмотра.
Выберите новую цветовую схему
Выберите смелую, но базовую цветовую палитру, которая выделяется без текстуры. Плоский дизайн хорошо работает с высококонтрастными цветами, особенно если есть много значков и мелких элементов. Фон часто выигрывает от слегка ненасыщенного оттенка, который фокусирует внимание на других элементах, таких как текстовые поля и призывы к действию.
Используйте макет на основе сетки
Сетки не всегда необходимы для плоского дизайна, но они служат ориентиром, помогающим дизайнерам создавать чистый макет. Базовая горизонтальная и вертикальная сетка выделяет нужные места, чтобы элементы выделялись друг на друге и на плоском фоне. Более смелые диагональные и нерегулярные сетки также подходят для плоского дизайна.
Добавление плоских значков
Добавление нескольких плоских значков — тонкий способ обновления веб-сайта.
Создайте набор минималистичных значков для обозначения действий и разделов и замените детализированные изображения менее требовательными иллюстрациями. Минималистичная кнопка с четким текстом превосходит тщательно продуманную, но сложную иконку.
Выберите новый шрифт
Плоская веб-типографика — как и многие шрифты без засечек — не нуждается в штриховке, чтобы придать блеск, и устраняет беспорядок на сайте. Убедитесь, что весь текст имеет высокий контраст с фоном и хорошо расположен, чтобы оптимизировать его читаемость.
Настройка навигации
После настройки макета веб-сайта и добавления новых дизайнов проверьте навигацию. Обновленные значки могут бросаться в глаза, но они могут мешать пользователю, если они слишком простые, чтобы их можно было узнать, или находятся не в том месте. Плоский дизайн бесполезен, если он отвлекает от сути веб-сайта. Ведите клиентов в правильном направлении.
Недостатки плоского дизайна
Как и любой стиль дизайна, плоский дизайн подходит не для каждого веб-сайта.
Плоские значки нуждаются в четких контекстных подсказках, чтобы поддержать их. В противном случае плоский дизайн может быть слишком минималистичным — до такой степени, что он будет непонятен новым посетителям. Обувной магазин электронной коммерции, использующий значок корзины покупок для представления цифровой корзины, соответствует ожиданиям пользователей, но использование высокого каблука может создать путаницу.
В то время как плоский дизайн избегает использования фотографий и предпочитает более простые иллюстрации и значки, иногда правильная фотография лучше представляет бренд. И максимализм, 3D-элементы и скевоморфный дизайн могут работать вместе в правильном дизайне.
Меньше значит больше с плоским дизайном
Плоский дизайн стал идеальным решением для создания четких и быстрых веб-сайтов. Но это не обязательно должен быть единственный стиль — используйте элементы, которые работают, и отбрасывайте те, которые не работают.
А благодаря креативным иллюстрациям и привлекательным значкам в плоском дизайне по-прежнему есть с чем работать дизайнерам.
Инструменты дизайна Webflow предлагают шаблоны, банки иконок и образовательные ресурсы для внедрения плоского дизайна на любом уровне.
5 причин, по которым плоский дизайн может привести к увеличению конверсии
Плоский дизайн — одно из самых популярных модных словечек в современном пространстве UI/UX.
Особенно в последние несколько лет плоский дизайн стал мейнстримом. Даже крупнейшие компании теперь следуют этому подходу к дизайну.
Так в чем же причина его растущей популярности? Проще говоря, это работает!
Плоский дизайн может помочь улучшить взаимодействие с пользователем на веб-сайтах и в приложениях. Это, в свою очередь, может привести к большему количеству конверсий. Однако не верьте нам на слово. Используйте VWO Testing для тестирования версий целевых страниц с разделением URL-адресов и развертывания только того, что вам подходит. Воспользуйтесь 30-дневной бесплатной пробной версией с инструкциями, чтобы начать процесс редизайна.
Этот пост познакомит вас с плоским дизайном и его преимуществами.
Поехали.
Что такое плоский дизайн?
Это подход к дизайну, который включает создание минималистичных двухмерных (плоских) иллюстраций для веб-интерфейсов и мобильных устройств.
Источник изображения: YouTubeПлоский дизайн позволяет избавиться от ненужного стиля и элементов, создающих иллюзию трехмерности (таких как градиенты, текстуры и тени). Это контрастирует со скеоморфизмом, другой практикой проектирования, которая включает в себя создание проектов, напоминающих объекты из реальной жизни.
Плоский дизайн — это четкие формы, сдержанные и яркие цвета и масштабируемые иллюстрации. Даже шрифты, используемые в плоском дизайне, в основном без засечек .
Проблемы с плоским дизайном
На заре своего существования плоский дизайн был слишком тесно связан с минимализмом и мобильным дизайном. Хотя оба эти атрибута в значительной степени способствуют успешному плоскому дизайну, у них есть свои ограничения.
Пример можно найти в Windows 8, выпущенной Microsoft.
Metro-дизайн Windows 8, который некоторые считают пионером плоского дизайна, имел некоторые присущие ему недостатки.
Группа NN провела тестирование удобства использования в Windows 8 и обнаружила, что пользователям было трудно идентифицировать активные объекты в ее интерфейсе.
Источник изображения: NN GroupЧто касается интерфейса ОС (как показано на рисунке выше), в исследовании говорится:
«Где вы можете нажать? Все выглядит плоским, и на самом деле «Изменить настройки ПК» больше похоже на метку для группы значков, чем на интерактивную команду. В результате многие пользователи в нашем тестировании не нажимали эту команду, когда пытались получить доступ к одной из скрытых функций».
Источник изображения: NN Group Кроме того, интерфейс Windows 8 ориентирован на мобильных пользователей. Большие красочные прямоугольные плитки выглядели мило на мобильном устройстве. Интерфейс хорошо подходил для жестов пальцами на сенсорном экране. Однако те же плитки на большом десктопном мониторе выглядели аляповато.
Его удобство использования с мышью также было под вопросом.
Плоский дизайн 2.0
Исправление проблем с удобством использования, связанных с этим, плоский дизайн со временем эволюционировал. Он перешел от абсолютно плоский до полуплоский .
Хотя подход плоского дизайна 2.0 по-прежнему остается плоским, он использует слои, контраст и тонкие тени, чтобы придать интерфейсу намек на глубину.
Вот пример (обратите внимание на тонкие тени и слои):
Источник изображения: medium.comТеперь, когда мы знакомы с тем, что такое плоский дизайн, давайте посмотрим, как он помогает веб-сайтам завоевывать доверие пользователей.
#1 Плоский дизайн улучшает читаемость
Одним из краеугольных камней плоского дизайна является удобочитаемость.
Плоский дизайн позволяет пользователям легко просматривать и понимать содержимое веб-сайта, независимо от того, используют ли они настольные компьютеры или мобильные устройства.
Заменяет сложные изображения упрощенными (минималистичными) иконками и векторами.
Плоские значки и сопровождающий их текст облегчают пользователям понимание любой концепции.
Кроме того, плоский дизайн подчеркивает четкую типографику и шрифты без засечек. Фон текста также обычно состоит из одного контрастного цвета.
В плоском дизайне основное внимание уделяется содержанию.
Возьмем пример.
Это веб-сайт Crazyegg 2009 года:
Источник изображения: CrazyeggА это новый, плоский вид веб-сайта в настоящее время:
Мы можем наблюдать, как новый плоский дизайн способен наводить порядок улучшить читаемость. Новый дизайн четко определяет ценностное предложение Crazyegg с минимальным содержанием.
Плоский дизайн упрощает обучение пользователей. И как только пользователи лучше узнают о продукте/услуге, шансы на их конверсию также увеличиваются.
#2 Без отвлекающих факторов
Плоский дизайн — это минимализм.
В плоском дизайне отсутствуют украшения или декоративные элементы, которые не представляют ценности для пользователей.
Цель состоит в том, чтобы направить внимание пользователей на основной контент веб-сайта.
Глядя на приведенный выше пример CrazyEgg, мы видим, что в его новом дизайне нет отвлекающих факторов. Внимание пользователей направляется только туда, куда хочет веб-сайт.
Эту конструктивную особенность часто называют пустым пространством.
Пустое пространство является неотъемлемой частью плоского дизайна.
Плоский дизайн позволяет легко расставлять приоритеты и выделять содержимое.
Связанное чтение : JellyTelly обнаружили, что их навигационные элементы отвлекают внимание. Вы совершаете ту же ошибку?
#3 Уменьшает время загрузки страницы
Медленная загрузка веб-сайтов и приложений раздражает при использовании; пользователи отскакивают.
Источник изображения: Sitepoint Если вы не можете сократить контент, который вам нужно показывать своим пользователям, и вам все еще нужно поддерживать скорость своего веб-сайта, вы можете либо использовать изображения и графику с низким разрешением, либо использовать плоский дизайн.
Плоский дизайн здесь кажется очевидным выбором.
По сравнению с веб-сайтами, на которых используются тяжелые изображения и графика, веб-сайты с плоским дизайном загружаются быстрее. Из-за отсутствия градиентов, шрифтов с засечками и других скевоморфных свойств элементы плоского дизайна имеют меньший размер (файл). Веб-элементы с меньшим размером файла загружаются быстрее, чем элементы с большим размером файла. Google изменил свой логотип на шрифт без засечек, чтобы уменьшить размер логотипа и, в конечном итоге, время загрузки своей домашней страницы.
Даже с точки зрения разработчика, плоский дизайн работает быстрее. Компоненты плоской веб-страницы представляют собой векторную графику или графику на основе кода, что также способствует сокращению времени загрузки страницы.
Быстро загружаемый веб-сайт влияет на прибыль бизнеса. Это может помочь увеличить конверсию и доход для веб-сайтов.
#4 Преимущество SEO
Скорость загрузки страницы является одним из главных факторов SEO для веб-сайтов.
Поскольку плоский дизайн сокращает время загрузки веб-сайтов, он улучшает рейтинг веб-сайтов в поисковых системах. Медленные веб-сайты с большим количеством графики, в отличие от веб-сайтов с плоским дизайном, получают отрицательные оценки от поисковых систем.
Веб-сайты с плоским дизайном, имеющие больше шансов оказаться в верхней части поисковой выдачи, могут привлекать активных пользователей в поисковых системах. Обычно пользователи с высокими намерениями более склонны к конверсиям.
Надстройка : Судя по всему, Google тестирует новую функцию в своей поисковой выдаче, которая помечает веб-сайты как «медленные», если они имеют большое время загрузки.
Взгляните на скриншот ниже.
Источник изображения: Google#5 Современный вид
Пользователи составляют впечатление о веб-сайте примерно за 50 миллисекунд!
Это означает, что пользователи провели на веб-сайте всего 0,05 секунды, когда они решили, нравится ли им этот веб-сайт.
Так как же это работает? Пользователи не могут просмотреть содержимое сайта за такой короткий промежуток времени.
Они судят о веб-сайте по его внешнему виду. Пользователи посещают веб-сайт, смотрят на его дизайн/интерфейс и составляют мнение о веб-сайте.
Плоский дизайн может помочь сайтам создать благоприятное первое впечатление у посетителей. Когда пользователи посещают веб-сайт или приложение, современный внешний вид плоского дизайна оказывает на них положительное влияние.
Плоский дизайн, пожалуй, самый большой тренд в дизайне на данный момент. Гиганты веб-индустрии и мобильной индустрии, такие как Apple, Google, Microsoft и другие, приняли плоский дизайн с распростертыми объятиями. Пользователи могут принять это как сигнал и установить плоский дизайн в качестве эталона для всех веб-сайтов, которые они посещают.
Заключение
Плоский дизайн в настоящее время является тенденцией дизайна, преобладающей в веб-пространстве и мобильном пространстве. Несмотря на то, что плоский дизайн известен прежде всего тем, что он улучшает взаимодействие с пользователем, у него есть ряд других преимуществ: лучшая читабельность, сокращение времени загрузки страницы, преимущества SEO и т.