Политехнический институт ЮУРГУ обратился к нам с запросом создания сайта для абитуриентов. Сайт должен быть молодежным, информативным и привлекающим внимание будущих студентов.

Этапы разработки:

1 Этап

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

На первом этапе приступили к созданию дизайна для сайта

Созданным дизайном мы хотели передать атмосферу эко-направленности центра

2 Этап

Также самостоятельно отрисовали иллюстрации и оформили ими пошаговое поступление в институт от сдачи экзаменов до обучения. К иллюстрациям добавили пошаговую анимацию — все вместе получилось очень интересно и информативно.

Пошаговая демонстрация поступления

Далее мы приступили к созданию структуры сайта: в навигационное меню вынесли разделы: Главная, Об институте, Отрасли; добавили логотип учреждения, кнопки для связи с приемной комиссией и кнопку подачи документов. Раздел «Об институте» отправляет пользователя на основной сайт учреждения. Страница Отрасли дополнительно разделена на 5 секций в соответствии с количеством существующих специальностей.

Создание общей структуры сайта

3 Этап

4 Этап

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

Общее оформление главной страницы

5 Этап

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

Создание карточек для отраслей

6 Этап

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

Реализация профиориентационного теста

7 Этап

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

Оформление событий института

8 Этап

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

Закрытие большинства вопросов

9 Этап

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

Оформление отраслевых страниц

10 Этап

Вынесли отдельными текстовыми блоками о том, как и где работают выпускники, добавили иконки и список работодателей. Разместили видео о каждом факультете, блок об успешных выпускниках и форму обратной связи. Добавили ссылки на другие специальности для быстрой ориентации по сайту. На странице каждой отрасли реализовано боковое всплывающее при наведении меню для удобного перехода к другим отраслям. Для него использовалась всплывающая анимация «При наведении».

Размещение и оформление подробной информации

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

Ответ на главный вопрос

11 Этап

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

Удобство использования

12 Этап

Для сайта мы настроили большое количество стильных анимаций и плавных переходов для динамичности и привлекательности

13 Этап

Провели необходимые SEO-настройки: для каждой страницы выставили заголовок h1; сделали описание и заголовок страниц; добавили favicon. Подключили Яндекс Метрику, Яндекс Вебмастер, Google Search Console, Google Analytics для отображения сайта
в поисковой выдаче и дальнейшего анализа посещаемости

SEO-Настройка сайта

14 Этап

Результат:

Ссылка на сайт: