О проекте
Благотворительный фонд Тимченко отмечает 15 лет работы. К юбилею мы создали digital-платформу, которая объединила все ключевые события года.
- Цель: Сайт должен быть центральным хабом для общения с аудиторией, рассказывая о достижениях, новостях фонда в современном digital-формате.
- Главный вызов: Реализация полного цикла работ — от идеи до запуска — всего за один календарный месяц.
Основной сайт Фонда
Задача
Разработать сайт, который представит все юбилейные инициативы фонда и вовлечет аудиторию и
- станет хабом для всех юбилейных мероприятий: презентации конкурса «Время действовать», премии «Человек дела» и премьеры документального фильма «Люди дела»;
- позволит фонду рассказать о своем 15-летнем пути и ключевых результатах в формате интервью;
- вовлечет пользователей с помощью интерактивной викторины «Загадки из глубинки»;
- будет полностью соответствовать готовому юбилейному фирменному стилю;
- будет адаптирован под все устройства (ПК, планшеты, смартфоны).
Использование юбилейного фирменного стиля
Нам предоставили готовый брендбук с юбилейной айдентикой. Наша задача — грамотно перенести его в цифровое пространство.
Мы тщательно адаптировали предоставленные гайдлайны:
- Цветовая палитра: Активно использовали яркие юбилейные цвета: зеленый, бежевый, голубой и глубокий синий, создав энергичное и праздничное настроение.
- Типографика: Сочетание шрифта Coolvetica для заголовков, акцентов с современным рубленым шрифтом TTCommons для текста, сохранило уникальность стиля и обеспечило удобочитаемость.
- Графика: Интегрировали фирменные иллюстрации, паттерн «лоскутное одеяло», оживили статичные элементы с помощью микровзаимодействий и анимаций.
Юбилейный фирменный стиль
Разработка структуры сайта
Структура сайта была выстроена вокруг главных юбилейных активностей. Мы начинали с сильного оффера и вели пользователя по четкому сценарию.
- Главный экран: Яркий заголовок с ключевым посылом «15 лет — c людьми, о людях, для людей», паттерн «лоскутное одеяло» с галерей, трейлером и фирменными иллюстрациями.
- Юбилейные цифры: Блок с ключевыми показателями работы фонда за 15 лет («5367 поддержанных проектов», «23 проведенных конкурса», «10 млрд рублей расходов за 15 лет» ).
- Интервью: Раздел с персональными историями и интервью команды фонда, раскрывающий его изнутри.
- Вдохновляющие примеры: Кейсы с историями героев фонда из разных регионов России.
- Викторина «Загадки из глубинки»: Центральный интерактивный элемент для вовлечения пользователей.
- Документальный фильм: Блок, посвященный документальному фильму «Люди дела».
Мудборд и референсы
В основе визуальной концепции — мудборд, собранный из референсов. Мы анализировали современные корпоративные сайты, интерактивные образовательные платформы и медиа-проекты с нелинейной подачей контента.
- Корпоративные сайты: Смотрели на современные решения с смелыми акцентами и анимацией.
- Интерактивные проекты: Искали вдохновение в сайтах с игровыми механиками и викторинами.
- Образовательные платформы: Изучали подход к подаче сложной информации в простой и увлекательной форме.
- Медиа: Смотрели, как крупные издания работают с длинными текстами и интервью, разбивая их на удобные блоки.
Прототип
После утверждения структуры мы создали детальный интерактивный прототип. На этом этапе мы:
- Четко определили расположение всех ключевых блоков: навигации, статистики, карты с историями, блоков конкурса и премии.
- Продумали логику викторины: Определили количество шагов (17 вопросов), механику выбора ответа и отображения правильного варианта с пояснением.
- Расставили все акценты и приоритеты по контенту.
- Продумали логику адаптации каждого блока под мобильные устройства.
- Утвердили с клиентом сценарий взаимодействия пользователя с сайтом до начала дизайна, что сэкономило массу времени.
Прототип юбилейного лендинга
Дизайн-макет
В дизайне мы сделали ставку на динамику, эмоции и удобство, уделив особое внимание контенту.
- Анимации: Уделили особое внимание анимации, чтобы оживить интерфейс и сделать его плавным. Продумали анимационные переходы между блоками, появление элементов при скролле.
- Визуальная иерархия: Использовали контрастные цвета и размеры шрифтов, чтобы направить внимание пользователя на главные юбилейные анонсы.
- Работа с контентом:
- Интервью оформили в виде карточек с цитатами и портретами, добавив удобную навигацию «Следующее интервью».
- Блоки конкурса, премии и фильма визуально унифицировали, создав четкий и узнаваемый паттерн для подачи важной информации.
- Адаптивность: Сразу разрабатывали три версии макета (десктоп, планшет, телефон), чтобы на каждом устройстве сайт смотрелся органично.
Верстка сайта
Верстку выполнили с фокусом на производительность, доступность и визуальную составляющую.
- Сложные интерактивные элементы: Разработали и внедрили механику викторины и анимированной карты с нуля.
- Полная адаптивность: Сайт корректно работает на всех разрешениях экрана и в современных браузерах.
- Кастомная графика: Создали набор кастомных иллюстраций и анимированных элементов специально для викторины.
- Базовая SEO-оптимизация: Настроили все мета-теги, заголовки, alt-атрибуты и структуру данных для лучшей индексации.
Добавление на сайт викторины
Викторина «Загадки из глубинки» стала ключевым интерактивным элементом сайта.
- Разработка с нуля: Реализовали механику из 17 вопросов.
- Обратная связь: Настроили мгновенное пояснение к ответам, превращая викторину в образовательный инструмент.
- Индикация прогресса: Пользователь всегда видит, на каком он шаге, что мотивирует дойти до конца.
- Плавная анимация: Все переходы между вопросами анимированы, создавая ощущение игры.
- Дизайн: Отрисовали уникальные иллюстрации в юбилейном фирменном стиле.
Итоговые результаты
Мы успешно реализовали проект в сжатые сроки — всего за 1 месяц.
- Единая платформа: Создали многофункциональный хаб для всех юбилейных инициатив фонда.
- Яркий дизайн и интерактив: Внедрили интерактивную механику викторины.
- Полная адаптивность: Сайт безупречно работает на всех устройствах.
- Запуск в срок: Проект был сдан точно в оговоренную дату.
Яркий и современный сайт стал достойным цифровым памятником 15-летней работе фонда, позволил красиво рассказать о его достижениях и вовлечь аудиторию в празднование юбилея через игровой формат. Сайт будет наполняться новостями в течение всего 2025 года.
Хотите такой же эффектный проект для вашей компании? Напишите нам, и мы обсудим, как можно реализовать ваши идеи!
Хотите такой же эффектный проект для вашей компании? Напишите нам, и мы обсудим, как можно реализовать ваши идеи!
