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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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