Вроде бы сайты и блоги не новая для SETTERS задача: у агентства есть своя студия веб-дизайна, куча наград и ярких реализованных кейсов. Но делать сайт стартапа, тем более внутреннего, — задача со звездочкой. Вместе с командой Reboot вспоминаем, как за два месяца собрали сайт, на котором вы сейчас находитесь, — без зафиналенного брендинга, концепции и с кучей внезапных правок.
Вводные:
Дедлайн: два месяца до запуска.
Состояние команды: «Ничего не понятно, но очень интересно».
Структура каждого издания и его визуальная канва зависят от частоты публикаций. Мы проанализировали конкурентов SM и разные по обновляемости сайты, чтобы понять, чей подход нам ближе.
{{quote1}}
По задумке, SM — social media first издание, поэтому мы не хотели превращать сайт в еще один источник инфошума. Было важно создать не агрегатор, а «витрину» больших имиджевых материалов, в которые пользователь будет «проваливаться» раз в день.
{{slider-gallery}}
Прототипирование начали со структуры статьи. Чтобы не собирать несколько прототипов под разные форматы материалов, мы сделали суперстатью — шаблон, который агрегирует все возможные типы контента: слайдеры, галереи, цитаты, комментарии. Это было нужно, чтобы программисты смогли все их скомбинировать при разработке, а у редакции был широкий функционал для верстки.
Плюс продумали ссылки на другие разделы, агрегацию популярных статей, чтобы человек, читая, продолжал погружаться, как в «Википедии». И заложили множество рекламных блоков для появления баннерной рекламы в будущем.
Следом собрали прототип главной страницы. Четкого ТЗ по ее структуре у редакции не было, поскольку медиа хотелось визуально стать чем-то новым и выделиться.
С учетом редкого постинга относительно других изданий мы сделали меньше колонок, вывели ключевую большую статью в центр, статьи по категориям. Плюс заложили возможность интегрировать новостную ленту, чат редакции, который обновлялся бы в режиме реального времени, и подборки от топ-авторов в формате хайлайтов — хотелось добавить как можно больше фич, которые смогли бы в дальнейшем работать на коллаборации, спецпроекты и инфоповоды.
{{quote2}}
{{slider-gallery}}
Вводные: все еще нет брендинга и логотипа.
Дедлайн: 1,5 месяца до запуска.
Состояние команды: все еще ничего не понятно, много хаоса.
Как только редакция утвердила прототипы, мы начали собирать дизайн-концепции сайта. Главная сложность — логотип все еще не был утвержден, а значит, не было и визуального стиля SM, который можно транслировать на сайте.
{{quote3}}
В концепте было важно сохранить привычные для медиа принципы подачи информации — в первую очередь определить удобный и доступный стандарт сетки, чтобы пользователю было проще ориентироваться в контенте и читать, а сам дизайн страниц сделать визуально интереснее и добавить динамики.
Так появились яркие карточки с разными формами, обрезанные картинки разной высоты, визуальные акценты, наработки по цветам и шрифтовым парам. Была даже идея добавить [[дудлы|Яркие картинки, необычные анимации и простые игры на основе логотипа.]] на фон, которые бегают за пользователем на протяжении всего сайта, — их могли бы отрисовывать разные художники в формате коллабораций.
Параллельно наконец утвердился логотип и фирменный стиль — пришлось чуть корректировать наработки. А идея сделать формы с картинками статей на главной вообще родилась у арт-диров веба и фирстиля одновременно.
{{quote4}}
Вводные:
Дедлайн: три недели до запуска.
Состояние команды: «Давайте уже запустимся, а?..»
Передача дизайна разработке шла гладко. Сложности возникли на этапе верстки страниц, поскольку было много новых вводных и это замедляло процесс. Webflow облегчил дело: в нем один дизайнер способен внести правки и справиться с [[бэкендом|Внутренняя часть продукта, скрытая от пользователя.]], настроить шаблоны страниц. То есть вся работа не тормозится на несколько недель.
Параллельно редакция начала верстать первые статьи для сайта. Здесь нужно было только наловчиться с кодом и привыкнуть к интерфейсу Webflow. Для дизайнеров и редакторов «5×10» сделали две разные админки: у дизайнеров функционал более широкий, а редакторам достаточно базовых фич для верстки статей.
{{quote5}}
Сайт работает, выглядит стильно. Для команды его запуск стал авантюрой: процессы формировались по ходу, было много хаоса и сомнений, уложимся ли в сроки. Что помогло собраться и запуститься:
✓ выбранный технологический [[стек|Набор технологий, используемых для разработки продукта.]] — Webflow;
✓ запараллеленные процессы (в условиях сборки сайта без готового брендинга);
✓ работа [[спринтами|Временной интервал, в течение которого команда выполняет заданный объем работы.]]: это позволило легче реагировать на хаотичные правки и спланировать ресурсы;
✓ режим co-creation и партнерства: вовлечение «заказчиков» и «исполнителей» было равным и помогло найти те самые решения.
{{quote6}}
На главной «Тинькофф Журнала» мы видим блок с новостями, рубрики-«потоки», подрубрики с заголовками, несколько статей — и все это в пределах одного экрана. Он нагружен, но смотрится целостно, поскольку сайт обновляется десятки раз в день, что ближе к ленте соцсетей.
У американского Esquire абсолютно другая структура: на главный экран выводятся две-три новости, между материалами много воздуха — все потому, что издание делает упор на более длительный сторителлинг.
Даже простая фича вроде чатика команды на главной странице требует дополнительных ресурсов, и разумнее заложить ее и оставить в [[бэклоге|Приоритетный список функций, которые должен содержать продукт.]], а на старте сосредоточиться на основных задачах по контенту. Мы предлагали редакции много решений по функционалу сайта — часть из них заработает в свое время.
Когда фирстиля нет, ты можешь идти куда угодно: у тебя нет рамок, ограничений. Поэтому мы работали в режиме живого поиска решения. Были варианты логотипа, которые команда не приняла, и мы понимали, что с дизайном сайта тоже нужно идти в другую сторону. Единственное, что было стабильно и утверждено с самого начала, — миссия издания и четыре рубрики, вокруг которых выстраивается вещание SM.
На этом этапе стало сложнее вносить правки. Обычно веб-разработка последовательна и содержит точки невозврата, но команда брендинга и редакция часто вносили коррективы в согласованные дизайны.
Это нормально, что видение по части сайта было размытым: команда никогда не сталкивалась с запуском медиа с нуля. Мы не ставили ультиматумы: «Начнем, только когда концепт будет полностью зафинален». А работали параллельно, чтобы обмениваться идеями, докручивать функциональность и уложиться в сроки. Но каждый заступ за точку невозврата по цепной реакции влиял на код, дизайн и тайминги. В этом плане нас выручила адаптивность и гибкость Webflow.
Сейчас на сайт вносятся небольшие правки. В условиях быстрого запуска не было возможности его протестировать. Теперь, имея аналитику, мы вносим изменения, расширяя функциональность статей. Вводим тесты, корректируем визуальные элементы. Мы начали делать спецпроекты и хотим поставить их производство на поток.
Готовить запуск и допиливать сайт можно бесконечно долго, но у нас были сроки. Часть задуманных идей в них не уложилась, но это нормально — мы перенесли их на будущие спринты. При этом мы внедрили понимание пользовательских путей и оптимизировали UX, продолжили коммуникацию на сайте, чтобы она сочеталась со стилем и идеями, заложенными в SM как в бренде.
Полина Садовникова и Мария Бессмертная воспользовались этим поводом, чтобы пересмотреть свои любимые вампирские саги в строго рабочее время. Пройдите его и узнайте, какой вы вампир.
