Сайт для Национальной технологической олимпиады
Заказчик«Кружковое движение» — это ассоциация участников технологических кружков, основанная в 2017 году.Цель ее работы — активная поддержка и развитие образовательных инициатив в технической сфере.ЗадачаКлиент обратился к нам за помощью в обновлении уже существующего сайта проекта «Национальная технологическая олимпиада».Старая версия сайта нуждалась в свежем дизайне и в гибкой системе управления.
Решение:
Разработка новой концепции сайта
Сайт разрабатывался для двух целевых аудиторий — «Ученики» и «Наставники», поэтому важно было изначально продумать качественный UX дизайн и интуитивно понятную структуру для обеих категорий пользователей.
Посетители сайта должны без проблем разобраться в большом объеме информации, сложных требованиях, которым должны соответствовать потенциальные участники мероприятия, а также легко зарегистрироваться.
Мы сделали навигацию на сайте максимально простой и удобной для пользователей. Проработали разделы сайта. Для каждого направления олимпиады создали раздел «Профиль». На странице профиля можно найти всю важную информацию о событии: расписание, требования к участникам, необходимую контактную информацию, подробное описание этапов олимпиады. Каждый профиль содержит теги, позволяющие легко перейти в список мероприятий на схожие темы.
Также реализовали систему умной фильтрации для разделов «Площадки для подготовки» и «Материалы подготовки». Теперь пользователи могут легко находить все необходимое для эффективных занятий в рамках подготовки к мероприятиям: пройти нужный видеокурс, скачать данные или найти ближайшую офлайн-площадку.
Работа над календарем олимпиад
Поскольку в рамках проекта проводится множество мероприятий, на сайт необходимо было добавить удобную и понятную схему, отображающую актуальные и предстоящие события.
Основываясь на цветовом кодировании (условном обозначении отдельных направлений/сфер мероприятий), которое уже использовалось клиентом, мы разработали и отрисовали календарь олимпиад. Основные цвета стали обозначать этапы и статусы мероприятий.
Чтобы пользователям было удобно ориентироваться в новом календаре, мы разработали специальный фильтр, позволяющий сортировать мероприятия по дате и по направлению. Готовый календарь мы интегрировали во все страницы профилей мероприятий, при этом набор событий, отраженных в календаре, будет соотнесен с выбранным профилем. Таким образом, пользователь сможет увидеть все мероприятия по интересующей его теме.
Дизайн
Основой нового дизайна сайта стала айдентика компании, предоставленная клиентом. Опираясь на элементы айдентики, мы разработали стильное и современное оформление обновленного сайта и адаптировали его под все устройства.
Также использовали версию для слабовидящих, которая позволяет настраивать величину шрифта, междустрочные интервалы и выбрать цвета фона и текста. Кроме того, мы добавили удобную функцию озвучивания текста.
Адаптация административной панели
Поскольку клиент планировал самостоятельно редактировать сайт, актуализируя информацию по каждому мероприятию, мы реализовали удобную и, в то же время, функциональную административную панель. Теперь клиент может без проблем менять и настраивать изображения в баннерах и актуализировать информацию в любых разделах, используя заранее разработанные шаблоны. Мы добавили возможность дублировать одни и те же блоки на разных страницах, что позволяет сэкономить массу времени. На каждой странице предусмотрена гибкая организация блоков, что дает возможность легко менять их местами и изменять размер по необходимости. Кроме того, мы создали возможность подтягивать визуализацию из Data Studio, что тоже значительно упрощает работу с сайтом.
Результат
Нам удалось создать удобный и современный сайт, целиком и полностью отражающий тематику проекта — инновации и технический прогресс. Клиент получил возможность легко управлять обновленным сайтом с помощью интуитивно понятной административной панели. У пользователей появилась возможность без труда находить всю нужную информацию за считанные минуты, ориентироваться в расписании мероприятий и присоединяться к проекту.
Перейти на сайт
Полный текст статьи читайте на CMS Magazine
