Недавно мы наблюдали всплеск популярности адаптивного веб-дизайна, ибо всё больше и больше сайтов вовлекаются в гонку за «мобильной готовностью», которая, учитывая имеющую место популяризацию обновления Mobile Friendly update, лишь набирает актуальность.
Рассмотрим наиболее важные дизайнерские тренды 2015 и 2016 гг.
1. Распространение UI-шаблонов для пользовательских интерфейсов.
Один из наиболее заметных побочных эффектов адаптивного дизайна – слишком однообразное оформление сайтов. Однако винить только адаптивный дизайн в этом нельзя. Здесь свою роль сыграли также распространение WordPress и бурное развитие рынка тем.
Люди, такие как Matthew Monbre, провинились тем, что в ходе оформления сайта своей компании переняли вариант дизайна «как у всех».
В то же время, сходство – это не всегда плохо. Потому что изменился сам подход к использованию Интернета, и результатом этого стало появление множества похожих UI-шаблонов (шаблонов пользовательских интерфейсов). Дизайнерские проекты стали более зрелыми, и UI-шаблоны оставляют мало возможностей для инноваций.
Иными словами, кнопка выхода останется кнопкой выхода, её функция не изменится. То же самое можно сказать о форме для регистрации. Здесь не нужно изобретать велосипед. UI-шаблоны просто ведут нас по проторенной дорожке.
Вот несколько шаблонов, с которыми лучше познакомиться:
- Иконка меню «гамбургер»: хотя некоторые критически относятся к использованию этого шаблона, несомненно, он относится к наиболее популярным и узнаваемым среди пользователей.
- Регистрация учётной записи: этот шаблон вы увидите при регистрации на любом сайте. Это может быть несколько полей для заполнения или кнопка, которая позволит вам зарегистрироваться в социальной сети. Многоступенчатые мастера настроек также эффективны, так как они «вылущивают» нужные поля, делая процесс более гладким и плавным.
- Длинная прокрутка: размещение всех важных элементов на первой полосе экрана – известный миф. Кроме того, почти все пользователи уже привыкли к длинным прокруткам благодаря мобильным устройствам. Это хорошо работает для сайтов, стремящихся заинтересовать пользователей с помощью длинных рассказов, при этом происходит имитация многостраничных сайтов путём разделения страницы прокрутки на отдельные части.
- Визитки: с подачи Pinterest визитки распространились по всей сети, поскольку они позволяют размещать информацию на небольших фрагментах и очень удобны для сканирования. Каждая визитка несёт свою идею. Эти элементы имеют прямоугольную форму, и их легко можно подогнать под различные параметры экранов.
- Изображения персонажей: поскольку зрение – это одно из наиболее совершенных чувств, быстрее всего привлечь внимание пользователя можно с помощью изображений персонажей в HD-качестве. Прогресс в области сжатия частоты и объёма данных избавил нас от трудностей загрузки элементов. Один из способов размещения элементов, который Вам скорее всего встретится – это размещение персонажа в начале прокрутки, за которым следуют остальные элементы, организованные в виде зигзагообразных цепочек, либо набор открыток или визиток.
Более подробную информацию о UI-шаблонах и способах организации элементов с можно найти в бесплатной электронной книге Web Design Trends 2015 and 2016.
2. Яркая анимация
Для повышения информативности, интерактивности и привлекательности сайтов, веб-дизайнеры всё чаще используют анимацию.
В то же время, нельзя вставлять анимацию куда попало. Нужно быть уверенным в том, что это действительно добавит художественности и индивидуальности вашему сайту. По типам анимацию можно разбить на 2 группы:
- Крупная. Объекты используются в качестве основных интерактивных элементов, более привлекательны для пользователей; к ним относятся эффекты, такие как параллактическая прокрутка и всплывающие уведомления.
- Мелкая. Элементы включают спиннеры, курсоры и индикаторы загрузки и не требуют каких-либо действий со стороны пользователей.
Мы рассмотрим семь самых популярных видов анимации.
Анимация загрузки
Эти элементы придают различные рутинным процедурам зрелищность. Они чаще всего используются в плоском дизайне, в различных минималистичных проектах, портфолио и на одностраничных сайтах.
Элементы должны быть простыми, при этом следует избегать использования аудио. В то же время, они должны подчёркивать индивидуальность Вашего сайта и вписываться в цветовую гамму.
Навигация и меню (без прокрутки)
Популярность скрытых меню растёт, так как они позволяют экономно использовать пространство экрана. Внизу приведён пример страницы, созданной в совместной программе UXPin, на которой меню выскакивают после щелчка на той или иной кнопке. Это позволяет избегать резких переходов (например, при открытии боковых меню, спрятанных за иконкой-гамбургером).
Анимация при наведении курсора
Курсоры добавляют интуитивности сайтам, так как навигация осуществляется с помощью мыши. Пользователь просто наводит маркер мыши на незнакомый элемент, в результате чего информация о его функции выводится на экран.
Галереи и слайд шоу
С помощью галереи и слайдшоу очень удобно демонстрировать большое количество изображений, не создавая неудобств для пользователей. Такие элементы хороши для сайтов, ориентированных на фотографическое искусство, а также сайтов, предназначенных для демонстрации той или иной продукции и/или портфолио.
Двигающиеся изображения
Движение всегда привлекает внимание, чем активно пользуются веб-дизайнеры. Такая анимация также помогает установить визуальную иерархию сайта. В свою очередь, это придаёт толику интриги и таинственности формам, элементам СТА и меню.
Прокрутка
Плавная прокрутка управляется анимацией, позволяет пользователю контролировать навигацию и задавать скорость движения объектов.
Фоновая анимация/видео
Простой анимированный фон добавит яркости сайту, однако здесь следует избегать излишеств, иначе анимация может получиться слишком навязчивой. Идея состоит в том, чтобы анимировать отдельные участки, либо придать целостному объекту плавное движение.
3. Микровзаимодействия
Микровзаимодействия происходят везде и постоянно: от выключения будильника на мобильном телефоне до добавления плюсика к понравившейся фотографии с котом на Facebook.
Когда мы выполняем эти действия, мы не задумываемся о них. С микровзаимодействия часто начинается новый день. Например, выключая сигнал будильника на мобильном телефоне, мы взаимодействуем с его интерфейс. И таких элементов становится всё больше и больше в программах и устройствах, которыми мы пользуемся.
Микровзаимодействия осуществляют или помогают осуществлять различные действия:
- Установка статуса или оставление отзыва
- Просмотр результата действия
- Помощь пользователям в осуществлении различных манипуляций
Микровзаимодействие – это важное для любого приложения
Как и рекомендует Web Design Trends 2015 and 2016, вы постараетесь сделать всё для того, чтобы эти взаимодействия были практически незаметными. Не стоит бросаться с головой в омут, относитесь к этому проще. Постарайтесь тщательно продумать каждую деталь, сделайте так, чтобы все действия были естественными. Текст должен быть написан человеческим языком, а не машинным.
Микровзаимодействия играют важную роль в любом дизайнерском проекте. Если в программе отсутствует какой-либо компонент, предполагающий микровзаимодействие с пользователем, то вы столкнётесь с трудностями при построении сайта или разработке мобильного приложения.
Каждый из этих видов взаимодействия ведёт пользователя в направлении решения, которое ориентировано на человека. Эта идея сделать устройства более похожими на людей является ключом к их внедрению и удобству в использовании.
4. Материальный дизайн – более яркая альтернатива плоскому дизайну
В прошлом году Google запустил стилистически новый тип языка - Material Design. Он предполагает использование эффектов теней, а также идеи движения и глубины, чтобы сделать дизайнерские решения более реалистичными.
Цель материального дизайна – создание чётких решений, ориентированных на повышение уровня пользовательской удовлетворённости (UX). Несмотря на имеющие место негативные выпады в адрес эстетической стратегии Google, большинство пользователей положительно отзываются о новом решении и считают, что оно способно в корне изменить дизайнерскую концепцию.
Минимализм материального дизайна имеет немало общего с другим развивающимся трендом – плоским дизайном. В то же время, материальный дизайн делает упор на глубину тона и тени, благодаря этому объекты выглядят более объёмными, чем в плоском дизайне.
До сих пор большинство проектов материального дизайна сводилось к оформлению приложений. Однако в июле Google объявил о выпуске версии Material Design Lite, которая лучше подходит для сайтов. Тем не менее, изначально предполагалась широкая поддержка функций пользовательского интерфейса и элементов повышения пользовательской удовлетворённости различными устройствами. Lite использует обычные CSS, HTML и JavaScript и призвана облегчить процесс наделения сайтов формой и интуитивностью, присущим сайтам, выполненным в Material Design.
Material Design Lite не предполагает использования лишь одного шаблона, и разработчики могут применять любые клиентские приложения для создания своих сайтов. Также, Material Design Lite прост с точки зрения кодировки.
5. Адаптивный дизайн
Адаптивный дизайн завоевал невероятную популярность за последние годы благодаря мобильному интернету.
Можно с уверенностью утверждать, что в ближайшем будущем адаптивный дизайн никуда не исчезнет, так как это недорогой способ создания сайтов с мобильной поддержкой. В то же время, при неправильном использовании элементов адаптивного веб-дизайна проблемы всё же могут возникнуть, и в особенности это касается функционирования.
Чтобы заставить выстроенный таким способом сайт работать на пределе возможностей, как говорит Guy’s Pod, дизайнерам следует:
- Избегать загрузки изображений JavaScript и CSS с тэгом display:none. Изображение все равно будет загружено в устройство, и вес страницы окажется неоправданно большим.
- Используйте адаптивные изображения, размер которых выражен в процентах.
- Используйте условную загрузку для элементов JavaScript, так как многие из таких элементов, применяемые в десктоповых версиях, не поддерживаются более компактными устройствами. Особое внимание обращайте на скрипты от третьих сторон, например скрипты, которые используются для обмена в социальных сетях, поскольку они часто затрудняют работу сайтов и снижают функциональность.
- Используйте RESS – Responsive and Server Side
- Применяйте средства для тестирования, так как это помогает анализировать и оптимизировать работу сайта.
Производительность важна не только для удовлетворения пользователя, но и для самой компании Google, в свете появления обновления в апреле 2015 г. Mobile Friendly update. Адаптивный веб-дизайн также приветствует минимализм, который также уменьшает вес страниц. Кроме того, он позволяет работать с открытками и визитками, так как они легко подгоняются под любые точки прерывания и параметры экрана (подобно изменению прямоугольных контейнеров для контента).
Адаптивный веб-дизайн уже не столько тенденция, сколько общепринятая практика. Кроме того, дизайнеры научились находить умные способы избегания проблемы с низкой скоростью.
Несомненно, адаптивный дизайн очень полезен и гибок, однако чтобы обеспечить высокий уровень пользовательской удовлетворенности, сайты должны работать очень быстро.
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 и других.
