Flat дизайн сайта - примеры удачных решений!

Пик популярности плоского flat дизайна пришелся на 2012 год, но и до сих пор применяется очень широко. Без него сейчас не обходится ни одна крупная компания: Apple, Amazon, Microsoft и даже IBM работают в стиле flat. Очевидно, что это уже не просто модная тенденция.

Плоский дизайн, особенно в сочетании с минимализмом — сильный эстетический инструмент в арсенале дизайнера. Flat дизайн создает ощущение дорогого и современного продукта, и в ряде случаев применяется для привлечения внимания молодых пользователей. Флэт дизайн отличает простой пользовательский интерфейс. Он легко адаптируется под любые устройства.

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

Несмотря на недостатки, flat дизайн может быть очень интересным.

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

Небольшое количество текста и простота информационной архитектуры. Ультраплоский дизайн оптимален для небольших сайтов объемом 1−10 страниц.

Низкий уровень интерактивности и отсутствие сложных элементов. В случае использования flat дизайна пользовательского интерфейса сложные приложения или интерфейсы с необычными моделями интерактивности не смогут направлять действия пользователей.

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

Но даже если характеристики, приведенные в списке, совпадают с вашими целями, мы рекомендуется избегать абсолютно плоского интерфейса. Конечно, при создании дизайнерского портфолио или простых маркетинговых вебсайтов он не повредит. Более того, подобные веб-сайты могут оказаться в выигрыше благодаря модному flat дизайну без потери удобства использования, «пользовательские» функции в таких вебсайтах минимальны.

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

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

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

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

Никогда не делайте одинаковым обычный и кликабельный текст

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

Четко обозначайте активные элементы

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

• Кнопки должны хоть немного быть похожи на настоящие.
• Если вы выбрали дизайн в стиле flat, воздержитесь от использования прозрачных кнопок (они выглядят как текст, заключенный в тонкую прямоугольную рамку).
• Мелкие элементы должны увеличиваться при клике мышкой.
• В ссылках используйте стандартные, легко узнаваемые иконки. За редким исключением, эти иконки должны работать в паре с текстовым содержанием элемента.

Используйте традиционные макеты и стандартные шаблоны сайтов

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

На карте фиксированных точек по результатам изучения движения глаз пользователя показаны первые несколько секунд после захода пользователя на сайт teavana.com. (Синие круги означают точки фиксации). Так как Teavana использует простой визуальный дизайн с достаточно традиционным макетом онлайн-магазина, сайт удобен в использовании, несмотря на флэт дизайн. Белое пространство и соответствующее ожиданиям расположение верхней строчки меню помогают пользователям легко распознать цель и задачи сайта.

Уделите внимание контрасту

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

Добавьте глубину

Плоский дизайн необязательно должен быть совсем плоским. Добавьте слабые трехмерные тени или градиенты. Так вы четко обозначите взаимосвязь между элементами.

Материальный веб-дизайн (Material Design) — визуальный язык, созданный компанией Google, был представлен в 2014 году. Лучшее качество материального дизайна — это тщательно продуманная структура с четкими правилами, действиями и визуальными свойствами. К сожалению, его не всегда правильно применяют на деле. Например, зачастую тени и градиенты используются для улучшения визуального ряда, а не для того, чтобы поддержать пользователей и создать для них четкие индикаторы.

Сомневаетесь? Добавьте ссылку

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

Итак, подведем итоги.

Плоский дизайн — мощное направление в дизайне — но только при правильном применении.

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

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

Перевод статьи Flat-Design Best Practices

Автор: Kate Meyer