Брендинг и сайт образовательного проекта Mail.Ru Group Технополис

«Технополис» — брат-близнец образовательного проекта «Технопарк», для которого в 2013 году мы разработали позиционирование и фирменный стиль. Проекты открылись для разных вузов в Москве и Санкт-Петербурге, но сохранили общую идеологию и цель. Это сходство упростило работу: мы нашли рабочие файлы из архива, обновили информацию после встречи в «Одноклассниках» и скорректировали существующее позиционирование.

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

Наша задумка — подружить изобразительное искусство и программирование. Творчество и связь с IT-сферой нашли отражение в ключевой идее: показать шедевры великих мастеров, которые создаются через код.

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

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

Чтобы показать стек технологий, мы продумали стилизацию копирайтов под разные языки программирования, которые студенты изучают на занятиях. Копирайты показывают принадлежность к профессиональному кругу с особой формой общения — понимают только свои.

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

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

Гиковскому стилю — гиковский шрифт. Фирменный Roboto Mono относится к моноширинным гарнитурам, которые используют разработчики для написания кода. Символы одинаковой ширины, поэтому они расположены ровно друг под другом. Это упрощает форматирование текста и не требует дополнительных инструментов верстки.

Копирайт, заголовки первого уровня и основной текст равняются строго по левому краю — так пишется код. Это еще одна невидимая деталь, из которой складывается «цифровой» визуальный стиль.

Чтобы не перегружать фирменный стиль, насыщенный графикой и текстом, мы подобрали схему из четырех цветов и построили правила работы с ними. Изображения всегда тонируются в синий для ассоциации с IT-сферой. Тексты набираются на белом фоне и черными буквами. Для акцента на отдельных элементах используется малиновый.

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

Основная версия логотипа — с анимацией для цифровых носителей. Сокращенный вариант, инициал со знаком-кареткой, подходит для офлайновых материалов небольшого размера.

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

Литография Эшера на студенческой тетради подчеркивает серьезность учебы, а размещенный на ней код проверяет уровень знаний студента. Если уровень равен переменной 999 (в этом случае курс считается пройденным) — студент выпускается. Если нет — продолжает обучение на проекте.

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

При поступлении всем студентам дарят фирменные футболки. На них мы разместили гравюру Юлиуса Шнорра фон Карольсфельда о четвертом дне творения мира и подкрепили её стандартной фразой, с которой начинается обучение кодингу: «Hello, world».

Для проработки концепции, мы старательно подбирали подходящие сюжеты, обращая внимание на самые мелкие детали. На зарядном устройстве для телефона показали бога грома и молний Зевса с древнегреческой амфоры неизвестного античного художника. Изображение поддержали кодом, который передает сообщение: если текущий уровень заряда меньше 10, то запрашиваем электричество у Зевса, если больше или равно — перестаем волноваться о судьбе своего устройства.

На сувенирных значках — неофициальные символы языков программирования Java, PHP и Ajax. В последнем повторили ошибку амстердамского футбольного клуба «Аякс». Они изобразили на своей эмблеме вовсе не Аякса, а Менелая. Так могли бы шутить на вечеринке для искусствоведов и разработчиков.

QR-код с инициалом может сойти за увеличенный до степени неузнаваемости фрагмент еще одного шедевра. Его задача — направлять заинтересованных на сайт проекта.

На трогательную просьбу клиента сделать отсылку к петербургскому происхождению проекта мы отнеслись с юмором — дали отсылку к культурно-искусствоведческому стереотипу города, а для отдельных носителей подготовили картины с узнаваемыми персонажами и достопримечательностями. Например, приглашения на день открытых дверей мы оформили портретом Петра I (его именем назван Политехнический университет), а в коде — открыли окно в Европу.

А вот и те, ради кого все затевалось — довольные студенты первого потока «Технополиса».