Шишки парк
Айдентика, 3D-дизайн, сайт и контент для экстрим-парка в сосновом лесу
Корпоративная медиа-платформа для МегаФона, где компания рассказывает, как технологии меняют бизнес
Разработать медиа-платформу, где команда МегаФона будет рассказывать о цифровых инструментах для бизнеса и новостях в мире digital. Сделать удобный интерфейс для чтения с любого устройства и спроектировать административную часть с полным набором современных функций для постинга.
МегаФон
Медиа
2020
Дизайн сайта
Frontend-разработка
Backend-разработка
Это блог о бизнесе, а значит, пестрое и веселое оформление неуместно. При этом сам бренд современный и прогрессивный, а значит дизайн не должен быть скучным. Разработали систему цветовых плашек для материалов, где каждый цвет соответствует категории статей. При скролле у превью карточек появляется цветная тень, дублирующая оттенок категории материала, которая смещается и постепенно возвращается на место. Все это работает благодаря специальной формуле, используемой на фронтенде.
В журнале встречаются большие статьи. Сделали прогресс-бар, чтобы читатель осознавал пройденный на странице путь, ему было легко ориентироваться на сайте и комфортно потреблять контент.
Визуально индикатор отображается на подзаголовках статьи. Прочитанные разделы становятся зелеными, а предстоящие остаются черными. Они также активны: по клику пользователя переносит на нужную часть материала.
Для быстрой работы медиа мы используем фреймворк Next.js. Это важно и для SEO-оптимизации: при первой загрузке страницы отдаются как статичные html — это делает контент видимым для поисковых роботов.
Настроили привязку тегов, чтобы поисковики индексировали заголовки и подзаголовки: после публикации названию статьи автоматически присваивается значение H1. Метку второго уровня H2 редактор может выставлять самостоятельно при редактировании материала в административной панели.
Настроили два вида интеграции для почтовых рассылок: Sensay и Mailgun. Одна для почтовых рассылок пользователям, подписавшимся на уведомления о новых материалах и выборе редакции, а вторая для внутренних уведомлений и получения фидбека от читателей.
Добавили тумблер переключения световой темы, чтобы читателю было комфортно смотреть материалы при любом освещении. Сделали интерфейс интуитивно понятным и нарисовали на кнопке ассоциативные иконки звезд и солнца, которые меняются в зависимости от режима.
Со стороны разработки это выглядит как изменение стилей элементов, для чего используются нативные CSS переменные. Они изменяются при клике на тумблер переключения цветовой схемы и буквально перекрашивают весь сайт одним нажатием.
В конце каждого материала пользователя ждет слайдер с похожими материалами по тегам двух параметров: категории статьи и типу материала. В первом случае публикации схожи из-за общей тематики, например, «безопасность», во втором — любители подкастов сразу увидят, что еще можно послушать.
Спроектировали сайт так, чтобы он был готов к быстрым изменениям и росту проекта: внедрение функции поиска и фильтры по категориям и типам материалов.
Подготовили для этого в том числе и элементы интерфейса: например, кнопка «Показать все статьи» появится на главной странице после определенного количества материалов.
На старте журнала планировались только текстовые материалы, но мы встроили в административную часть сайта универсальный редактор, позволяющий собирать разные типы контента: подкасты, лонгриды, кейсы и т.д.
Сделали удобную версию сайта для телефонов и планшетов, чтобы пользователю было комфортно использовать сайт с мобильного устройства, например, в дороге. Улучшили взаимодействие с адаптивной версией, внедрив знакомые мобильным пользователям механики управления контентом и избавились от лишних элементов.
Например, убрали стрелки в слайдерах: перелистывать статьи читатель может привычным свайпом. Отрисовали для мобильной версии три вида укороченных карточек публикаций, чтобы на экране смартфона умещалось больше контента. Блок подписки десктопной версии на мобильном устройстве смотрелся слишком громоздко и для адаптива мы отрисовали его минималистичным.
Редакторам доступен широкий выбор для форматирования публикаций: помимо стандартного набора для стилистической работы с текстом сделали дивайдер — отбивку текста черной горизонтальной полосой одним нажатием. Это помогает сохранять удобный для чтения вид статей и эстетичный — для всего медиа.
Административная часть содержит три ключевых раздела редактирования, которые доступны из любой точки кабинета. Это форматирование материала, лента всех публикаций, которую также можно корректировать и раздел сайта с FAQ-вопросами.
Интерфейс привычный для авторов и по функциям пересекается со стандартным видом текстовых редакторов типа Word. Выбор типа материала происходит по выпадающему списку, авторам можно поставить фотографии и должности один раз и затем лишь выбирать в подписи, а ключевые материалы с главной страницы сайта меняются одной кнопкой. Все это спроектировали на библиотеке компонентов для создания многофункциональных пользовательских интерфейсов.
Мы используем куки и с помощью анонимной статистики делаем сайт ещё лучше