«Сокольники» - один из самых больших парков Европы и старейшее место отдыха в Москве. Интересные события происходят в нем каждый день. Здесь открываются кафе и спортивные площадки, проводятся выставки и мастер-классы, устраиваются акции и презентации.
Чтобы посетители заранее выбирали места и занятия по душе, попутно узнавая малоизвестные факты о парке, разработан официальный сайт «Сокольников».
На дворе первые дни весны 2015-го. Встречаемся с командой парка, обсуждаем произошедшие перемены и планы развития.
За последние пару лет парк сильно изменился. На волне обновления парков Москвы в «Сокольниках» начались масштабные перемены: приятные зоны для отдыха с красивыми скамейками, бесплатный вайфай, душевые кабинки, библиотека с коворкингом, открытый кинотеатр, подготовка пространства для инвалидов - сложно вспомнить, чего теперь в парке нет.
На старом сайте информация для посетителей была спрятана за несколькими уровнями навигации, в разделе «Посетителям». Принимаем вместе с командой парка решение, что на первом плане сайта будет информация для посетителей, а все официальные и партнерские разделы переедут на второй план. Прикидываем первую версию карты сайта и помечаем ключевые разделы.
«Сокольники» - парк для всей семьи с развитой инфраструктурой. Тут работает порядка ста двадцати объектов и ежедневно проходит по несколько мероприятий. Детские аттракционы соседствуют с молодежным скейт-парком, шахматно-шашечный клуб - с эстрадами танцев, шашлычная - с киоском «Пян-се». Многие и понятия не имеют о таких возможностях парка. Формулируем одну из задач - расширить кругозор посетителей.
Основой нового сайта решаем сделать ответ на вопрос «Чем заняться в парке?». Сегодня, на выходных или в конкретный день.
Смотрим на варианты досуга.
Думаем, как организовать навигацию по вариантам занятий и объектам. Нужно помочь найти необходимое, при этом рассказав о новинках и неизвестных вариантах отдыха и развлечений в парке. Как выйти на молодежные развлекухи? Вкладка «Молодежь»? Старперство! Никто не пойдет туда за скейт-парком, нужно что-то хитрее. А прокат велосипедов - это спорт, отдых или развлечение? Смотря как быстро крутить педали и какой велосипед взять. А съесть круассан с кофе - это «Кафе и рестораны» или «Развлечение»? И то и другое.
Черепашка и зайчик.
Осознаем, что нет четкой границы между отдыхом, развлечением, кафе и спортом. Но что есть в этом облаке вариантов? Например, есть активность времяпрепровождения. «Вспотеть - не вспотеть». Крутить педали велика - это провести время активнее, чем взять книгу в библиотеке и почитать. Смотрим через эту призму на все объекты парка. Придумываем смешной ползунок из мира видеоредакторов. «Слоумошен» или «таймлапс».
Ближе к черепашке будут все «расслабленные» варианты. Это достопримечательности парка, библиотека, зоны, где можно посидеть на скамейке и отдохнуть в тишине. Рядом с зайчиком все самые потогонные: батуты, экстрим-зоны, скейт-парк, прокат велосипедов, аттракционы. А стартует ползунок из центрального положения, при котором все варианты отображаются одним потоком.
Получится смешанная выдача, которая сможет открыть что-то новое для посетителей, удивить и подкинуть идею. Погода за окном Жизнь в парке связана с сезоном, погодой за окном, временем суток - всеми аспектами офлайна. Придумываем подборку идей «Чем заняться в парке» для главной страницы. Подборка будет смешанной - часть будет выводиться автоматически, на основе сезона, времени суток и погодных условий.
Часть карточек будут добавлять редакторы, если какое-то мероприятие или объект нужно показать посетителям.
Линейные магистрали.
Конечно, этого недостаточно, линейные магистрали тоже нужны. Для родителей будет тег «детям», для голодных - «кафе и рестораны», для атлетов - «спорт». Они будут работать в связке с ползунком.
Базовые возможности.
Когда спонтанно принимаешь решение погулять в парке (особенно находясь в незнакомом городе), хочется быстро понять несколько базовых вещей. Прокат есть? А вайфай раздается? Открыт круглосуточно или до восьми? Ответы на эти вопросы хорошо бы получить в первом экране, не бегая по структуре и не ввязываясь в параллакс-скролл модного обновленного сайта, который ты загружаешь с медленного мобильного интернета и проклинаешь создателей. Аналогичные списки вопросов бывают к сайтам метрополитенов, хостелов, коворкингов или аэропортов. Это что-то вроде базовых возможностей, или фичей, как говорят на английских сайтах.
Для раскрытия информации о базовых возможностях парка заведем блок на главной.
Графический язык.
На старте проекта у «Сокольников» не было фирменного стиля. Был логотип, который не нравился даже команде парка. Были планы по обновлению на конкурсной основе, но это все еще не скоро. Гуляем по парку вместе с фотографом для сборки первых визуальных материалов.
Примеряем сетку подборки развлечений.
Появляется идея подчеркнуть концепцию «актуальной подборки занятий» сезонной темой оформления сайта.
Пробуем подход с сезонной иллюстрацией парка и леттерингом вместо логотипа.
Или абстрактной иллюстрацией из «текстур» парка.
Нет, стилизации под советскую типографику не берем. Также не хочется настолько съедать пространство первого экрана. Поднимем выше подборку.
В качестве логотипа просто отрисуем текущую версию от руки, на первое время.
В «Сокольниках» богатая природа: деревья, цветы, растения, животные и птицы из Красной книги. В качестве сезонного оформления примеряем тему «гербария» - коллажей из сезонной флоры и фауны.
Попутно «выходим из прямоугольника» - сбиваем ритм сетки, чтобы избавиться от монотонности квадратов и придать странице жизни. Карточки будут разбрасываться на столе и чередоваться по размеру.
Формулируем первую версию основных принципов графического языка.
Помимо сезонных оформлений, будем создавать темы для праздников - Нового года, 8 Марта, 9 Мая и так далее. Собираем макеты в прототип. Добавляем жизни - часть карточек будет видеороликами.
Утверждаем концептуальные идеи у клиента и начинаем разработку.
Процесс разработки.
Часть 1.
Проектируем основные магистрали на сайте. Объекты парка.
Мероприятия в парке.
Все объекты парка на карте или списком.
На основе придуманных идей формируем список инфоблоков для страниц.
Придумываем инфоблок с «базовыми возможностями» объекта и события.
Подключаем контент-менеджера и редактора для сбора всей необходимой информации.
Собираем списки сезонных растений в парке для фотосессий гербария.
В погожие дни регулярно делаем вылазки в парк для сбора материалов на экскурсиях и съемки фото и видео.
Тем временем на аллеях парка появляется первый желтый листок.
Создаем раздел «Парк онлайн», в котором на весь экран будет транслироваться видео с 36 камер, установленных в парке. Если курсор оставить без движения на некоторое время - элементы сайта скроются и экран перейдет в режим телевизора.
Технологии.
Пробуем отказаться от серверных шаблонов и сделать одностраничный сайт, чтобы добиться быстрой работы на всех возможных устройствах, ведь почти половина посетителей сайта заходит сюда с мобильных устройств. В основу сайта ложится фронт-энд, написанный на «Реакте», а каждая новая страница докачивает только недостающие части и соответствующим образом преобразует имеющуюся страницу (отображая прелоадер, пока идет подгрузка). Дополнительное удобство - дизайнер как угодно сам двигает блоки на страницах, не требуя помощи программиста, чтобы отображать какие-то данные в совершенно новом месте. Программисты занимаются базой данных, админкой, версткой типовых шаблонов. Фотографы регулярно выбираются в парк для съемки флоры и фауны. Контент-менеджеры с редакторами готовят содержимое. Дизайнер дорабатывает оставшиеся ключевые шаблоны.
Ребрендинг.
Тем временем в парке проходит открытый конкурс на разработку фирменного стиля. По условиям конкурса решение принимает независимое жюри, в составе которого профессионалы из дизайнерского сообщества. Жюри не в курсе процесса работ по сайту и действует беспристрастно. Мы также никак не влияем на жюри. Изучаем концепцию победителя.
Бóльшая часть шаблонов сайта уже сверстана, и приближается запуск бета-версии - экстренно встречаемся с авторами брендбука и командой парка, чтобы совместить принципы графического языка и синхронизировать процесс.
Процесс разработки.
Часть 2: запуск бета-версии.
Разработка фирменного стиля и сайта идет параллельно. В студии создаются наброски ключевых страниц. Остальное будем править прямо на верстке. В команде брендбука уточняются фирменные шрифты, пропорции логотипа, фирменные иконки и цвета, которые будут необходимы для запуска первой версии сайта.
Тем временем фотографы готовят осенний гербарий.
Дорабатываем информационные разделы сайта.
На странице парка придумываем разместить ленту с эпохами парка. Каждая эпоха иллюстрируется изображением парка того времени. В XIX веке это живопись. В начале XX века - черно-белые фотографии. И так до HD наших дней.
Получаем от команды брендбука фирменные иконки. Чтобы использовать их в разных контекстах, готовим иконочный шрифт и подключаем на сайт.
Новый логотип парка - это серия анимированных знаков для разных контекстов. В ключевых разделах сайта логотип будет соответствовать теме и анимироваться при загрузке. Собираем раскадровки анимации, чтобы контролировать скорость скриптом.
Дорабатываем блоки сайта в соответствии с новым стилем и готовим недостающую техническую графику, а также видеоролики для карточек.
Команда брендбука присылает первую версию правил использования элементов. Обновляем шрифты на сайте и ловим кучу багов и несоответствий.
В парке намечается пресс-конференция, приуроченная к приближающемуся открытию зимнего сезона. Быстро приводим шаблоны в чувство «на живую», запускаем бета-версию и готовим презентацию для пресс-конференции.
Директор парка Андрей Витальевич Лапшин вместе с командой презентует новую версию сайта московским журналистам.
Тем временем технологи исправляют тысячи багов на сайте.
Приближается зима и полноценный запуск сайта. Готовим новый гербарий, допиливаем оставшиеся неточности и переносим сайт на основной домен.
Вспоминаем, что происходило за кулисами создания сайта.
Адрес сайта: park.sokolniki.com
Автор: Administrator
Просмотров: 4048
Брендинговое агентство «Depot WPF» разработало фирменный стиль для международного сообщества коммуникаторов «WCFA»Айдентика подчеркивает главные ценности новой организации: стремление к абсолютной прозрачности коммуникаций и отсутствие границ. WCFA (World Communication Forum Association) - это новая международная профессиональная ассоциация, которая объединяет... прочитать новость >>
Автор: Administrator
Просмотров: 2778
Дизайн-студия «Stors» разработала бренд и дизайн среды чайного клуба «SINDIKAT»Задача от клиента заключалась в создании интересного и необычного чайного клуба. Решением стало название «SINDIKAT», которое объединило в себе всю концепцию заведения. Она основана на полулегальных чайных синдикатах, которые доставляли контрабанду... прочитать новость >>
Автор: Administrator
Просмотров: 2669
Случайная новость
