Плоский дизайн сайта — примеры удачных решений

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

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

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

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

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

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

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

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

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

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

• Кнопки должны хоть немного быть похожи на настоящие.

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

• Мелкие элементы должны увеличиваться при клике мышкой.

• В ссылках используйте стандартные, легко узнаваемые иконки. За редким исключением, эти иконки должны работать в паре с текстовым содержанием элемента.

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

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

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

Главная активная кнопка 'See more' на первом экране уже не так заметна, и на фоне крупного изображения она «потеряна» для пользователя. Улучшить дизайн страницы можно, добавив цветовой акцент, например, более темный оттенок голубого, который уже используется в пользовательском интерфейсе.

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

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

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

В довольно плоском по форме приложении для аннотаций для iOS используются едва видимые тени. Они попадают под интерактивные элементы и панель инструментов и разделяют элементы пользовательского интерфейса от текста.

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

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

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

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

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