{"id":6525,"title":"\u041a\u0430\u043a \u0441\u0435\u0431\u044f \u0447\u0443\u0432\u0441\u0442\u0432\u0443\u0435\u0442 \u0438\u043d\u0432\u0435\u0441\u0442\u0438\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u043f\u043e\u0440\u0442\u0444\u0435\u043b\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 vc.ru","url":"\/redirect?component=advertising&id=6525&url=https:\/\/vc.ru\/promo\/292716-yandeks-vyhodit-iz-spyachki-alibaba-portit-nastroenie&placeBit=1&hash=7519bee6efc23ae5d635bf3098f678add4979d572b9f05b21135900c9688d27b","isPaidAndBannersEnabled":false}
Дизайн
paraweb

Сайт абитуриента «не как у всех»: кейс Томского Политеха и digital-агентства «Паравеб»

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

Совместно с digital-агентством «Паравеб», ТПУ запустил новый сайт для абитуриентов, объединив дух нового поколения и традиции топового технического университета.

Главная страница сайта «Абитуриент ТПУ»

Новое «лицо» старого сайта

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

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

Мария Моисеенко
начальник управления корпоративных и внешних связей ТПУ

— У ТПУ уже была запущена рекламная кампания «Инженеры придумали все», ориентированная на ребят-технарей. Потенциальная аудитория сайта — это, в основном, молодежь от 14 до 23 лет, играющая в компьютерные и мобильные игры, активно использующая соцсети. Сайт должен быть интересен пользователям, находящимся на волне этих информационных трендов.

Эмиль Ахтямов
директор digital-агентства «Паравеб»

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

Страница бакалавриата/специалитета и калькулятор ЕГЭ

Разница аудиторий

Объединение под одним сайтом всех групп поступающих вызвало вопрос — а будет ли отличаться подача материала для этих групп? Ведь каждый приходит на сайт за «своей» информацией.

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

Раздел с направлениями подготовки

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

— На старте мы планировали делать значительно более унифицированный по содержанию сайт. Думали, все будет проще. Но запросы уточнялись и команда генерировала множество идей, как сделать по-настоящему круто: динамические 3D-объекты, параллакс-эффекты, карты глубины страницы, анимации в игровом стиле и многое другое. Распределяли между разделами, где будет уместнее выглядеть. Работы прибавилось.

Эмиль Ахтямов
директор digital-агентства «Паравеб»

Взгляд изнутри

По правилам набора, каждый абитуриент может подать документы максимум в 5 учебных заведений. Задачей Паравеба было сделать такой сайт, который выделил бы ТПУ в этой «топовой» пятерке и замотивировал глубже изучить направления Политеха, его программы, место в рейтингах и историю. Конечно, выделиться — не значит, что человек гарантированно сюда поступит, но с задачей вовлечения сайт однозначно должен справляться.

Проверить, насколько правильной была ставка команды на использование игровых трендов, помогли фокус-группы. Исследование проводили с девушками и юношами 14-16 лет, отдельно — со студентами разных курсов. Фиксировали, что участники отмечали как удобный или неудобный в использовании формат, как реагировали на интерактивы в разных разделах, что говорили про дизайн.

Интересно, что результаты работы фокус-групп подтвердили гипотезу ученых, изучающих сайты университетов: школьники действительно оценивают сайт вуза как аргумент «за» или «против» поступления, стилистика и качество исполнения «цифрового лица» университета влияет на отношение к предлагаемым образовательным программам.

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

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

Раздел с преимуществами вуза

«Автопилот» управления сайтом

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

Также для дизайнеров и контент-менеджеров ТПУ были составлены подробные инструкции, как оформлять различные публикации, чтобы они не «выбивались» из общего стиля. Например, как в фотографии добавить параллакс (эффект трехмерного изображения), как визуально оформлять разные разделы, насколько «молодежными» могут быть иллюстрации к новостям и т.д.

Раздел новостей в десктопной и мобильной версии

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

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

Эмиль Ахтямов
директор digital-агентства «Паравеб»

Результаты работы

Университетам, в которых сильны традиции обучения сложным наукам, бывает нелегко решиться на более свободный стиль общения с абитуриентами, есть сомнения насчет «несерьезности».

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

Эмиль Ахтямов
директор digital-агентства «Паравеб»

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

Раздел с направлениями подготовки в мобильной версии сайта

Вся работа над сайтом заняла 8 месяцев, начиная от концепции и до финального запуска. Что было сделано за это время:

  • Переработали структуру уже имеющегося, но устаревшего сайта, и представили в одном месте все направления обучения в ТПУ;

  • Сделали для бакалавриата, специалитета, магистратуры и аспирантуры различающийся дизайн разделов с собственными интерактивными «фишками» направлени;

  • Упростили и автоматизировали работу с контентом для специалистов вуз;

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

  • Разработали сложные шаблоны верстки для страниц новостей и мероприяти;

  • Создали библиотеки элементов, которые можно использовать для конструирования и оформления страниц в едином стил;

  • Настроили анимации кнопок и интерактивных элементов в стилистике игр и популярных мобильных приложений.

Еще на стадии дизайна Абитуриент ТПУ получил «серебро» Tagline Awards и был отмечен на конкурсе CSS DA. Команда была рада, что такой «нетипичный» и смелый подход к сайту абитуриента вуза был высоко оценен даже через «чистый» статичный дизайн без верстки.

Сайт Абитуриента ТПУ получился по-настоящему крутым. Он сильно отличается от всех своих конкурентов, особенно на российском образовательном рынке. И это невозможно было бы сделать, если бы ТПУ, один из топовых вузов России, не осмелился запустить такое сильное и смелое решение. За это стоит сказать им спасибо.

