DIЧ: Дизайн как сторителлинг и упражнения в минимализме. Читайте на Cossa.ru

29 июня 2017, 15:50

DIЧ: Дизайн как сторителлинг и упражнения в минимализме

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

DIЧ: Дизайн как сторителлинг и упражнения в минимализме

Дизайн как сторителлинг

Промо-сайт фильма «История призрака» от Watson/DG. «Магазин призраков» — шутливая интернет-лавочка с описанием уникальных преимуществ «фирменного» призрачного одеяния. Вы можете купить его, расплатившись своим временем.

Расчертить сайт

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

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

Меню как элемент дизайна

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

Контент-маркетинг в России. Исследование Коссы

Мы хотим разобраться, что происходит в российском контент-маркетинге прямо сейчас. Какие задачи решает контент-маркетинг? Какие форматы работают лучше? На какие метрики ориентироваться? Поделитесь опытом!

Ответить на 10 вопросов

Это займёт меньше 10 минут

Меню «Магазина призраков» разделено на два блока. Фоновая заставка дублирует главную страницу, а сами блоки логично разделены. Слева пункты, относящиеся к фильму — трейлер, рецензия и дата релиза, а справа информация о проекте — интернет-магазин, его физический адрес и онлайн-камеры.

Привлечь внимание

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

Приобрести облик призрака можно за 8 минут и 19 секунд своей жизни. Зажав левую кнопку мыши в любой точке главного экрана, вы увидите нарезку кадров от лица призрака. Вы уже надели желанное белое полотно и смотрите на мир сквозь сетчатую ткань. На экране появляются атмосферные фразы, которые то подталкивают ждать до конца, то предлагают уйти. Этот приём здорово погружает в атмосферу, задерживает на сайте и подталкивает к изучению всех разделов. Кстати, в конце интерактива — интересная развязка, умножающая глубину подтекста ;–)

Как сделать конфетку из булочек

Сайт компании Panike — изготовитель хлеба и другой выпечки — от digital-агентства Bürocratik. Целая ароматная хрустящая история с кучей крутых фишек.

Карточка товара

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

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

Больше, чем About

Если вы заботитесь не только об информативности, но и о качественной презентации товара, каждый раздел сайта может стать added value. Когда посетитель нажимает на блок «Преимущества», он готовится к сухим текстовым пунктам, которые — навязчиво или не очень — убеждают совершить покупку. Любая ваша страница должна превосходить ожидания.

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

Качество в деталях

Важна каждая мелочь. Например, страны реализации продукта: можно перечислить их в одну строчку и успокоиться. А можно сделать интерактивную карту.

Страны, где можно взять себе корзинку ароматных круассанов от Panike, разбросаны светящимися точками по всей планете. При движении курсора материки отбрасывают реалистичную тень. Стильно и всеобъемлюще.

Видеопауза: как придать звуку лицо

Переосмысление айдентики Нидерландского камерного хора на его 80-летие. Ритм и драйв, нежность и красота звуковых переливов. Круто отразили многослойность звуковых волн и широту стилей исполнения. Кого зацепило — на Behance есть полная презентация.

Смыслы минимализма

Capt — стартап из Сан-Франциско. Глобальная платформа, на которой создатели видеороликов могут монетизировать свои работы.

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

Айдентика для компании Capt сделана в минималистичном стиле. Логотип — красный круг, символизирующий значок записи видео. Он же основной символ, который повторяется на всех виртуальных площадках и физических носителях. Такой простой и меткий элемент запоминается легко и надолго.

Продолжая тему минимализма и умения закладывать в простые символы глубокие понятия.

Nomad — необычное туристическое агентство из Португалии. Их туры предлагают восхождение на пики Европы или пересечение айсбергов Гренландии. Приключения и уникальный опыт, новый способ познания нашей планеты.

Логотип выглядит как две вертикальные черты — знак паузы. Простая идея: остановите рутину и получите новый опыт вместе с Nomad. На основе этой простой и универсальной идеи создали серию иконок с разными туристическими символами, своеобразный визуальный язык компании.

О динамике пространства

Клип группы Grand Yellow на песню On My Way от студии Akatre. Помимо профессиональной работы с объёмом и стильного микса цвета и формы, это видео — отличный пример качественного управления вниманием. Заметьте: ваш взгляд бегает по экрану за центральными фигурами, он не находится в одной точке. Так лучше ощущается динамика пространства, а смотреть видео становится в разы комфортней.

Все выпуски DIЧ лежат тут.

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


Письма Коссы — лаконичная рассылка о диджитале в рунете


📨

Письма Коссы:
опыт и мнения диджитала ↓