;-)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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