веб-сервис
редизайн
ux/ui

Разработка и редизайн сайта Самарского института культуры (СГИК)

Клиент

Уникальный для Самары вуз, в котором ведётся подготовка кадров сферы культуры, профессионального и любительского искусства, творческих индустрий. Является центром притяжения для творческих людей со всего региона. Такому большому вузу необходим всеобъемлющий информационный ресурс, с яркой индивидуальностью и запоминающимися графическими приемами, под стать специфики учебного заведения.

Посетить сайт

Визуальная концепция титульного экрана проекта СГИК: логотип Самарского государственного института культуры, интегрированный в метафорический луч света, символизирующий театральную сцену и фокус внимания.
Цели проекта
  1. узнаваемый стиль, выделяющий вуз на фоне конкурентов
  2. структура сайта, понятная абитуриентам и студентам
  3. порядок в новостном разделе
  4. высокая читаемость информационных страниц
Презентация исторического раздела вуза на экране iMac: использование архивных фотоматериалов в сочетании с современной версткой и инфографикой, транслирующей масштаб достижений СГИК за 50 лет.

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

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

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

Проектирование полноэкранной навигационной системы (меню) в темной теме: логичное структурирование факультетов, центров и административных разделов для быстрого поиска информации.
Структура сайта
Визуализация информационной архитектуры СГИК: логическая схема связей разделов и подразделов, направленная на оптимизацию пользовательского пути абитуриентов и студентов.
Разработка

За основу концепции взята метафора игры со светом. Освещение — важная часть театрального мира и мифотворчества

1. Принцип камеры-обскура — использование света для получения изображений

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

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

2. Затвор камеры — портал в мир изобразительного искусства: фото, видео, инсталляции

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

3. Пространство сцены — еще одна важная метафора театрального мира, которая легла в основу сайта

Финальный дизайн первого экрана портала: эффектное сочетание динамичного фото театральной постановки, световой маски и крупной типографики «Раскрываем большие таланты с 1971 года».

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

Графическая интерпретация принципа фокусировки: схождение световых линий в узкую апертуру и последующее расширение в акцентный желтый луч, ставшее основой визуального ритма проекта.
Техническая схема проекции луча через 3D-пространство: визуализация метафоры портала, определяющей глубину и многослойность интерфейса сайта СГИК.
Типографика и цвет
Техническая спецификация типографики дизайн-системы СГИК: демонстрация шрифтовой гарнитуры Zona Pro в верхнем и нижнем регистрах кириллического алфавита. Выбор данного гротеска обеспечивает высокую контрастность, современную эстетику и безупречную читаемость информационных блоков образовательного портала.
Спецификация цветовой модели проекта СГИК
Визуализация академических достижений: трехмерная ступенчатая инфографика в фирменных цветах, отображающая выпуск монографий институтом.
Дизайн набора иконок для научного блока: переплетающиеся кольца как символ сетевого взаимодействия и интеграции научных статей в базу РИНЦ.
Проектирование сложного графического символа (полиэдра) для обозначения публикаций в международных базах данных, подчеркивающее высокий статус научной работы вуза.
Результат

Цвета и визуальные приемы стали неотъемлемой частью вуза. Дизайн ушел далеко за пределы web и используется в информационной и сувенирной продукции более 2 лет.

Посетить сайт

Комплексный макет страницы факультета дополнительного образования: сочетание крупного цветового зонирования, карточек направлений с фото-превью и детального блока контактов.
Верстка информационной страницы научного департамента: интеграция концептуальной графики, научной инфографики и структурированного списка кафедр в единую дизайн-систему.
Презентация десктопного интерфейса страницы об институте на iMac: чистая типографика и выверенная навигация, соответствующая стандартам Министерства образования.
Проектирование интерфейса для абитуриентов на MacBook: четкое структурирование программ бакалавриата и магистратуры с удобной кнопкой подачи заявления.
Реализация адаптивного дизайна страницы о коллективе института на смартфоне, обеспечивающая высокую читаемость текста и удобство взаимодействия.

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

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