OTM
27 июля 2017, 15:20
2

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

Red Collar собирает лучшие дизайнерские проекты и объясняет секреты их магнетизма. Постарайтесь не моргать — в эфире «Digital в Четверг».

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

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

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

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

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

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

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

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

17 курсов по интернет-маркетингу со скидкой до 50%!

Учебный центр Skillbox проводит новогоднюю распродажу: 17 отличных курсов по интернет-маркетингу и менеджменту со скидкой до 50%! В наборе:

  • Интернет-маркетолог от А до Я
  • Управление репутацией бренда
  • Сквозная аналитика
  • Управление digital-проектами
    и многое другое
Большие скидки, возможность рассрочки платежа. Предложение действует только до конца декабря.

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

Реклама

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

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

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

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

Работа со звуком на 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. А наши требования к ним — вот тут.

Не пропустите!

«О настоящем и будущем киберспорта»: интервью с Романом Дворянкиным, генеральным менеджером Virtus.p...
eCommerce-проекты с пугающими интеграциями. Не страшно — проектируем такие уже 5 лет!
Маркетинг влияния: 10 сценариев работы с лидерами мнений
«Доброе время суток, Карл!» — Почему нас вдруг стали бесить новомодные словечки и крылатые выражения
«Хантеры рекомендуют на время поиска работы снизить активность в соцсетях», — Алёна Владимирская
Гид по b2b-рекламе: проблемы, решения, примеры использования
10 непростительных ошибок в контекстной рекламе: чеклист для новичков
«Азбука вкуса» и бесплатные пакеты: разбор репутационного кейса
Меньше денег и сплошные переговоры: что бывает, если фрилансер открывает агентство
От контакта к продаже: как работать с рекламой ВКонтакте для «Сбора заявок»
Почему технарю легче стать хорошим копирайтером, чем гуманитарию. Три факта и личный опыт
Клиентские манипуляции и как их нейтрализовать

Комментарии:

Отличная подборка)

Сайт про кристального человека приятно удивляет
Приятно слышать, спасибо Smile
Реклама


🤔 Чем живёт digital?
Главное — в рассылке:




Вход на cossa.ru

Уже есть аккаунт?
Выбирай любой вариант входа:
Facebook Vkontakte

Используйте свой аккаунт в социальной сети Facebook или Вконтакте, чтобы пользоваться сайтом

Не забудьте написать email на странице своего профиля для управления рассылкой