ARTLEBEDEV
  • Веб
  • Создание сайта Национального исследовательского технологического университета МИСиС

    Описание• Процесс

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

    Выстраиваем порядок работы с частностями.

    Начинаем перебирать руду и искать золото. Изучаем типичных пользователей сайта и их потребности.

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

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

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

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

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

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

    А что, если предусмотреть фоновые обложки, в которых каждой кафедре соответствует свой материал и собственная тема изучения?

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

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

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

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

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

    В главном меню оставляем только пункты для быстрого доступа к самому важному.

    Подробности убираем в элемент «Весь сайт».

    Все отрисованные макеты перманентно собираются в общем прототипе. Это позволяет увидеть картину мира целиком и трезво оценить успешность тех или иных гипотез.

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

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