Эмиль Ахтямов
директор digital-агентства «Паравеб»
{ "author_name": "paraweb", "author_type": "self", "tags": [], "comments": 38, "likes": 27, "favorites": 32, "is_advertisement": false, "subsite_label": "design", "id": 263737, "is_wide": true, "is_ugc": true, "date": "Tue, 29 Jun 2021 12:12:06 +0300", "is_special": false }
0
38 комментариев
Популярные
По порядку
Написать комментарий...

Дальше первой картинки идет типичная структура сайта из 2000 с   бесконечными гиперссылками.  И так до конца страницы
Что тут революционного вы сделали?

6

Конкретно на вашем скрине раздел с официальными документами приемной кампании, необходимые сайту образовательной организации, без них никак. Инновации в менее официальных и регламентированных законодательством разделах

6

Есть регламент Минобра, что подобные документы должны быть представлены именно в виде текстовой гиперссылки?

6

Вы смотрите, аккуратней. Эта дорожка опасна.

5

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

3

Спасибо! 

0

Комментарий удален по просьбе пользователя

2
2

Ну как минимум жюри Tagline awards и CSSDA с вами не согласятся

1

Комментарий удален по просьбе пользователя ред.

–1

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

1

Комментарий удален по просьбе пользователя

0

"Tagline кто такие?"

На этом можно закончить

0

Комментарий удален по просьбе пользователя ред.

0

Очень крутой сайт вышел! Хоть я и не абитуриент, но сайт буквально затянул на нём остаться, потыкать на кнопочки, посмотреть анимации. Супер :) 

1

Спасибо, Павел!

0

Есть предположение, что лет через 5-10 смайлики в стиле Эппла могут морально устареть, а на сайте они так и останутся.

0

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

2

У меня ощущение, что они устарели/устреют в 2021, но мы еще долго будем встречать их всюду, часто использованные абсолютно неуместно, под предлогом, что это 'элементы современной цифровой среды, привычной новому поколению'.
По Питеру сейчас наружная реклама другого ВУЗа везде висит:

0

Целевая аудитория пока реагирует хорошо. Вуз всегда может заменить такие элементы, если сочтет их устаревшими. А за скрин спасибо, это интересное наблюдение.

1

Всё так, у вас — простая замена элементов, у ГУАПа это вообще мимолетная рекламная кампания. Просто буквально вчера заметил на улицах) Но у них этот фон еще!..

1

5-10 лет и сайт надо будет менять. Посмотрите на большинство сайтов, которым 10 лет без обновлений. Они не то что морально устарели, их давно утилизировать нужно. 

0

Одному craigslist.org всё нипочём.

0

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

0

P.s. очень бесит бестолковая анимация, ради анимации. Но очень радует космонавт, залип летая курсором вокруг:)

Ещё кнопочка "поступить" выбешивает на телефоне, мало того что анимированная и большая, так ещё и висит "под пальцами".

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

1

Николай, спасибо за подробное, корректное и аргументированное пользовательское мнение. Возьмем в копилку!

1

Спасибо! Согласны, есть еще много вариантов, как обыграть тему

0

Только я вижу член под капюшоном? 

0

Похоже на то

0

А вот тут что случилось с буквой "И" в слове "Бакалавриат? Сместить так, чтобы она была полностью белой – непосильная задача?

0

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

0

Похоже на метку даты/времени в видеорегистраторах :)

0
Здравый мангал

По что фотографии зелёнкой облили?

0

А что по конверсиям?

0

Извите конечно, но что поменялось?
Мое мнение: Старый пердолинг, с новой обтяжкой, не иначе🤮

0

Задумка то так себе.  "Кривоватость" буквы для меня прям сигнал - раз с буквой так плохо, то и все остальное сделано на "от.............сь" 

Неужели никого их принимающих этот сайт и у вас не возникло вопросов - нафига делать так с буквой "и"?  
В чем посыл такого недобелизны буквы "и"

–1

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

0
Читать все 38 комментариев
Пять брендов, которые выпускают одежду, аксессуары и декор из мусора

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

Еду к деду
ЕС представит законопроект об едином разъёме для зарядного устройства смартфонов и планшетов — Reuters Статьи редакции

Принятие проекта сильнее всего повлияет на компанию Apple, которая оснащает устройства собственным разъёмом.

Как инфляция уничтожает ваш рекламный бюджет: анализ 400 млн кликов и 118 тысяч кампаний за 4 года

Почему трафик из «Яндекс.Поиска» дорожает, как газ в Европе, а «дешевая» РСЯ превратилась в безумного пожирателя бюджетов? Какой рекламный канал самый недооцененный, где покупать трафик и что будет со стоимостью лидов через год?

Utair разрешила пассажирам перевозить своих кошек и собак на соседнем кресле Статьи редакции

Придётся купить два билета — на себя и животное.

Как использовать облачные технологии для роста бизнеса в 2022 году: расскажем на Yandex Scale

А ещё представим новые продукты.

Как облегчить планирование в редакции: опыт «Лайфхакера»

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

Белорусский сервис PandaDoc для управления электронными документами стал «единорогом» — оценка превысила $1 млрд Статьи редакции

За год оценка компании выросла почти в четыре раза.

Задания от самого титулованного программиста в мире и 3,72 млн призовых: каким был VK Cup в этом году

Зачем в VK Cup ежегодно участвуют тысячи специалистов из разных стран и чем запомнится турнир в этом году? Отвечаем на главные вопросы.

13 лайфхаков, которые помогут оплачивать счета и переводить деньги быстрее

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

null