Snapchat запустил функцию «Геофильтры по запросу»
Previous
выбрать за меня
SimilarWeb опубликовал рейтинг самых посещаемых сайтов в России
Next
плоский дизайн, ui
Юзабилити

Как оживить плоский UI дизайн

Автор: Ия Пфанштиль24.02.2016

Многие гиганты индустрии – Google, Starbucks, Microsoft – отдают предпочтение плоскому дизайну. Именно поэтому тренд так быстро набирает популярность. Средние и малые компании следуют примеру более опытных коллег (что довольно иронично, так как плоский дизайн впервые начали использовать именно небольшие бренды).

Как же авторитеты используют плоский дизайн? Вот несколько общих черт:

  • Плоские логотипы
  • Преимущественное использование одного фирменного цвета
  • Простые формы – квадраты и круги
  • Плоские элементы, которые сопровождаются большими изображениями или видео
  • Простые шрифты
  • Плоские эффекты

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

Тренды, веб дизайн, креатив, плоский дизайн, сайт, плоский стиль, юзабилити

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

В этой статье мы рассмотрим 4 плоских эффекта, которые можно использовать самостоятельно, чтобы сделать ваш сайт еще привлекательнее и эффективнее.

1. Небольшие тени

Согласно Flat Design Trends 2016 небольшие тени, которые пользователи могут и не замечать, добавляют эффект глубины. За счет этого элемент выделяется на общем фоне, но не бросается в глаза и не раздражает.

Тренды, веб дизайн, креатив, плоский дизайн, сайт, плоский стиль, юзабилити

2. Контурные кнопки

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

Тренды, веб дизайн, креатив, плоский дизайн, сайт, плоский стиль, юзабилити

3. Hover-анимация

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

Тренды, веб дизайн, креатив, плоский дизайн, сайт, плоский стиль, юзабилити

4. Градиенты

Градиенты возвращаются в плоский дизайн. На этот раз они стали намного проще, представляя собой смену всего двух цветов. Популярным этот эффект сделал сайт Spotify, который использует градиенты в качестве основного элемента дизайна. Раньше градиент был распространен только в качестве фонового эффекта.

Тренды, веб дизайн, креатив, плоский дизайн, сайт, плоский стиль, юзабилити

Spotify – первооткрыватель в сфере трендов. Изображения на страницах сайта (например, the Year in Review) привлекают внимание. Дизайн, определено, плоский, с ярким крупным изображением, но если присмотреться, можно увидеть множество элементов: неоновые тени, контурные кнопки, меняющиеся изображения с длинными тенями.

Тренды, веб дизайн, креатив, плоский дизайн, сайт, плоский стиль, юзабилити

Еще одним замечательным примером является сайт Riiot Labs. Шрифт sans serif и простые цвета говорят о том, что это плоский дизайн. Но нельзя не заметить и градиент, анимацию и белую контурную кнопку с призывом к действию.

Выводы: плоский дизайн в действии

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

Тренды, веб дизайн, креатив, плоский дизайн, сайт, плоский стиль, юзабилити

Для своего международного сайта Corona использует очень простой плоский дизайн (американский сайт не такой плоский). Здесь мы видим большое изображение пляжа с окрашенными в разные цвета блоками, что делает контент в них более кликабельным. На каждой странице используется эта же концепция с включением трендовых элементов: интеграции с социальными сетями, контурных кнопок и увеличенных кнопок навигации.

Тренды, веб дизайн, креатив, плоский дизайн, сайт, плоский стиль, юзабилити

Сайт Adidas Stella Sport отличается плоским многослойным дизайном с элементами материального дизайна и стиля 80-х. Мы видим здесь множество ярких цветов, геометрических форм и простой шрифт sans serif. На разных страницах он выглядит немного по-разному, но остается таким же простым с четкими линиями и свободным пространством.

Тренды, веб дизайн, креатив, плоский дизайн, сайт, плоский стиль, юзабилити

Помимо эстетичного внешнего вида у плоского дизайна есть и другие преимущества. Если все сделать правильно, то он может увеличить показатели конверсии. Жиль Томас отдельно изучил кнопки в плоском стиле и выяснил, что они привлекают на 35% больше кликов. Это еще одна и весьма существенная причина, почему крупные бренды все чаще используют для своих сайтов именно плоский дизайн.

Реакция на статью
поделюсь
0%
интересно
0%
полезно
0%
не уверен
0%
скучно
0%
где автор?
0%
Ия Пфанштиль
Главный редактор, контент-маркетолог, автор. Четыре года пишу о digital. Делюсь открытиями.
Комментарии
Оставить отзыв

    You must log in to post a comment