Подкасты — формат, популярность которого стремительно растет. Сайт подкаста — не такое уж частое явление, однако он помогает продвигать проект и позволяет подробно рассказать о нем потенциальным слушателям.
Представляем вашему вниманию новый, на этот раз довольно необычный, кейс от команды tubik. Познакомьтесь с историей создания яркого, выразительного и смелого веб-сайта для Nonconventional Show.
Проект
Nonconventional Show — это подкаст Элы Крейн, который предлагает слушателям уникальную коллекцию интервью с удивительными разнообразными гостями. Эла задает им вопросы, которые обычно остаются незаданными. Подкаст наводит мосты между привычным и нетрадиционным, обычным и экстраординарным, вдохновляя зрителей и слушателей принять свои уникальные особенности.
Перед командой стояла задача создать сайт, который будет ярко и нестандартно раскрывать миссию и содержание проекта, информировать и увлекать, впечатлять и вдохновлять.
Видеопрезентация сайта Nonconventional Show
Процесс
Nonconventional Show — проект, характер которого во многом определяется личностью его создательницы и ведущей Элы Крейн, человека, всегда готового к приключениям и открытиям. В представленной на сайте биографии говорится о том, что она прожила несколько жизней и побывала плодовитым писателем, владельцем известной видеокомпании, студенткой факультетов археологии, антропологии, цифровых медиа и когнитивной психологии, лайф-коучем, и, конечно, ведущей подкаста.
Прошлые приключения привносят эклектичный опыт в ее новый подкаст "Nonconventional Show" и в сочетании с природным любопытством побуждают ее исследовать вопросы, которые не затрагиваются в большинстве подобных проектов.
В основе подкаста лежит ряд ценностей, которые необходимо было передать через дизайн:
- любопытство: команда делится вдохновляющими историями, чтобы побудить вас оставаться любознательными и открытыми ко всему новому
- смелость: подкаст представляет собой безопасное пространство, в котором люди могут поделиться своими мыслями и мнением
- личностный рост: подкаст дает вам возможность выйти из своей зоны комфорта
- трансформация: подкаст раскрывает вопросы, которые помогут вам изменить себя, свою жизнь и карьеру.
Клиент пришел с глубоким пониманием целей и ценностей своего продукта. Отталкиваясь от них, мы провели тщательное исследование и приступили к обсуждению деталей, которые должны были лечь в основу дизайна сайта. Опираясь на общую идею подкаста и его название, клиент жаждал максимальной оригинальности, которая позволила бы выделить продукт на фоне конкурентов.
Работа над цветовой палитрой проходила в несколько этапов. В результате получился яркий, выразительный контрастный набор цветов, который призван был решить две основные задачи: сделать продукт заметным и запоминающимся, а также подчеркнуть его современность и уникальность.
Следующий этап — выбор шрифтов для сайта. Здесь перед нами также стояло несколько важных задач: шрифт должен был эффективно сочетаться с визуальными компонентами, чтобы передать необходимое впечатление, упростить восприятие текстового контента и побудить пользователя к совершению целевых действий.
Стоит отметить, что для продуктов и услуг, центральным элементом которых является информация, а не физические или визуальные объекты, текст становится базовым инструментом коммуникации. Следовательно, его читабельность и продуманное расположение являются определяющими для создания хорошего опыта взаимодействия.
Выбор пал на семейство шрифтов Söhne. Шрифты имеют идеальный кернинг, отличные диакритические знаки и включают набор стрелок, напоминающих те, что используются на вывесках ньюйоркском метро.
На начальном этапе работы над сайтом, когда мы искали подходящую концепцию, у дизайнеров была идея использовать две разные цветовые темы, темную и светлую, и позволить посетителям переключаться между ними. Однако, протестировав сочетание чередующихся разделов с контрастными фонами, они обнаружили, что такой подход выглядит более динамично и стильно, поэтому был выбран именно он.
Основные принципы, которым мы следовали в дизайне:
- смелые заметные заголовки и теглайны, которые являются отправной точкой для общения с посетителями
- четкая визуальная иерархия, которая делает страницы и разделы сканируемыми и равномерно распределяет информацию, обеспечивая легкий и непринужденный опыт
- фотоконтент, создающий реальную, человеческую эмоциональную связь с ведущим и гостями подкаста
- запоминающиеся визуальные детали и оригинальная коллажная графика
- сочетание вертикальной и горизонтальной прокрутки для различных видов контента
- разнообразные веб-анимации, поддерживающие удобство использования, навигацию и интеграцию спецэффектов в процесс взаимодействия.
Представляем вам дизайн главной страницы.
Взаимодействия на главной странице сайта Nonconventional Show
Мы обсуждали интеграцию в интерфейс модных художественных коллажей с самого начала. Среди различных типов изображений, которые могут использоваться в веб-дизайне, этот вариант определенно был самым подходящим, поскольку он раздвигал границы творчества, привлекал внимание, эффективно передавал визуальные метафоры и повышал эмоциональную привлекательность. Вот некоторые коллажи, разработанные для разных разделов сайта:
А вот как они смотрятся на странице "О нас", визуально подкрепляя сообщение о ценностях и принципах, лежащих в основе проекта.
Дизайн страницы "О нас”
Страница “Эпизоды”, самая информативная и интерактивная, содержит основной контент. Это отличное сочетание элегантности и функциональности. Здесь спецэффекты уступают место продуманной организации различных информационных блоков и плавной, интуитивно понятной навигации.
Сайт наполнен деталями, которые делают процесс взаимодействия с интерфейсом живым и увлекательным, удерживая и вовлекая посетителей. Примеры — анимация наведения, переворачивающая превью эпизода, и интерактивная форма подписки.
Примеры анимации и взаимодействий
А вот еще одна необычная визуальная деталь — забавные стикеры, которые могут стать своего рода пасхалками или реакцией сайта на действия посетителей.
Кастомные стикеры
Минималистичная, воздушная страница контактов разделена на 2 части: правая половина содержит аккуратную и понятную контактную форму с текстовыми подсказками, а левая играет со стильным метафорическим изображением и использует анимированный визуальный акцент — красную стрелку — в качестве акцентного элемента.
Дизайн страницы контактов
Команда также поработала над мобильной версией сайта. Она должна была полностью отражать выбранный подход и оставаться привлекательной и эффективной на любом устройстве.
А вот как выбранная для сайта концепция может быть последовательно применена в дизайне маркетинговых материалов, например, плакатов, рекламирующих новые эпизоды.
Работая над сайтом Nonconventional Show, наша команда получила отличный опыт создания визуального информативного веб-пространства, тщательно продуманного, организованного, человечного, удобного, и в то же время очень эмоционального, захватывающего и впечатляющего.
