Как мы делали сайт Заочного факультета БГТУ

Автор:
Дата:
Изображение сайта arktur.solutions

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

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


Анализ конкурентов

Для максимальной объективности были выбраны несколько сайтов белорусских и зарубежных ВУЗов.

Изображение сайта arktur.solutions Официальный сайт БГУ

Изображение сайта arktur.solutions Официальный сайт БНТУ

Изображение сайта arktur.solutions Официальный сайт МГЛУ

Изображение сайта arktur.solutions Официальный сайт МГУ

Изображение сайта arktur.solutions Официальный сайт Гарварда

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

Сайт БГУ имеет хорошо заметную навигацию по сайту, однако слишком крупную для рядового пользователя. Расцветка выбрана достаточно удачно, как и у сайта МГЛУ, однако на сайте БГУ синий стоило бы сделать немного посветлее, т.к. темно-синий является немного угнетающим с точки зрения психологии, у пользователя будет возникать желание поскорее уйти с такого сайта.

Сайт БНТУ при первом взгляде создает ощущение сумбура, информации очень много, преобладает мелкий шрифт. Стилистически сайт выполнен в фирменных цветах университета, однако, акценты зеленого цвета стоило бы делать осторожнее. Также сайты, где всюду используются шрифты с засечками, лучше разрабатывать в другом стиле, где они будут уместны. В этом плане сайт МГЛУ однозначно выигрывает, о чем будет изложено ниже. Хотелось бы отметить невзрачную навигацию и «съехавшую» верстку при разрешении в 1280 пикселей.

Сайт МГЛУ из представленных белорусских сайтов выглядит наилучшим образом. Хочется отметить неплохой слайдер на главной странице, расположение заголовка, логотипа и меню навигации. Однако, меню немного вводит в заблуждение тем, что какой-то пункт постоянно находится раскрытым, что может восприниматься в качестве бага. Очень порадовало сочетание шрифтов. Однако, шрифт с засечками используется только для названия университета, когда его можно использовать для любых заголовков. К сожалению, и здесь при разрешении в 1280 пикселей появилась горизонтальная полоса прокрутки.

Стоит обратить внимание, что сайт МГУ – единственный из представленных сайтов разработан частной компанией, специализирующейся на разработке сайтов, что видно по его внешнему виду, продуманности элементов и структуры. Хорошая деталь – год основания университета, что придает ему солидности. Информация разбита по блокам и выделяется цветами, что позволяет без затруднений найти то, что может быть полезно.

По итогу были учтены многие ошибки, присущие сайтам конкурентов.


Целевая аудитория

Целевой аудиторией сайта заочного факультета являются юноши и девушки в возрасте от 16 до 35 лет. Данная аудитория делится на две подгруппы, которым свойственна сезонность.

Первая группа – абитуриенты. Это необязательно учащиеся средних учебных заведений, но и другие студенты, которые хотят поступить/перевестись на заочную форму обучения в БГТУ, а также люди, которые хотят получить второе высшее образование. Чаще всего посещают сайты университетов поздней зимой и весной, когда требуется определиться с тем, куда поступать и какие для этого требования.

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


Структура проекта

Структура сайта претерпела некоторые изменения, однако в целом осталась похожей на старую структуру в силу своего удобства. Не стоит ломать то, то хорошо работает. В проекте используются две сущности – статические страницы и новости (показаны разными цветами). Обе сущности создаются в админ-панели. Разница в том, что статические страницы могут быть использованы в проекте независимо друг от друга и иметь любое содержание, в то время как за новости отвечает отдельный контроллер в рамках раздела «Новости».

Изображение сайта arktur.solutions

Навигация

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

Изображение сайта arktur.solutions Навигация сайта на компьютере

Изображение сайта arktur.solutions
Навигация сайта на смартфоне


Разработка дизайна

Логотип

За прототип был взят логотип заочного факультета. С учетом выбранного минималистичного стиля, логотип должен быть плоским и монотонным. Также было решено добавить дату создания факультета, что только прибавило шарму внешнему виду.

Изображение сайта arktur.solutions

Типографика

Для разработки проекта были выбраны шрифты Merriweather с засечками и Ubuntu без засечек. Первый используется в шапке сайта, заголовках h1-h6 и для обозначения смысловых блоков. Второй – для обычного текста, пунктов меню, списков и так далее. Данные шрифты отлично сочетаются и подобраны с помощью сервиса Google fonts.

Макетирование

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

Изображение сайта arktur.solutions
Макет сайта

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


Тестирование и валидация

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

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

На момент разработки проекта, сайт размещался на нашем поддомене zf.arktur.solutions, поэтому и тестирование проводилось на поддомене, до того как загрузить проект на продакшн. Отчет валидации не выявил никаких ошибок (а если они и были, то мы все исправили).

Изображение сайта arktur.solutions
Валидация нового сайта

Сравним с результатами старого сайта, где выявлена 31 ошибка.

Изображение сайта arktur.solutions
Валидация старого сайта

А теперь оценим скорость загрузки обоих сайтов на компьютерных и мобильных устройствах с помощью сервиса google pagespeed insights.

Изображение сайта arktur.solutions
Скорость загрузки нового сайта на мобильных

Изображение сайта arktur.solutions
Скорость загрузки нового сайта на компьютерах

Теперь посмотрим на результаты проверки старого сайта:

Изображение сайта arktur.solutions
Скорость загрузки старого сайта на мобильных

Изображение сайта arktur.solutions
Скорость загрузки старого сайта на компьютерах

Как видно из результатов проверки, новый сайт полностью оптимизирован. Этого удалось достичь благодаря использованию современных форматов картинок, отложенной загрузке изображений, объединения всех файлов стилей и скриптов в отдельные файлы, а также сжатия их с помощью gzip. Но об этом в отдельной статье.

С финальным результатом можно ознакомиться по ссылке.