Веб-дизайн постоянно дополняется разными идеями. Практичность берёт верх, стимулируя развитие трендов в этой области. То придумали выдвигающиеся меню через кнопку-гамбургер, то автоматически скрываемую при скролле навигацию. В 2017 году веб-дизайн делает шаг к реалистичности — улучшается возможность просмотра веб-страниц через меняющие формы, выбор цвета и функционал. Рассмотрим все эти новшества на примерах.
1. Pop-out навигация
Pop-out меню создано специально под смартфоны. Он улучшает пользовательский интерфейс, и хорошо заметен на больших экранах. Спрятанное меню акцентирует внимание на важном.
Преимущества:
- Экономия пространства на экране.
- Акцент внимания пользователей на меню, что улучшает навигацию по сайту.
- Скрытие элементов навигации, помогает лучше сконцентрироваться на других моментах.
- Улучшенный внешний вид первого экрана (куда попадаешь при открытии сайта).
- Более гибкая структура дизайна.
Практика
• Цветовое оформление в тон страниц сайта. Упрощение веб-страницы достигается одноцветным фоном или однотонной структурой выскальзывающего меню.
• Простая крупная типографика. Проще не значит хуже: крупные и жирные легкочитаемые шрифты повышают эффективность навигации и заполняют пространство.
• Гамбургер-иконки с крестиком для открытия и закрытия меню. Соединив их в одном значке, появляется больше ясности и наглядности у пользователей.
• Сдвиг и перекрытие контента при открытии. Оставляя видимую часть контента страницы, выезжающее меню обычно находится сбоку, что на малом экране позволяет пользователю легко к нему вернуться.
2. Альтернативы
В большей части прогнозов веб-дизайна авторы обещают, что в этом году дизайнеры точно откажутся от гамбургер-меню. Однако будем реалистами: совсем отказаться от этого меню вряд ли получится. Но перед тем, как использовать его, ищите возможные альтернативы. Экспериментируйте!
Преимущества:
- Уникальный дизайн.
- Новации привлекают.
- Расширяется опыт пользования (UX).
- Для дизайнеров — новые возможности оформления сайтов.
Практика:
• Различные эксперименты с навигацией по сайту. К «бургерам» до сих пор неоднозначное отношение, но это не преграда — в 2017 году появились интересные новшества в навигации.
• Без меню навигации. Современным пользователям не надо объяснять, как скролить. Предыдущая навигация демонстрирует горизонтальную, бесконечную прокрутки, управление жестами и т. д. Отказываясь от меню совсем, предлагают посетителю использовать и получать опыт «продвинутого» исследования сайтов. В это входит адаптация сайтов под мобильные и планшеты, изменения UX, открытие перспективы для горизонтальной прокрутки.
• Всплывающее меню. Веб-страницы имеют достаточно пространства для создания доступной и заметной навигации без выпадающего меню (Drop-Down).
3. Карточки
Прогнозируют, что буду отходить от карточек, так как это становится обыденно: пик развития карточного дизайна наблюдается сейчас, но, скорее всего, он постепенно станет терять свои позиции.
Лучше начать осваивать и использовать нестандартную разметку. Примеры:
- spark.ru
- cossa.ru
Преимущества:
- Оптимизированный UX-дизайн.
- Меньше неясностей и отвлекающих факторов.
- Минимализм ускоряет загрузку сайта.
Практика:
• Плитки, принцип контейнеров и блоки в структуре веб-страниц. Так называемые карточки выполняются в лаконичном стиле, что позволяет ненавязчиво информировать пользователя. Плиточные интерфейсы легко считываются, что позволяет тратить минимум времени.
• Больше SVG-иконок. Основные преимущества SVG над привычными JPG и PNG —масштабируемость и вектор. Это означает, что SVG не зависит от разрешения, и изображения в этом формате будут отлично смотреться на любых экранах и устройствах. Вдобавок SVG можно анимировать!
• Строгая цветовая палитра. Базовые цвета лишь возвращаются в моду, а двухцветный дизайн сайта или чёрно-белое оформление с добавлением одного цвета становятся популярнее.
• Достаточность белого пространства. Для обеспечения единообразия среди разных форматов, страницам сайта добавляют «воздуха» с помощью белого. Помимо этого достигается изысканно-непринуждённая атмосфера, экономия пространства на страницах, возможность для привлечения внимания и т. д.
4. Material Design Lite (MDL)
Облегчённая реализация материального дизайна от Google (MDL) предоставляет библиотеку шаблонов, наборы элементов (карточки, формы, иконки, кнопки) и представляет интерпретацией каталога готовых Polymer-компонентов. Материальный дизайн, сделанный в MDL, можно внедрить в любой сайт или приложение.
Преимущества:
- MDL отличается от оформления традиционных сайтов, сохраняя изначальные выгоды классического веб-дизайна.
- Легко вникать благодаря наглядности реалистичного интерфейса.
- Кроссплатформенная доступность для всех устройств.
Практика:
• Механика материального мира. Стилистические элементы MDL рассматриваются как реальные физические объекты. Для этого надо правильно выставлять элементы: тени должны выглядеть как отбрасываемые естественным источником света, размер и толщину элементов подбирайте приближенными к реальным объектам, а движение будет реакцией на пользовательское взаимодействие.
• Кастомизация. Благодаря разнообразию библиотеки компонентов MDL вы можете отбирать необходимое для вас в нужном сочетании.
• Палитра плоских цветов. Здесь правят их яркие и смелые сочетания данной палитры. Чаще выбираются два цвета: основной и акцентирующий.
5. Винтажные цвета
Не заметили, как последнюю пару лет в вебе доминируют серые тона, создающие глубину в стиле материального дизайна? 2017 год рушит преграды и возвращает винтажные оттенки в тренд.
6. Разделённый экран
Страница с разделённым экраном напоминает пару независимых карточек. Одну из половин можно оформить меньшими плитками, что позволит наполнить страницу разнородным контентом.
Преимущества:
- Можно добавлять больше визуального веса, не перегружая внимание пользователя.
- Возможности взаимодействия между частями контента.
- Возможность создания интересного и динамичного первого экрана.
Практика:
• Сплит-экран. Инструмент удобен для продвижения контента. Разделение экрана позволяет контент поделить на две части — дополняющую или контрастирующую. Обе стороны должны иметь равные преимущества.
• Резонирующий визуал. Необычные фотографии, броские цвета или вычурная типографика при разделении экрана визуально «оживляют» страницу. Экспериментировать можно до тех пор, пока чрезмерность не начнёт перетягивать внимание.
• Гармония с ощущением потока между разделённым контентом. Обе части самостоятельны, но не изолированы друг от друга. Обе половинки следует объединять запоминающимся акцентным цветом. Также можно использовать перекрывающий объект или общий эффект.
7. Больше видео
Помимо привычного видео сейчас в тренде синемаграммы/синемаграфы. Это изображения, на которых происходят некоторые действия. Ещё их иногда называют «живые изображения» (Live Photo). Их использование повысит время удержания пользователя на сайте и сделает страницу более «живой».
Преимущества:
- Видео завлекает.
- Большой потенциал для эмоциональной связи с пользователем.
- Увеличивает среднюю длительность просмотра страниц.
- Больше гибкости и универсальности в сравнении со статичными изображениями.
Практика:
• Высокое качество и визуальная значимость. Видео развивается в обоих направлениях. Используя этот приём, выбирайте форматы высокой чёткости и осваивайте кинематографические техники на своём ресурсе.
• Хороший контраст. Сыграйте на контрастах: видео и другие элементы на экране. Наложите текст поверх видео, что придаст заметность при помощи противоположных цветов.
• Интерактивный сторителлинг. Комбинируйте видео с этим эффектным трендом — когда история разворачивается с прокруткой и пролистыванием одной или нескольких опций.
8. В ожидании виртуальной реальности (VR)
В веб-дизайн уже просачиваются VR-технологии. Это не потребует специальных устройств для реализации захватывающих возможностей, лишь неких действий.
Преимущества:
- Увлекательный и погружающий формат UX.
- Позволит действовать на опережение по разным вопросам.
- Впечатляющий (в визуальном плане) опыт взаимодействия.
- Интуитивный и реалистичный интерфейс.
Практика:
• Применение в масштабах решаемой задачи. Виртуальная реальность в отличии от веб-дизайна будет намного правдивее во всех аспектах реального мира — изображение людей передаётся с их натуральную величину и будут отображать изменения в перемещении относительно пользователя.
• Дистанционность и комфортность. Здесь дистанционность определяет то, как пользователь сможет взаимодействовать с определёнными элементами.
• Детали. Виртуальная реальность имеет общепринятые передовые правила: плавные перемещения, ориентация всегда на горизонт, пользователь всегда должен верить в происходящее и понимать его.
9. Анимированный интерфейс с микроитерациями
Движение — это жизнь, и человек с удовольствием наблюдает за предсказуемыми изменениями. Сегодня в тренде лёгкая анимация: важно без резких переходов.
Преимущества:
- При органичной интеграции на веб-странице анимация будет напоминать элемент дизайна.
- Интерактивное поощрение пользователей за действие (наведение указателя, клик, скроллинг).
Практика:
• Анимированный маршрут для потребителя информации. Запускайте в прокрутку подсказки для пользователей, как бы говоря, на что обращать внимание. Лёгкая анимация создаёт приятное впечатление от дизайна и добавляет персональности.
Мир меняется и всё вместе с ним. Сегодня в тренде одно, а через день уже другое. Следите за трендами и будьте на волне :)
Автор статьи: Елена Герасимова
Источники: