Оставить заявку
WEB CENTER

Шесть вебдизайнерских трендов 2015 и 2016 годов, которые нужно знать.

Недавно мы наблюдали всплеск популярности адаптивного веб-дизайна, ибо всё больше и больше сайтов вовлекаются в гонку за «мобильной готовностью», которая, учитывая имеющую место популяризацию обновления Mobile Friendly update, лишь набирает актуальность.

Давайте рассмотрим наиболее важные дизайнерские тренды 2015 и 2016 гг.

1. Распространение UI-шаблонов для пользовательских интерфейсов.

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

Некоторые люди, такие как Matthew Monbre, провинились тем, что в ходе оформления сайта своей компании переняли вариант дизайна «как у всех».

Вариант дизайна сайта

В то же время, сходство – это не всегда плохо. Потому что изменился сам подход к использованию Интернета, и результатом этого стало появление множества похожих UI-шаблонов (шаблонов пользовательских интерфейсов). Дизайнерские решения стали более зрелыми, и UI-шаблоны оставляют мало возможностей для инноваций.

Иными словами, кнопка выхода останется кнопкой выхода, её функция не изменится. То же самое можно сказать о форме для регистрации. Здесь не нужно изобретать велосипед. UI-шаблоны просто ведут нас по проторенной дорожке.

Вот несколько шаблонов, с которыми вам следует познакомиться:

  1. Иконка меню «гамбургер»: хотя некоторые критически относятся к использованию этого шаблона, несомненно, он относится к наиболее популярным и узнаваемым среди пользователей.

    Иконка меню «гамбургер»

  2. Регистрация учётной записи: этот шаблон вы увидите при регистрации на любом сайте. Это может быть несколько полей для заполнения или кнопка, которая позволит вам зарегистрироваться в социальной сети. Многоступенчатые мастера настроек также эффективны, так как они «вылущивают» нужные поля, делая процесс более гладким и плавным.

    Регистрация учётной записи

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

    Длинная прокрутка

  4. Визитки: с подачи Pinterest визитки распространились по всей сети, поскольку они позволяют размещать информацию на небольших фрагментах и очень удобны для сканирования. Каждая визитка несёт свою идею. Эти элементы имеют прямоугольную форму, и их легко можно подогнать под различные параметры экранов.

    Шаблоны визитки

  5. Изображения персонажей: поскольку зрение – это одно из наиболее совершенных чувств, быстрее всего привлечь внимание пользователя можно с помощью изображений персонажей в HD-качестве. Прогресс в области сжатия частоты и объёма данных избавил нас от трудностей загрузки элементов. Один из способов размещения элементов, который Вам скорее всего встретится – это размещение персонажа в начале прокрутки, за которым следуют остальные элементы, организованные в виде зигзагообразных цепочек, либо набор открыток или визиток.

    Изображения персонажей

Более подробную информацию о UI-шаблонах и способах организации элементов с можно найти в бесплатной электронной книге Web Design Trends 2015 and 2016.

2. Яркая анимация

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

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

  1. Крупная. Объекты используются в качестве основных интерактивных элементов, более привлекательны для пользователей; к ним относятся эффекты, такие как параллактическая прокрутка и всплывающие уведомления.
  2. Мелкая. Элементы включают спиннеры, курсоры и индикаторы загрузки и не требуют каких-либо действий со стороны пользователей.

Мы рассмотрим семь самых популярных видов анимации.

Анимация загрузки

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

Анимация загрузки

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

Навигация и меню (без прокрутки)

Популярность скрытых меню растёт, так как они позволяют экономно использовать пространство экрана. Внизу приведён пример страницы, созданной в совместной программе UXPin, на которой меню выскакивают после щелчка на той или иной кнопке. Это позволяет избегать резких переходов (например, при открытии боковых меню, спрятанных за иконкой-гамбургером).

Анимация при наведении курсора

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

Анимация при наведении курсора

Галереи и слайдшоу

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

Галереи и слайдшоу

Двигающиеся изображения

Движение всегда привлекает внимание, чем активно пользуются веб-дизайнеры. Такая анимация также помогает установить визуальную иерархию сайта. В свою очередь, это придаёт толику интриги и таинственности формам, элементам СТА и меню.

Двигающиеся изображения

Прокрутка

Плавная прокрутка управляется анимацией, позволяет пользователю контролировать навигацию и задавать скорость движения объектов.

Прокрутка

Фоновая анимация/видео

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

Простой анимированный фон

3. Микровзаимодействия

Микровзаимодействия происходят везде и постоянно: к ним относятся различные действия, начиная от выключения будильника на мобильном телефоне до добавления плюсика к понравившейся фотографии с котом на Facebook.

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

Микровзаимодействия

Микровзаимодействия осуществляют или помогают осуществлять различные действия:

  1. Установка статуса или оставление отзыва
  2. Просмотр результата действия
  3. Помощь пользователям в осуществлении различных манипуляций

Микровзаимодействие – это важнейшая составляющая любого приложения

