Перепроектировал сайт университета и собрал систему, на которой его дальше развивать
Сайт Чеченского государственного университета: всё о вузе, учёбе и поступлении в одном месте. Навигация и структура полностью пересобрана, а все страницы приведены в единую стилистику
Задача
Сделать сайт, где человек сразу видит, куда ему идти, а обязательные разделы для проверяющих органов остаются на месте и нормально читаются.
С чего начинали
У сайта был перегружена структура и непонятно, с чего начать. Внутренние страницы и часть разделов выглядели по-разному, как будто это несколько разных сайтов
Что мешало пользователям
На сайт заходят абитуриенты, студенты, сотрудники и проверяющие органы. Большинству нужен один конкретный раздел.
До первого блока около 25 ссылок, и непонятно, с какой начинать.
Аудитория, уровень образования и подразделение стоят в одном ряду. Расписание и электронная среда спрятаны среди плиток.
Военный учебный центр есть в меню и в списке факультетов, дополнительное образование открывается из двух мест под разными названиями.
17 институтов и факультетов одним столбцом, около 33 ссылок в подвале подряд.
Пункты почти дословно повторяют текст приказа, данные идут сплошным текстом.
У главной, внутренних страниц и разделов на ВИКОН свои шапки, а у слабовидящих две разные панели настроек.
Процесс работы
Начал с исследования. Собрал десяток сайтов вузов и разложил их на шкале от менее корпоративных к более корпоративным, чтобы выбрать визуальное направление. Отдельно разобрал, как у других вузов устроены «Сведения об образовательной организации». Это самый сложный обязательный раздел, его нельзя было оставлять на потом.
Компоненты раньше страниц. Нарисовал пару пробных элементов, чтобы нащупать визуальный язык, собрал карту разделов и шапку из двух полос. До основных макетов сделал кнопку со всеми типами и состояниями, иконки, поиск, пагинацию и хлебные крошки. Поэтому страницы потом собирались из готовых деталей.
Дальше вёл систему. Завёл UI Kit и журнал изменений и возвращался к готовым страницам. Пересобрал навигацию.
Большинству людей на сайте вуза нужен один конкретный раздел, поэтому шапка должна сразу показывать, куда идти.
Правила, по которым я проверял экраны:
- 1У каждого раздела одно место в навигации.
- 2Одинаковые элементы выглядят одинаково на всех страницах, включая разделы на ВИКОН.
Решения
Одна шапка на весь сайт. Внутренние страницы теперь в той же шапке, что и главная, с хлебными крошками. В новостях появились поиск, фильтр по дате и темы.
«Сведения об образовательной организации». Структуру раздела задаёт приказ, и проверяющие ищут пункты именно по ней. Поэтому структуру и состав пунктов я оставил как есть и поменял только вид. На главной странице раздела вместо пересказа приказа список подразделов. В «Основных сведениях» данные разложены по строкам: слева название, справа значение.
«Абитуриенту» под ВИКОН. Страница работает на платформе ВИКОН, где нельзя менять раскладку блоков. Структуру и текст оставил как на живом сайте и поменял только визуальный слой, чтобы страницу можно было внедрить без переделки платформы. Отдельно есть полная версия страницы на основном шаблоне.
Версия для слабовидящих. Вместо двух разных панелей одна на весь сайт: размер шрифта, межбуквенный и межстрочный интервал, цветовая схема, гарнитура, изображения и сброс настроек. Экраны сайта в этом режиме нарисованы на всех устройствах.
Поиск и технические страницы. В результатах поиска видно число найденного и тип каждого результата, например раздел или новость. Для страниц ошибок разобрал, как они сделаны на 15 вузовских сайтах. На 404, «Сервер не отвечает» и «Технические работы» есть объяснение, кнопка на главную и контакты приёмной комиссии и ректора.
Дизайн-система
Дизайн-система небольшая. Цвета, размеры и шрифты заведены токенами. Все шаблоны собраны из одного набора компонентов: кнопки со всеми типами и состояниями, поиск, пагинация, хлебные крошки, поля ввода, выпадающий список, аккордеон. Шапка, подвал и карточки сделаны вариантами под десктоп, планшет и телефон. В UI Kit есть журнал изменений, по нему видно, что и когда поменялось в компонентах.
Результат
За 4 месяца спроектировал шаблоны основных страниц сайта на десктопе, планшете и телефоне, версию для слабовидящих, расписание, поиск и технические страницы. Отдельно сделал версию «Абитуриенту», которую можно внедрить на ВИКОН без изменения платформы. На данный момент сайт еще разрабатывается.