КРМК: сайт для абитуриентов радиомеханического колледжа — 10 специальностей и тест на профессию

Клиент: Казанский радиомеханический колледж (КРМК). Колледж открылся в 1967 году как техническое училище № 51 при производственном объединении «Радиоприбор». Сегодня он называет себя технопарком цифровой трансформации и готовит специалистов по четырём направлениям: производство, радиоэлектроника, информационные технологии и креативная экономика — всего десять специальностей. Аудитория сайта — абитуриенты.

Ситуация: специальности колледжа относятся к очень разным областям — от слесарных работ и станков с ЧПУ до дизайна и event-менеджмента. Абитуриенту нужно понять, чем занимается специалист и кем он сможет работать, а часть абитуриентов ещё не выбрала профессию совсем. Условия, от которых зависит решение, — поступление без ЕГЭ, бюджетные места, стипендии, отсрочка от армии — должны быть видны до контактов приёмной комиссии.

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

Структура страницы

Мы сделали одну длинную страницу из девяти блоков в том порядке, в котором абитуриент принимает решение:

• видео на первом экране;

• о колледже;

• направления;

• специальности;

• тест на профессию;

• почему КРМК;

• люди колледжа;

• приём 2026;

• контакты и карта.

Тексты короткие и обращаются к абитуриенту на «ты».

Цвета направлений

У каждого из четырёх направлений свой цвет из знака колледжа: производство — зелёный, радиоэлектроника — красный, IT — фиолетовый, креативная экономика — жёлтый. Цвет повторяется в метках специальностей, поэтому принадлежность к направлению видна в любом месте страницы. Блок теста стоит на фирменном градиенте.

Первый экран и блок о колледже

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

Второй блок держит экран при прокрутке: фото здания растёт из карточки со скруглёнными углами до краёв окна, а заголовок «Не просто колледж — технопарк» переезжает в центр и становится белым.

Направления и специальности

Десять специальностей разложены по четырём направлениям:

• Производство — мехатроника и робототехника, технология машиностроения, оператор-наладчик станков с ЧПУ, мастер слесарных работ;

• Радиоэлектроника — монтаж и ремонт электронных приборов, управление качеством продукции, монтажник радиоэлектронной аппаратуры;

• Информационные технологии — компьютерные системы и комплексы;

• Креативная экономика — дизайн (по отраслям) и социально-культурная деятельность.

Вкладки направлений следят за прокруткой, нажатие на вкладку приводит к нужной карточке.

Специальности собраны в аккордеон: одновременно открыта одна строка, цветная метка показывает направление. Внутри — чем занимается специалист и кем он сможет работать. Например, после мехатроники и робототехники — инженер-робототехник, наладчик мехатроники или специалист АСУТП. Кнопка «Подать заявление» открывает заявку, где эта специальность уже выбрана.

Тест на профессию

Тест из десяти вопросов — для тех, кто ещё не выбрал. Каждый ответ добавляет баллы одной или нескольким специальностям, а после десятого вопроса побеждает та, что набрала больше всех. Первый вопрос — «Что тебе ближе всего?» с вариантами: работать руками с металлом, паять и собирать электронику, программировать, создавать визуальный контент.

Результат переносится в заявку: кнопка «Оставить заявку» открывает форму с этой специальностью.

Причины, приём и контакты

Ближе к концу страница отвечает на вопросы, от которых зависит решение. Пять причин поступать:

• без ЕГЭ и ГИА — по среднему баллу аттестата;

• бюджетные места;

• ежемесячная стипендия;

• отсрочка от армии на время учёбы;

• поступление в вуз по упрощённой схеме после колледжа.

Три экрана приёма — «Начни обучение осенью 2026», мастерские с оборудованием и сообщество технопарка — уходят вверх шторкой при прокрутке. В подвале — адрес, телефон и почта приёмной комиссии и карта Казани.

Мобильная версия

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

Технологии

Страница написана на чистых HTML, CSS и JavaScript — без сторонних библиотек и шагов сборки. Раскрытие фото при прокрутке, вкладки, которые следят за прокруткой, аккордеон, шторки приёма, тест и окно заявки написаны без фреймворков.

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

Что получил клиент

• Одностраничный сайт на HTML, CSS и JavaScript без библиотек и сборки

• Первый экран с видео о колледже

• Фото здания, которое раскрывается при прокрутке

• Доску четырёх направлений с вкладками, которые следят за прокруткой

• Список 10 специальностей и интерфейс формы заявки с выбранной специальностью

• Тест на профессию из 10 вопросов

• Пять причин поступать, экраны приёма и контакты с картой

• Мобильную версию со своим меню