Создание сайта парка «Сокольники»



На дворе первые дни весны 2015-го. Встречаемся с командой парка, обсуждаем произошедшие перемены и планы развития.

За последние пару лет парк сильно изменился. На волне обновления парков Москвы в «Сокольниках» начались масштабные перемены: приятные зоны для отдыха с красивыми скамейками, бесплатный вайфай, душевые кабинки, библиотека с коворкингом, открытый кинотеатр, подготовка пространства для инвалидов — сложно вспомнить, чего теперь в парке нет.

На старом сайте информация для посетителей была спрятана за несколькими уровнями навигации, в разделе «Посетителям». Принимаем вместе с командой парка решение, что на первом плане сайта будет информация для посетителей, а все официальные и партнерские разделы переедут на второй план.

Прикидываем первую версию карты сайта и помечаем ключевые разделы.

«Сокольники» — парк для всей семьи с развитой инфраструктурой. Тут работает порядка ста двадцати объектов и ежедневно проходит по несколько мероприятий. Детские аттракционы соседствуют с молодежным скейт-парком, шахматно-шашечный клуб — с эстрадами танцев, шашлычная — с киоском «Пян-се». Многие и понятия не имеют о таких возможностях парка. Формулируем одну из задач — расширить кругозор посетителей.

Основой нового сайта решаем сделать ответ на вопрос «Чем заняться в парке?». Сегодня, на выходных или в конкретный день.

Смотрим на варианты досуга.

Думаем, как организовать навигацию по вариантам занятий и объектам. Нужно помочь найти необходимое, при этом рассказав о новинках и неизвестных вариантах отдыха и развлечений в парке.

Как выйти на молодежные развлекухи? Вкладка «Молодежь»? Старперство! Никто не пойдет туда за скейт-парком, нужно что-то хитрее. А прокат велосипедов — это спорт, отдых или развлечение? Смотря как быстро крутить педали и какой велосипед взять. А съесть круассан с кофе — это «Кафе и рестораны» или «Развлечение»? И то и другое.


Черепашка и зайчик

Осознаем, что нет четкой границы между отдыхом, развлечением, кафе и спортом. Но что есть в этом облаке вариантов?

Например, есть активность времяпрепровождения. «Вспотеть — не вспотеть». Крутить педали велика — это провести время активнее, чем взять книгу в библиотеке и почитать. Смотрим через эту призму на все объекты парка. Придумываем использовать смешной ползунок из мира видеоредакторов. «Слоумошен» или «таймлапс». Для иллюстрации идеи берем ползунок «Айконверка».

Ближе к черепашке будут все «расслабленные» варианты. Это достопримечательности парка, библиотека, зоны, где можно посидеть на скамейке и отдохнуть в тишине. Рядом с зайчиком все самые потогонные: батуты, экстрим-зоны, скейт-парк, прокат велосипедов, аттракционы. А стартует ползунок из центрального положения, при котором все варианты отображаются одним потоком. Получится смешанная выдача, которая сможет открыть что-то новое для посетителей, удивить и подкинуть идею.


Погода за окном

Жизнь в парке связана с сезоном, погодой за окном, временем суток — всеми аспектами офлайна. Придумываем подборку идей «Чем заняться в парке» для главной страницы. Подборка будет смешанной — часть будет выводиться автоматически, на основе сезона, времени суток и погодных условий. Часть карточек будут добавлять редакторы, если какое-то мероприятие или объект нужно показать посетителям.

Линейные магистрали

Конечно, этого недостаточно, линейные магистрали тоже нужны. Для родителей будет тег «детям», для голодных — «кафе и рестораны», для атлетов — «спорт». Они будут работать в связке с ползунком.

Базовые возможности

Когда спонтанно принимаешь решение погулять в парке (особенно находясь в незнакомом городе), хочется быстро понять несколько базовых вещей. Прокат есть? А вайфай раздается? Открыт круглосуточно или до восьми? Ответы на эти вопросы хорошо бы получить в первом экране, не бегая по структуре и не ввязываясь в параллакс-скролл модного обновленного сайта, который ты загружаешь с медленного мобильного интернета и проклинаешь создателей. Аналогичные списки вопросов бывают к сайтам метрополитенов, хостелов, коворкингов или аэропортов. Это что-то вроде базовых возможностей, или фичей, как говорят на английских сайтах.

Для раскрытия информации о базовых возможностях парка заведем блок на главной.

Графический язык

На старте проекта у «Сокольников» не было фирменного стиля. Был логотип, который не нравился даже команде парка. Были планы по обновлению на конкурсной основе, но это все еще не скоро.

Гуляем по парку вместе с фотографом для сборки первых визуальных материалов.

Примеряем сетку подборки развлечений.

Появляется идея подчеркнуть концепцию «актуальной подборки занятий» сезонной темой оформления сайта. Пробуем подход с сезонной иллюстрацией парка и леттерингом вместо логотипа.

Или абстрактной иллюстрацией из «текстур» парка.

