Рассказываем, как дизайн меняет пользовательский опыт. Показываем на гифках. Это DIЧ

Кристальный человек

Сайт Change Gout от студии Jam3 с подробным рассказом о подагре — болезни суставов и тканей, вызываемой нарушением обмена веществ в организме. Девиз проекта: «Сделать невидимое видимым». Отложения в суставах похожи на стеклянные кристаллы, и на этом построена визуальная часть сайта. Авторы рассказали о причинах, признаках и контроле болезни.

Объёмная метафора

Как рассказать о важном, чтобы зацепило и запомнилось? Помимо прочего — вызвать сопереживание. Для этого найти рабочее красивое сравнение и добавить наглядности. И не той наглядности, что любят в России — яркие стоковые фотки, — а красивое изящное решение. Например, с помощью WebGL создать интерактивную 3D-графику.

Эффективная и выгодная реклама с сервисом от МегаФона

Широкий выбор рекламных каналов, более 100 параметров по интересам, подробная аналитика и другие возможности уже ждут в Личном кабинете. А еще кешбэк 100% за запуск рекламы в первый месяц и еще 10% — каждый месяц.

Узнать больше >>

Реклама. ПАО «МегаФон». ИНН 7812014560. ОГРН 1027809169585. ERID LjN8K1P7y.

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

Креатив из логики

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

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

Или хаотичнее, но и более наглядно — через точки на теле человека, разделённые по цветам, как и круговое меню.

Максимальное погружение

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

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

Яркий минимализм

Виктория Спайсер (Victoria Spicer), декоратор съёмочного пространства, и её сайт от Nick de Jardine.

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

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

Сайт очень похож на его героиню.

Пошевели и посмотри

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

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

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

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

Pop-up, всплывающие страницы, в большинстве случаев легче обычных страниц: для них не надо делать запрос на сервер, а значит сайт работает быстрее. Хотя и здесь зависит от грамотности разработчика и того, чем наполнено всплывающее окно. С точки зрения дизайна pop-up в необычных местах — смелое и запоминающееся решение.

Здесь раздел контактов выполнен на всплывающем полупрозрачном окне и максимально облегчён до трёх строчек контактных данных.

Игрушечный перерыв

Что творят! Гоночки на HTML5 с использованием WebGL — Team Alpine Matmut Challenge от Flaq Digital. Почувствовать себя в известной команде в разных типах соревнований и погодных условиях. Физика на достойном уровне и всё прямо в браузере!

Визуальный брендинг

Г — гамма

Айдентика для греческой премии дизайнеров и графических иллюстраторов EBGE 2016 года.

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

По задумке авторов в айдентике EBGE должны соединиться ритм, контраст, баланс, текстура и работа с акцентами. Но основной ингредиент — свет. Аббревиатуру премии нарисовали светотенями с помощью перемещения источника света. Минималистично, глубоко и изящно.

Не слипнется!

Подборка дизайна упаковки нескольких проектов Рамона Морато (Ramon Morato) и Микеля Гуарро (Miquel Guarro) — двух шеф-поваров из шоколадной академии Барселоны, которые дали вырваться своему таланту в бренде Cacao Barry. Море сластей лакшери-сегмента: от лавандового желе до сладкой десертной икры.

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

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

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

• Непрямая дифференциация. На отечественном рынке привыкли лепить в лоб: чай с кусочками манго — значит, должна быть фотка манго. Здесь же типы и вкусы чая обозначены разным начертанием цифры 5 (5 o’clock) и нежными оттенками пастельных цветов.

  

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

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

  

P. S.

Посмотрите, как круто Adidas Kids показали создание культовой детской коллекции Superstar 360 Kids Originals с помощью motion-дизайна.

Мнение редакции может не совпадать с мнением автора. Ваши статьи присылайте нам на 42@cossa.ru. А наши требования к ним — вот тут.