медиа о передовых технологиях:
от роботов и неуглеродной энергии
до новой медицины, блокчейна
и искусственного интеллекта
2018
хайтек+
медиа о передовых технологиях: от роботов
и неуглеродной энергии до новой медицины, блокчейна и искусственного интеллекта
задача
создать медиа c нуля: придумать логотип, подобрать цветовую гамму и шрифты, создать сетки и визуальный стиль, нарисовать макеты страниц, блоков и состояний, разработать админку для редакции
изучив конкурентов и категорию, стало понятно — логотип медиа о технологиях должен быть шрифтовым и, в идеале, кастомным
01
логотип
основной канал продвижения хайтека — соцсети, поэтому был выбран коралловый цвет, как наиболее контрастный к цветам основных социальных платформ
удачный набор литер позволил мне срифмовать «a» и «e», «х» и «к», а также акцент над «й» и знак «+»
специально для юзерпиков в соцсетях, я сделал компактную версию логотипа «x+», которая идеально вписывается в круг
сквозной элемент — вертикальная полоса фирменного цвета
02
фирменный элемент
используется как на сайте, так и во внешних коммуникациях (например, для репоста новости в соцсетях)
проект создавался с применением гибких методологий: быстрый запуск mvp, постепенное наращивание функционала, тесты гипотез, получение обратной связи от редакции
03
главная страница
уже на ранних этапах вместе с редакционной командой мы решили отказаться от классического меню в шапке — основная масса заходов на сайт через соцсети, ссылка ведет сразу на страницу публикации, где наша цель увеличить глубину просмотра за счет переходов на другие посты
главная страница представлена «бесконечной» лентой из карточек, где в шапке шесть самых главных публикаций и четыре коротких текстовых новости
под задачи редакции я сделал много разных новостных карточек: фото, видео, текстовые разных форматов, а также специальные — для колумнистов
под задачи редакции я сделал много разных новостных карточек: фото, видео, текстовые разных форматов, а также специальные —
для колумнистов
чтобы разнообразить «бесконечную» выдачу и увеличить количество переходов, я сделал перебивки с четырьмя маленькими тизерами
перебивки поочередно выкрашены в светло-серый, графитовый и коралловый цвета чтобы не вызывать привыкания
ну а чтобы читатель мог детально разобраться в теме и ничего не пропустить, в блоке «актуальная тема» объединены связанные друг с другом посты
для передышек от чтения был создан блок «видео», который суммирует топовые видеопубликации
для мобильной версии было решено чуть изменить выдачу: уменьшить объем главных новостей в шапке и увеличить количество текстовых карточек в ленте
для мобильной версии было решено чуть изменить выдачу: уменьшить объем главных новостей в шапке
и увеличить количество текстовых карточек в ленте
для мобильной версии было решено чуть изменить выдачу: уменьшить объем главных новостей в шапке и увеличить количество текстовых карточек в ленте
для страницы публикации я сделал несколько разных состояний: классический вариант с сайдбаром, неклассический вариант с карточками (для подробного разбора темы), пост колумниста, пост с видео, а также множество разных блоков: галереи, опросы, цитаты, интервью, вставки с тизерами и пр.
04
cтраница публикации
один из вариантов публикации — пост во всплывающем окне, содержащий только одно видео
один из вариантов публикации — пост
во всплывающем окне, содержащий только одно видео
один из вариантов публикации — пост во всплывающем окне, содержащий только одно видео
для команды редакторов я сделал гайд
по верстке фотографий на все случаи жизни — под вертикальные и горизонтальные форматы,
с подписью и без
для команды редакторов я сделал гайд
по верстке фотографий на все случаи жизни — под все основные форматы,
с подписью и без
для команды редакторов я сделал гайд по верстке фотографий на все случаи жизни — под вертикальные и горизонтальные форматы, с подписью и без
чтобы удержать читателя максимально долго, был применен «бесконечный» скролл — после блока «читайте также» начинается следующий пост, за ним еще один и так далее
вишенка на торте — панель администрирования, позволившая увеличить эффективность работы и сделать все внутренние процессы удобными и прозрачными для редакционной команды
05
админка для редакции
основные рабочие экраны редакция просила не показывать, так что привожу второстепенные — результат поиска и рубрикатор
основные рабочие экраны редакция очень просила
не показывать, так что привожу второстепенные — результат поиска и рубрикатор
вишенка на торте — панель администрирования, позволившая
увеличить эффективность работы
и сделать все внутренние процессы удобными и прозрачными для редакционной команды
основные рабочие экраны редакция просила не показывать, так что привожу второстепенные — результат поиска
и рубрикатор
вишенка на торте — панель администрирования, позволившая увеличить эффективность работы
и сделать все внутренние процессы удобными
и прозрачными для редакционной команды
ах да, чтобы сделать бильд-редактора чуть более счастливым, мы с разработчиками сделали инструмент для кадрирования фотографий под основные типоразмеры сайта и соцсетей
как видно, наш crop tool понравился даже уоррену баффету
ах да, чтобы сделать бильд-редактора
чуть более счастливым, мы с разработчиками сделали инструмент для кадрирования фотографий под основные типоразмеры сайта и соцсетей
перед нами стояла достаточно сложная задача: запустить большой медийный проект в крайне сжатые сроки — 7 недель от начала проектирования до открытия сайта для посетителей
александр писарев,
основатель проекта хайтек+
«
при этом нужен был не только эффективный сайт отвечавший целевым бизнес-задачам, но и собственная cms, где значительная часть операций была бы автоматизирована и выстроена определенная логика редакционных процессов
благодаря продуктовому подходу, креативности, системности в решении задач и крайне высокой продуктивности юрия, мы смогли не только выдержать сроки, но и создать продукт, который стал заметным явлением в своей нише
хочется отдельно отметить мультифункциональность юрия — он одновременно был погружен в бизнес-процессы редакции и проектирование cms, коммуницировал с командой разработки, аудировал результаты сборки сайта и в тоже время проектировал макеты новых разделов сайта
cотрудничество с юрием — лучший опыт за 18 лет моей работы в отрасли»
хочется также отметить мультифункциональность юрия — он был погружен в бизнес-процессы редакции и проектирование cms, коммуницировал с командой разработки, аудировал результаты сборки сайта и в тоже время проектировал макеты новых разделов сайта
проект в цифрах
2 мес.
запуск minimum viable product
1,2 млн.
кроссплатформенный охват аудитории
1,7 стр.
глубина просмотра за одну сессию
2,2 мин.
среднее время пользователя на сайте
через 5 месяцев после запуска
кроссплатформенный охват
метрики через 5 месяцев после запуска:
глубина просмотра
среднее время на сайте