Нет, стилизации под советскую типографику не берем. Также не хочется настолько съедать пространство первого экрана. Поднимем выше подборку. В качестве логотипа просто отрисуем текущую версию от руки, на первое время.

В «Сокольниках» богатая природа: деревья, цветы, растения, животные и птицы из Красной книги. В качестве сезонного оформления примеряем тему «гербария» — коллажей из сезонной флоры и фауны.

Попутно «выходим из прямоугольника» — сбиваем ритм сетки, чтобы избавиться от монотонности квадратов и придать странице жизни. Карточки будут разбрасываться на столе и чередоваться по размеру.

Формулируем первую версию основных принципов графического языка.

Помимо сезонных оформлений, будем создавать темы для праздников — Нового года, 8 Марта, 9 Мая и так далее. Собираем макеты в прототип. Добавляем жизни — часть карточек будет видеороликами.

Утверждаем концептуальные идеи у клиента и начинаем разработку.


Процесс разработки. Часть 1

Проектируем основные магистрали на сайте.

Объекты парка.

Мероприятия в парке.

Все объекты парка на карте или списком.

На основе придуманных идей формируем список инфоблоков для страниц.

Придумываем инфоблок с «базовыми возможностями» объекта и события.

Подключаем контент-менеджера и редактора для сбора всей необходимой информации.

Собираем списки сезонных растений в парке для фотосессий гербария.

В погожие дни регулярно делаем вылазки в парк для сбора материалов на экскурсиях и съемки фото и видео.

Тем временем на аллеях парка появляется первый желтый листок.

Создаем раздел «Парк онлайн», в котором на весь экран будет транслироваться видео с 36 камер, установленных в парке. Если курсор оставить без движения на некоторое время — элементы сайта скроются и экран перейдет в режим телевизора.

Технологии

Пробуем отказаться от серверных шаблонов и сделать одностраничный сайт, чтобы добиться быстрой работы на всех возможных устройствах, ведь почти половина посетителей сайта заходит сюда с мобильных устройств.

В основу сайта ложится фронт-энд, написанный на «Реакте», а каждая новая страница докачивает только недостающие части и соответствующим образом преобразует имеющуюся страницу (отображая прелоадер, пока идет подгрузка). Дополнительное удобство — дизайнер как угодно сам двигает блоки на страницах, не требуя помощи программиста, чтобы отображать какие-то данные в совершенно новом месте.

Программисты занимаются базой данных, админкой, версткой типовых шаблонов. Фотографы регулярно выбираются в парк для съемки флоры и фауны. Контент-менеджеры с редакторами готовят содержимое. Дизайнер дорабатывает оставшиеся ключевые шаблоны.


Ребрендинг

Тем временем в парке проходит открытый конкурс на разработку фирменного стиля. По условиям конкурса решение принимает независимое жюри, в составе которого профессионалы из дизайнерского сообщества. Жюри не в курсе процесса работ по сайту и действует беспристрастно. Мы также никак не влияем на жюри.

Изучаем концепцию победителя.

Бóльшая часть шаблонов сайта уже сверстана, и приближается запуск бета-версии — экстренно встречаемся с авторами брендбука и командой парка, чтобы совместить принципы графического языка и синхронизировать процесс.


Процесс разработки. Часть 2: запуск бета-версии

Разработка фирменного стиля и сайта идет параллельно. В студии создаются наброски ключевых страниц. Остальное будем править прямо на верстке. В команде брендбука уточняются фирменные шрифты, пропорции логотипа, фирменные иконки и цвета, которые будут необходимы для запуска первой версии сайта.

Тем временем фотографы готовят осенний гербарий.

Дорабатываем информационные разделы сайта. На странице парка придумываем разместить ленту с эпохами парка. Каждая эпоха иллюстрируется изображением парка того времени. В XIX веке это живопись. В начале XX века — черно-белые фотографии. И так до HD наших дней.

Получаем от команды брендбука фирменные иконки. Чтобы использовать их в разных контекстах, готовим иконочный шрифт и подключаем на сайт.

Новый логотип парка — это серия анимированных знаков для разных контекстов. В ключевых разделах сайта логотип будет соответствовать теме и анимироваться при загрузке. Собираем раскадровки анимации, чтобы контролировать скорость скриптом.

Дорабатываем блоки сайта в соответствии с новым стилем и готовим недостающую техническую графику, а также видеоролики для карточек.

Команда брендбука присылает первую версию правил использования элементов. Обновляем шрифты на сайте и ловим кучу багов и несоответствий.

В парке намечается пресс-конференция, приуроченная к приближающемуся открытию зимнего сезона. Быстро приводим шаблоны в чувство «на живую», запускаем бета-версию и готовим презентацию для пресс-конференции.

Директор парка Андрей Витальевич Лапшин вместе с командой презентует новую версию сайта московским журналистам.

Тем временем технологи исправляют тысячи багов на сайте.

Приближается зима и полноценный запуск сайта. Готовим новый гербарий, допиливаем оставшиеся неточности и переносим сайт на основной домен.

Вспоминаем, что происходило за кулисами создания сайта.