Студия Артемия Лебедева разработала сайт парка «Сокольники»

«Сокольники» - один из самых больших парков Европы и старейшее место отдыха в Москве. Интересные события происходят в нем каждый день. Здесь открываются кафе и спортивные площадки, проводятся выставки и мастер-классы, устраиваются акции и презентации.

Студия Артемия Лебедева разработала сайт парка «Сокольники»

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

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

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

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

Студия Артемия Лебедева разработала сайт парка «Сокольники»

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

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

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

Студия Артемия Лебедева разработала сайт парка «Сокольники»

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

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

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

Студия Артемия Лебедева разработала сайт парка «Сокольники»

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

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

Часть карточек будут добавлять редакторы, если какое-то мероприятие или объект нужно показать посетителям.

Студия Артемия Лебедева разработала сайт парка «Сокольники»

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

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

Студия Артемия Лебедева разработала сайт парка «Сокольники»

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

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

Студия Артемия Лебедева разработала сайт парка «Сокольники»

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

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

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

Студия Артемия Лебедева разработала сайт парка «Сокольники»

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

Студия Артемия Лебедева разработала сайт парка «Сокольники»

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

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

Студия Артемия Лебедева разработала сайт парка «Сокольники»

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

Студия Артемия Лебедева разработала сайт парка «Сокольники»

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

В качестве логотипа просто отрисуем текущую версию от руки, на первое время.

Студия Артемия Лебедева разработала сайт парка «Сокольники»

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

Студия Артемия Лебедева разработала сайт парка «Сокольники»

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

Студия Артемия Лебедева разработала сайт парка «Сокольники»

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

Студия Артемия Лебедева разработала сайт парка «Сокольники»

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

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

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

Часть 1.

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

Студия Артемия Лебедева разработала сайт парка «Сокольники»

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

Студия Артемия Лебедева разработала сайт парка «Сокольники»

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

Студия Артемия Лебедева разработала сайт парка «Сокольники»

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

Студия Артемия Лебедева разработала сайт парка «Сокольники»

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

Студия Артемия Лебедева разработала сайт парка «Сокольники»

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

Студия Артемия Лебедева разработала сайт парка «Сокольники»

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

Студия Артемия Лебедева разработала сайт парка «Сокольники»

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

Студия Артемия Лебедева разработала сайт парка «Сокольники»

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

Студия Артемия Лебедева разработала сайт парка «Сокольники»

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

Студия Артемия Лебедева разработала сайт парка «Сокольники»

Технологии.

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

Ребрендинг.

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

Студия Артемия Лебедева разработала сайт парка «Сокольники»

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

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

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

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

Студия Артемия Лебедева разработала сайт парка «Сокольники»

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

Студия Артемия Лебедева разработала сайт парка «Сокольники»

Дорабатываем информационные разделы сайта.

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

Студия Артемия Лебедева разработала сайт парка «Сокольники»

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

Студия Артемия Лебедева разработала сайт парка «Сокольники»

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

Студия Артемия Лебедева разработала сайт парка «Сокольники»

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

Студия Артемия Лебедева разработала сайт парка «Сокольники»

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

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

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

Студия Артемия Лебедева разработала сайт парка «Сокольники»

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

Студия Артемия Лебедева разработала сайт парка «Сокольники»

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

Студия Артемия Лебедева разработала сайт парка «Сокольники»

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

Адрес сайта: park.sokolniki.com

Новость добавлена: 16.12.2015 08:52:18
Автор: Administrator
Просмотров: 1837
< Предыдущая новость
Брендинговое агентство «Depot WPF» разработало фирменный стиль для международного сообщества коммуникаторов «WCFA»Брендинговое агентство «Depot WPF» разработало фирменный стиль для международного сообщества коммуникаторов «WCFA»

Айдентика подчеркивает главные ценности новой организации: стремление к абсолютной прозрачности коммуникаций и отсутствие границ. WCFA (World Communication Forum Association) - это новая международная профессиональная ассоциация, которая объединяет... прочитать новость >>

Новость добавлена: 16.12.2015 12:49:35
Автор: Administrator
Просмотров: 1691
Следующая новость >
Дизайн-студия «Stors» разработала бренд и дизайн среды чайного клуба «SINDIKAT»Дизайн-студия «Stors» разработала бренд и дизайн среды чайного клуба «SINDIKAT»

Задача от клиента заключалась в создании интересного и необычного чайного клуба. Решением стало название «SINDIKAT», которое объединило в себе всю концепцию заведения. Она основана на полулегальных чайных синдикатах, которые доставляли контрабанду... прочитать новость >>

Новость добавлена: 14.12.2015 13:22:38
Автор: Administrator
Просмотров: 1735
Это интересно