Как и рекомендует Web Design Trends 2015 and 2016, вы постараетесь сделать всё для того, чтобы эти взаимодействия были практически незаметными. Не стоит бросаться с головой в омут, относитесь к этому проще. Постарайтесь тщательно продумать каждую мелочь, сделайте так, чтобы все действия были естественными. Текст должен быть написан человеческим языком, а не машинным.

Микровзаимодействия играют важную роль в любом дизайнерском проекте. Если в программе отсутствует какой-либо компонент, предполагающий микровзаимодействие с пользователем, то вы столкнётесь с трудностями при построении сайта или разработке мобильного приложения.

Каждый из этих видов взаимодействия ведёт пользователя в направлении решения, которое ориентировано на человека. Эта идея сделать устройства более похожими на людей является ключом к их внедрению и удобству в использовании.

4. Материальный дизайн – более яркая альтернатива плоскому дизайну

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

Материальный дизайн

Цель материального дизайна – создание чётких и современных решений, ориентированных на повышение уровня пользовательской удовлетворённости (UX). Несмотря на имеющие место негативные выпады в адрес эстетической стратегии Google, большинство пользователей положительно отзываются о новом решении и считают, что оно способно в корне изменить дизайнерскую концепцию.

Минимализм материального дизайна имеет немало общего с другим развивающимся трендом – плоским дизайном. В то же время, материальный дизайн делает упор на глубину тона и тени, благодаря чему объекты выглядят более объёмными, чем в плоском дизайне.

15.png

До сих пор большинство проектов материального дизайна сводилось к оформлению приложений. Однако в июле Google объявил о выпуске версии Material Design Lite, которая лучше подходит для вебсайтов. Тем не менее, изначально предполагалась широкая поддержка функций пользовательского интерфейса и элементов повышения пользовательской удовлетворённости различными устройствами. Lite использует обычные CSS, HTML и JavaScript и призвана облегчить процесс наделения сайтов формой и интуитивностью, присущим сайтам, выполненным в Material Design.

Material Design Lite не предполагает использования лишь одного шаблона, и разработчики могут применять любые клиентские приложения для создания своих сайтов. Также, Material Design Lite прост с точки зрения кодировки.

5. Адаптивный дизайн

Адаптивный дизайн завоевал невероятную популярность за последние годы благодаря мобильному интернету.

Адаптивный дизайн

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

Чтобы заставить выстроенный таким способом сайт работать на пределе своих возможностей, как говорит Guy’s Pod, дизайнерам следует:

  1. Избегать загрузки изображений JavaScript и CSS с тэгом display:none. Изображение все равно будет загружено в устройство, и вес страницы окажется неоправданно большим.
  2. Используйте адаптивные изображения, размер которых выражен в процентах.
  3. Используйте условную загрузку для элементов JavaScript, так как многие из таких элементов, применяемые в десктоповых версиях, не поддерживаются более компактными устройствами. Особое внимание обращайте на скрипты от третьих сторон, например скрипты, которые используются для обмена в социальных сетях, поскольку они часто затрудняют работу сайтов и снижают функциональность.
  4. Используйте RESS – Responsive and Server Side
  5. Применяйте средства для тестирования, так как это помогает анализировать и оптимизировать работу сайта.

Производительность важна не только для удовлетворения пользователя, но и для самой компании Google, в свете появления обновления в апреле 2015 г. Mobile Friendly update. Адаптивный веб-дизайн также приветствует минимализм, который способствует уменьшению веса страниц. Кроме того, он позволяет работать с открытками и визитками, так как они легко подгоняются под любые точки прерывания и параметры экрана (подобно изменению прямоугольных контейнеров для контента).

17.png

Адаптивный веб-дизайн уже не столько тенденция, сколько общепринятая практика. Кроме того, дизайнеры научились находить различные умные способы избегания проблем, связанных с низкой скоростью.

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

6. Плоский дизайн не исчезнет в ближайшее время

Плоский дизайн существует уже в течение некоторого времени, и он хорошо адаптирован под идеи минимализма, совместим с адаптивным и материальным дизайном.

Плоский дизайн

Вероятно, по мере движения вперёд, мы станем свидетелями появления следующих тенденций в сфере плоского дизайна:

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

Дополнительные советы веб-дизайнерам

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

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

Более подробно об этих 10 наиболее крупных трендов можно узнать из электронной книги Web Design Trends 2015 and 2016. Это лучший источник с анализом 166 примеров работ от таких компаний как Google, Apple, Reebook, BMW, Intercom, Adidas, Dropbox и многих других.

Джерри Као Джерри Као uxpin.com

Джерри Као – разработчик стратегий повышения пользовательской удовлетворённости для UXPin – программы для создания фундаментов и прототипов. Чтобы посетить визуальное практическое исследование в веб-дизайне, прочтите бесплатную электронную книгу The Zen of White Space in Web UI Design. В ней приводится анализ 23 примеров дизайнерских работ от ведущих компаний, включая Apple, Square, Lever, Wunderlist и других.