Сайт Школы искусств и наук Московского международного университета

ЗаказчикМосковский международный университет.ЗадачаРазработать информационный, масштабируемый ресурс для отдельного нового направления деятельности Московского международного университета — сайт Школы искусств и наук ММУ.

Клиент

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

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

Идея создания университета была высказана первым мэром Москвы Г.Х. Поповым на встрече двух президентов — Президента СССР М.С. Горбачева и Президента США Д. Буша-старшего летом 1991 года.

Школа искусств и наук ММУ — это группа независимых школ и лабораторий, где разные направления встречаются и пересекаются. Сейчас в ее состав входят:

  • Московская антропологическая школа (МАШ)
  • Московская школа новой литературы (МШНЛ)
  • Московская школа нового кино (МШНК)
  • Школа кураторских практик и современного искусства
  • Школа лабораторных исследований теорий и техник театра Анатолия Васильева
  • Лаборатория психоанализа лакановской ориентации
  • Лаборатория «О музыке и пространстве»
  • Школа бумажной архитектуры Александра Бродского

Школа искусств и наук ММУ объединяет в себе сразу несколько направлений: современное искусство, антропологию, литературу, кино, театр, музыку, психоанализ и архитектуру.

Задачи проекта

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

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

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

Проектирование и дизайн

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

Благодаря брифингу:

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

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

3. Сбор референсов. У заказчика не было четкого понимания по будущей стилистике дизайна, в связи с этим для определения концептуального стиля, а также для поиска наиболее удачных дизайн-решений, которые можно адаптировать под наш проект, мы собрали более 25 референсов из разных сфер. Обсудили, какие визуальные и функциональные решения больше всего нам подходят, что можно использовать, адаптировав под наши цели и задачи. В рамках этого же этапа Заказчиком был составлен драфт, за счет этого мы существенно сэкономили время на формирование контента (заголовков, анонсов, кратких описаний и т.д.) и структуры страниц. Совместно с Заказчиком мы определили, что в дизайне должны присутствовать большие заголовки, которые наслаиваются на изображения, а также что визуальная подача будет не систематизирована, чтобы показать авангардность и индивидуальность творческого подхода Школы.

ae6473fe49ec0c4f868dd85af95ac915.jpg

4. Опираясь на бриф, конкурентный анализ и ТЗ, мы приступили к проектированию будущих блоков сайта и прототипированию главной страницы. Готовые референсы нам существенно облегчили задачу.

a799a7bad7adc280249973f7ed3ce649.png

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

0d37d73f7f75c7656516cf847a4809ce.jpg

d8e8127ad3a32e91489a3fcf42aa0edd.png

6. Разработали UI-kit, чтобы сделать дизайн более системным, а также обеспечить возможность масштабировать проект силами команды Заказчика без привлечения внешних дизайнеров.

7. Затем были отрисованы внутренние страницы и параллельно велась frontend- и backend-разработка. Таким образом, на момент выдачи последнего макета было реализовано 70% всего сайта.

65cca423586ed1c78cd06f64dcae2e9c.png

«Школа искусств и наук ММУ как проект — это совокупность профессионального, академического и пользовательского опыта. Представители школы имеют устойчивое понимание интересов своей аудитории, что помогло грамотно и четко установить цели проекта, которые исключили огромное количество итераций дизайна по достижению необходимого визуального стиля. Ключевым моментом в достижении поставленных целей является профессиональный опыт команды по разработке: быстрая коммуникация, аргументированная работа каждого из участников проекта и современный крепкий уровень способностей каждого.

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

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

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

Дизайнер Степан Бушуев

Реализованный функционал

1. Программы обучения

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

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

90b3e7aa2b3d9544e241d4edbca499e1.png

Каждая программа обучения имеет детальную страницу, в которой представлена информация:

  • О программе
  • Уникальность программы
  • Для кого
  • Структура программы
  • Результат обучения
  • Кураторы и преподаватели
  • Стоимость обучения
  • Требования к поступлению

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

2a8fad61d63a8a468ba6e1db6f08b06e.png

2. Школы

В разделе представлены все 7 школ, входящих в состав колы искусств и наук ММУ, с кратким описанием и возможностью перейти на подробную страницу школы или посмотреть расписание. Каждая школа имеет список лабораторий (объединение программ внутри школ). Программы школ привязаны к лабораториям.

Каждая школа имеет список лабораторий (объединение программ внутри школ).

bfabf6dee41c83a86fe9c22ced948bf4.png

Страница подробного описания Школы содержит блоки:

  • О школе
  • Лаборатории
  • Преподаватели школы
  • Расписание
  • Как поступить (ссылка на раздел сайта «Поступление»)
  • Кнопка на форму «Подать заявку»

e7f278417176713f26cdb7004548cc93.png

3. Мультиязычный поиск

Строка поиска позволяет найти информацию на сайте по ключевым словам.

4. Английская версия сайта и версия для слабовидящих

Результат

Благодаря Agile-подходу и огромному опыту в создании web-проектов образовательной сферы мы запустили сайт для Школы искусств и наук Московского международного университета с соблюдением требований законодательства и с учетом целей и пожеланий Заказчика.

Сайт Школы искусств и наук стал полноценной витриной нового направления ММУ.

Перейти на сайт

Полный текст статьи читайте на CMS Magazine