Разбор кейса: веб-сайт для подкаста

‍

Представляем вашему вниманию новый, на этот раз довольно необычный, кейс от команды tubik. Познакомьтесь с историей создания яркого, выразительного и смелого веб-сайта для Nonconventional Show.

Проект

Nonconventional Show — это подкаст Элы Крейн, который предлагает слушателям уникальную коллекцию интервью с удивительными разнообразными гостями. Эла задает им вопросы, которые обычно остаются незаданными. Подкаст наводит мосты между привычным и нетрадиционным, обычным и экстраординарным, вдохновляя зрителей и слушателей принять свои уникальные особенности.

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

Видеопрезентация сайта Nonconventional Show

Процесс

Nonconventional Show — проект, характер которого во многом определяется личностью его создательницы и ведущей Элы Крейн, человека, всегда готового к приключениям и открытиям. В представленной на сайте биографии говорится о том, что она прожила несколько жизней и побывала плодовитым писателем, владельцем известной видеокомпании, студенткой факультетов археологии, антропологии, цифровых медиа и когнитивной психологии, лайф-коучем, и, конечно, ведущей подкаста. 

Прошлые приключения привносят эклектичный опыт в ее новый подкаст "Nonconventional Show" и в сочетании с природным любопытством побуждают ее исследовать вопросы, которые не затрагиваются в большинстве подобных проектов.

В основе подкаста лежит ряд ценностей, которые необходимо было передать через дизайн:

• любопытство: команда делится вдохновляющими историями, чтобы побудить вас оставаться любознательными и открытыми ко всему новому

• смелость: подкаст представляет собой безопасное пространство, в котором люди могут поделиться своими мыслями и мнением

• личностный рост: подкаст дает вам возможность выйти из своей зоны комфорта

• трансформация: подкаст раскрывает вопросы, которые помогут вам изменить себя, свою жизнь и карьеру.

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

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

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

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

Выбор пал на семейство шрифтов Söhne. Шрифты имеют идеальный кернинг, отличные диакритические знаки и включают набор стрелок, напоминающих те, что используются на вывесках ньюйоркском метро.

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

Основные принципы, которым мы следовали в дизайне:

• смелые заметные заголовки и теглайны, которые являются отправной точкой для общения с посетителями

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

• фотоконтент, создающий реальную, человеческую эмоциональную связь с ведущим и гостями подкаста

• запоминающиеся визуальные детали и оригинальная коллажная графика

• сочетание вертикальной и горизонтальной прокрутки для различных видов контента

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

Представляем вам дизайн главной страницы.

Взаимодействия на главной странице сайта Nonconventional Show

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

А вот как они смотрятся на странице "О нас", визуально подкрепляя сообщение о ценностях и принципах, лежащих в основе проекта.

Дизайн страницы "О нас”

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

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

Примеры анимации и взаимодействий

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

Кастомные стикеры

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

Дизайн страницы контактов

Команда также поработала над мобильной версией сайта. Она должна была полностью отражать выбранный подход и оставаться привлекательной и эффективной на любом устройстве.

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

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