Наш сайт — призер ?Рейтинга Рунета?

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

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

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

Редизайн сайта?— это?не?только изменение? оформления, но?также переосмысление его структуры и?модернизация функциональной составляющей.

Приступая к?редизайну сайта, мы четко понимали главную причину, по?которой это делаем: сайт стал очень запутанным, количество информации все время увеличивалось, а?инструментов для?ее упорядочивания было недостаточно. Разделы закрывались, а?ссылки, поставленные на?них вручную, превращались в??ошибку 404?, негативно влияя на?индексацию. И?самое главное?— число пользователей мобильного интернета сравнялось с?количеством тех, кто выходит в?сеть c?компьютера, а?это значит, что?наш сайт безвозвратно устарел, так как?его невозможно толком посмотреть ни?на?смартфоне, ни?на?планшете. Тем не?менее, это были лишь общие мысли, которые задали направление нашему исследованию?— своего рода рабочая гипотеза, которую необходимо было проверить. Благодаря тому, что?на?старом сайте давно уже собиралась информация о?посещаемости с?помощью разных сервисов (Google Analytics, Яндекс-метрика, Piwic и?др.), мы смогли достаточно подробно проанализировать динамику многочисленных параметров.

?

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

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

?

?

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

>400 %
зафиксирован рост числа пользователей смартфонов среди посетителей сайта 188bet体育_188bet亚洲体育_点此进入 с?2013 года.

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

?

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

• большой объем информации, недостаточно ясно структурированной для?различных групп пользователей
• элементы контента не?связаны друг с?другом, кросс-ссылки выставляются вручную, что?затрудняет навигацию и?приводит к?ошибкам
• доминирующим типом информации являются тексты, причем стилей для?их оформления практически нет
• визуальный контент представлен в?минимальном объеме, а?галереи для?его показа неудобны
• сайт устарел визуально и?технически?— ресурс не?подстраивается под мобильные устройства

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

• интернет стал мобильным, а?сайты?— ?респонсивными?, то?есть полноценно доступными с?любых устройств
• экспрессивная типографика?— один из?главных трендов пятилетия как?в?зарубежном, так и?русскоязычном интернете
• для сайтов характерна выраженная блочная структура страниц: ?карточки??— способ гибкой организации и?представления содержимого
• в?тренде ?плоский дизайн? и?минималистичность, произошел отказ от?тяжелого оформления и?попыток имитации реальности в?интерфейсах
• украшением современных сайтов выступает само содержимое: нелинейно сверстанные тексты, большие изображения, полноэкранное видео

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

Мнение эксперта

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

Ведущий эксперт Института развития интернета, сооснователь Содружества петербургских цифровых агентств Алексей Ёжиков

Вайрфрейм?— это?структурная схема будущей страницы сайта, показывающая расположение, взаимосвязи и?функциональность ее?элементов. Создание вайрфреймов предшествует этапу дизайна и?разработки сайта. Вайрфрейм не?является дизайн-макетом.

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

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

Примеры, на?которые мы ориентировались: сайт Президента РФ, University of Oxford, University of Washington, Berkeley, Stonehill College, Stanford Arts, Michener Institute of Education at UHN, Langara, Bates College, Plymouth University, University of Texas, University of Illinois at Chicago, Coursera, Design made in?Germany, Big Data, Wired, Arzamas, N+1 и?многие другие.

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

?

Подход конструктора применяется
в?разделах ?Студентам?, ?Наука? или ?Экспертный университет?.

Актуальность подхода ?сайт-конструктор? обусловлена доступностью в?использовании и?гибкостью?— мы знаем, что?Университет и?его сайт будут расти и?меняться, поэтому уделили много времени созданию разнообразных строительных блоков, которые будут работать практически в?любых сочетаниях. Мы также определили уникальные страницы, для?которых сделали ?индпошивные? шаблоны, а?большинство контентных разделов были собраны уже на?базе этого конструктора.

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

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

Мнение эксперта

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

Арт-директор Func.ru, автор и?преподаватель курса веб-дизайна уровня PRO в?Epic Skills Артем Кудра

?

В результате проделанной работы были спроектированы вайрфреймы более 50?ключевых разделов и?их?внутренних страниц, в?том числе более 20?уникальных, созданы более двух десятков уникальных компонентов и?блоков-модулей.

Университет

Раздел ?Университет? включает уникальный исторический таймлайн (вехи истории Первого Университета России), подразделения, руководство 188bet体育_188bet亚洲体育_点此进入 и?другие. Предусмотрен специальный подраздел, посвященный деятельности ректора 188bet体育_188bet亚洲体育_点此进入, где?собраны интервью, ректорские инициативы, материалы ректорских совещаний, залинкованные с?полной базой документов.

Поступающим

Раздел ?Поступающим? разработан для?основной аудитории сайта?— абитуриентов и?их?родителей. Основная задача раздела: помочь абитуриенту сделать выбор из?более чем?300 образовательных программ, быстро сориентировать в?графике поступления.

?

Студентам

Раздел ?Студентам??— витрина возможностей, которые 188bet体育_188bet亚洲体育_点此进入 дает будущим универсантам. Раздел содержит вводную информацию по?разным студенческим активностям: стажировкам и?конкурсам, инициативам, студсовету и?студгородку, социальной защите,?— а?погружение в?детали происходит уже на?уровне порталов (например, campus.spbu.ru или edu.spbu.ru).

Наука

Раздел ?Наука??— презентация ресурсов Научного парка 188bet体育_188bet亚洲体育_点此进入. Он включает каталог ведущих научных центров и?лабораторий Университета, обзорную информацию по?конкурсам и?грантам, навигацию по?прочим научным порталам 188bet体育_188bet亚洲体育_点此进入.

Пресс-центр

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

Новости и?события

Раздел ?Новости и?события? аккумулирует все анонсы и?новости Университета, распределяя их?по?типам (конференции, семинары, дни открытых дверей) и?тегам-темам (?поступающим?, ?история?, ?выпускники?, ?стартап? и?др.).

?

?

Специальное меню

В?соответствии с?принципами политики открытости раздел ?Открытый университет? содержит базу документов 188bet体育_188bet亚洲体育_点此进入 с?удобным поиском по?типу, дате, имени файла и?другим атрибутам. Также здесь размещается информация о?принципах открытости для?каждой из?целевых аудиторий сайта: поступающих, студентов и?выпускников, сотрудников и?соискателей, партнеров и?работодателей.

Раздел ?Экспертный университет? содержит информацию о?Центре экспертиз 188bet体育_188bet亚洲体育_点此进入 и?Центре языкового тестирования. В?нем выводятся экспертные заключения, которые загружены в?каталог? документов.

Мнение эксперта

...Как с?точки зрения архитектуры, так и?визуального оформления, сайт гибкий и?легко настраивается для?любых подразделений и?структур с?полным сохранением узнаваемости. От?строгих научных лабораторий до?Факультета искусств. В?связи с?этим я очень надеюсь, что?проект будет принят не?только для?основного сайта, но?и?для?подсайтов факультетов, в?том числе моего ?родного? математико-механического.

Ведущий эксперт Института развития интернета, сооснователь Содружества петербургских цифровых агентств Алексей Ёжиков

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

Дизайн

К моменту редизайна сайта у?188bet体育_188bet亚洲体育_点此进入 не?было стиля для?веба, поэтому мы ориентировались на?основной фирменный цвет и?придерживались сдержанного подхода в?оформлении. Нам нужно было модернизировать то, что?уже использовалось в?печатной и?сувенирной продукции, и?при?этом ?усидеть на?двух стульях?: с?одной стороны, сделать сайт современным, с?другой?— не?слишком модничать и?удивлять.

Выше уже было сказано о?минималистичном подходе, повышенном внимании к?типографике и??плоском дизайне??— действительно, даже айдентика в?современном вебе стремится к?упрощению, и?ребрендинги последних лет подтверждают эту тенденцию. Многие ведущие университеты мира упростили свои фирменные блоки, отказавшись либо от?гербов, либо от?прорисовки их деталей. Большая работа в?этом плане была проделана в?контексте редизайна сайта Президента России, который и?стал для?нас ориентиром. Новая версия герба 188bet体育_188bet亚洲体育_点此进入 специально проработана для?использования в?цифровой среде и?обладает более четким контуром. Фигура Минервы теперь различима даже в?мелких размерах. Добавлена дата 1724, которая однозначно выделяет герб на?фоне других.

?

Необходимо было помнить и?том, что?наши основные аудитории?— студенты и?их родители?— также имеют разные вкусы и?зачастую обладают различной визуальной культурой, поэтому мы для?себя формулировали задачу так: сделать сайт умеренно продвинутый для?консерваторов и?умеренно консервативный для?продвинутых, а?также отразить корпоративную культуру в?оформлении и?обеспечить запас прочности, устойчивость дизайна к?переменам. Мы хотели, чтобы сайт был актуальным не?один год, чтобы заданная структура и?визуальная система были достаточно гибкими и?могли спокойно развиваться и?перестраиваться при?редизайне других порталов 188bet体育_188bet亚洲体育_点此进入.

Мнение эксперта

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

Арт-директор Func.ru, автор и?преподаватель курса веб-дизайна уровня PRO в?Epic Skills Артем Кудра

При разработке дизайна учитывалось и?то, что?визуальным контентом на?современных сайтах становится сам текст?— большое значение приобретает качество и?разнообразие стилевой разметки, которая помогает сохранить внимание пользователя и?задержать его как?можно дольше. Если на?старом сайте существовали лишь стили заголовков и?основного текста, то?для?нового разработано более десятка способов акцентуации.

?

Итогом этапа стала дизайн-концепция, в?основу которой была положена идея сочетания умеренного стиля серьезного и?при этом современного учебного заведения, учитывающего передовые тенденции, но?не?стремящегося к?вау-эффекту. На?основе концепции были разработаны дизайн-макеты ключевых разделов и?внутренних страниц сайта (более 150?реализаций), в?том числе более 20?уникальных. Помимо этого, подготовлены дизайн-решения для?отображения более двух десятков уникальных компонентов и?блоков-модулей (более 60?реализаций), в?том числе под?различные типоразмеры экрана.

?

Все это вы?можете видеть на?сайте прямо сейчас, в?том числе и?в?статье, которую читаете в?данный момент.

Верстка и?программирование

Важной частью создания сайта является выбор системы управления содержимым (CMS) или ?движка?. Для?нового сайта 188bet体育_188bet亚洲体育_点此进入 была выбрана CMS Drupal, которая обладает открытым кодом и?позволяет решить одну из?главных задач?— создание конструктора страниц. Открытый код дает возможность в?будущем развивать сайт, не?оплачивая покупку лишних программных приложений, а?наличие модуля Panels позволяет набирать страницу из?блоков информации. Кроме того, при выборе CMS учитывались общие и?технические требования:

• безопасность?— своевременный выпуск обновлений
• распространенность технологии и?самой CMS, определяющая, насколько легко поддерживать сайт и?находить разработчиков
• мультиязычность?— возможность создавать новые языковые версии сайта
• мультисайтинг?— возможность быстро и?просто создавать подсайты
• версионность и?история изменений?— важный инструмент, когда на?сайте больше двух контент-менеджеров
• условия совместной работы и?рабочий цикл документа?— возможность редактировать черновик документа несколькими редакторами

Все перечисленное выше удачным образом сочетается в?CMS Drupal, которая в?дополнение ко?этому обладает более чем 30 000 дополнительных модулей. К?тому же, выбранная нами CMS уже давно апробирована ведущими вузами и?используется на?сайтах Йеля, Калтеха, Гарварда, Оксфорда.

Мнение эксперта

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

Эксперт программы ?5?— 100?, ведущий преподаватель школы ИКРА, основатель и?креативный директор агентства Shishki Михаил Шишкин

Итогом этого этапа стал готовый сайт, адаптированный для?разных типов устройств и?браузеров (Google Chrome, Firefox, Safari, Opera и?IE), включая два мобильных (iOS и?Android). Отдельно была проработана версия для?слабовидящих.

?

В заключение было подготовлено руководство по?работе с?базовыми стилями и?компонентами для?контент-менеджеров и?проведены консультации для?персонала.

Тестирование, заполнение контентом и?багфиксинг

Заключительный этап проекта?— перенесение контента, проверка и?тестирование всего функционала и?качества отображения, устранение ошибок. Одной из?главных задач этого этапа было обучение команды контент-менеджеров работе на?новом сайте. Это обучение строилось не?только на?основе специально подготовленных инструкций, гайдов и?обучающих семинаров, но?и?благодаря практике. В?процессе заполнения сайта мы перенесли на?него и?статичные общие разделы, и?постоянно обновляющиеся событийные, включая все новости, пресс-релизы и?публикации в?СМИ, начиная с?2016 года, интервью ректора с?2009 года, анонсы с?середины 2016 года?— всего более 2?000 постов, а?также почти 10?000 документов.

Публикации, которые мы рекомендуем для?прочтения веб-редакторам и?контент-менеджерам в?первую очередь: Photos as?Web Content, Banner Blindness: Old and New Findings, и?другие исследования Nielsen?Norman?Group;?You Won't Finish This Article. Why People Online Don't Read to?the?End; You're not Going to?Read This. But You'll Probably Share It Anyway.

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

В контексте глобальных трендов

Мы обратили внимание на?то, что?одним из?направлений развития веба, помимо роста пользователей мобильного интернета, стало закрепление разных функций за различными ресурсами: сайты организаций преобразовались в?порталы открытых данных с?многочисленными каталогами (персоналий, новостей, программ, документов), а?соцсети превратились в?площадки для?общения, причем даже СМИ на?своих сайтах стали закрывать возможность комментирования. В?то?же время появились новые условия ранжирования сайтов у?поисковиков и?организаторов рейтингов. Для?них объем сайта потерял былое значение, и?на?первое место вышли уникальность контента, отсутствие дублей, причем не?только прямых, но?и?косвенных?— смысловых.

Мнение эксперта

Новый сайт 188bet体育_188bet亚洲体育_点此进入 выводит Университет на?новый уровень восприятия извне, соответствуя основным тенденциям и?представлениям о?сайтах современных серьезных университетов, способных не?только реализовывать учебные и?научные программы, но?и?выстраивать коммуникацию с?основными аудиториями на?соответствующем уровне. Современный университет?— с?современным сайтом.Эксперт программы ?5?— 100?, ведущий преподаватель Школы ИКРА, основатель и?креативный директор агентства Shishki Михаил Шишкин

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

Что это значит для?контент-менеджера и?редактора?

1. Каждый материал теперь живет в?нескольких видах: мобильном, планшетном, десктопном, социальном, и?вы не?знаете, как?на?него попадут пользователи, поэтому каждый материал должен стать главным, он должен цеплять и?не?отпускать.
2. Если материал однотипный и?массовый, то?чтобы сделать его востребованным, нужно разработать унифицированный каталог с?поиском по?атрибутам, а?не?пытаться организовать контент вручную. Например, на?нашем сайте, создано несколько таких каталогов: образовательных программ и?документов.
3. Контент не?должен дублироваться?— ни?в?виде прямого повтора одной статьи на?разных страницах, ни?в?виде файла, повторяющего содержание страницы, ни?даже в?виде пересказа.

В контексте текущих тенденций

К текущим тенденциям можно отнести моду на?определенные типы контента и?его веб-представления. Зачастую такие предпочтения тоже связаны с?технологией?— например, раньше были популярны короткие страницы, помещающиеся на?один экран, и?многоуровневая вложенность. Это было связано с?отсутствием прокрутки на?мобильных устройствах. Сейчас в?моде лонгриды, а?заставлять пользователя многократно кликать, чтобы досмотреть статью или раздел, не?принято. Раньше не?приветствовались многочисленные фото и?тяжелые картинки на?сайтах, поскольку скорость интернета была существенно ниже, как?и?разрешение экранов. Сейчас все поменялось с?точностью до?наоборот. Мы не?можем не?учитывать это.

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

?

Все это не?случайно?— большой поток информации снижает восприимчивость к?текстам, поэтому преимущество отдается тем материалам, в?которых информация визуализируется, поскольку картинка воспринимается интегрально, а?значит быстрее, чем?линейный текст. Исследования показывают, что, с?одной стороны, попав на?сайт, пользователь тут?же начинает скроллить, поэтому если сайт загружается больше девяти секунд, то?с?большой вероятностью, пользователь не?увидит первый экран. С?другой стороны, дальше второго экрана, где собственно начинается повествование, пользователи проходят редко, а?если это происходит, они сканируют текст блоками?— так?же, как?человек сканирует изображение, переходя от?одного контрастного участка к?другому (по?перепадам цвета, светлоты, размера и?т.?п.). Если таких блоков нет, и?текст монотонный, без?выделений и?акцентов, то?не?зацепившись взглядом ни?за?что, пользователь просто уходит.

Благодаря новым инструментам, тексты стали гораздо менее линейными, чем раньше?— стилевая разметка позволяет делать перебивки, врезки, обвески, расставлять цветовые и?прочие акценты там, где этого ждет глаз пользователя, нуждающийся в?отдыхе от?монотонности (согласно исследованиям, каждые 2–3 абзаца необходима такая смена декораций).

?

Что это значит для?контент-менеджера и?редактора?

1. Особое значение приобретают иллюстрации?— их должно быть много, они должны быть содержательными, обладать хорошим разрешением и?композицией.
2. В первый экран вкладывается самое основное, чтобы в?лучшем случае зацепить и?удержать, но?если этого не?получится?— донести главную мысль сразу: развернутые заголовки и?лиды, фотогалереи.
3. При написании и?публикации материала необходимо учитывать закономерности скроллинга, траектории сканирования и?циклы внимания.
4. Текст должен стать красивым?— лишние детали, небрежное форматирование, разнородное оформление одного и?того?же контента (то?тире, то?дефис, то?круглые кавычки, то?шевроны) вызывает ощущение неопрятности.

?

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

На новом сайте существует широкий спектр возможностей для?качественного оформления самых разных материалов, в?том числе и?такой стиль, как?в этой врезке.

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

Рейтинг Рунета

Приложенные усилия, потраченное время, искренняя заинтересованность, неравнодушие и?увлеченность, которые проявили участники проекта, принесли свои результаты. Еще до?официального запуска, наш новый сайт стал призером ?Рейтинг Рунета??— наиболее влиятельного и?одного из?старейших всероссийских конкурсов сайтов и?мобильных приложений. Конкурс проводится с?2011 года и?проходит в?три этапа.

Как проходит конкурс

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

?

На втором этапе в?работу включается жюри конкурса, в?состав которого входит более 200 ведущих специалистов веб- и?мобильной разработки. Они оценивают номинантов по?2–3 актуальным для?номинации критериям и?формируют шортлист конкурса в?каждой номинации. В?результате подсчета среднего балла каждого участника определяется топ–10 сайтов.

Мнение эксперта

Обновленный сайт 188bet体育_188bet亚洲体育_点此进入 сделан на?уровне визуальной подачи материала сайтами ведущих университетов мира, а?в?некоторых случаях и?превосходит их.

Арт-директор Func.ru, автор и?преподаватель курса веб-дизайна уровня PRO в?Epic Skills Артем Кудра

В заключение участники экспертного совета и?члены жюри соответствующей номинации составляют свои тройки лидеров, а?три первых места определяются частотой попадания сайтов в??тройки? экспертов. В?2017 году конкурс проходил по?25 номинациям, в?одной из?которых ?Культура, искусство, общество? наш новый сайт и?занял призовое третье место.

А почему не?первое?

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

Мнение эксперта

?

Сайт 188bet体育_188bet亚洲体育_点此进入?— это?проект, во?время которого мы еще раз убедились: чтобы сделать хороший продукт, нужно много исследовать, тщательно проектировать и?обязательно рефлексировать вместе с?клиентом по?поводу вашего взаимодействия... Нам повезло, обе команды, действительно, хотели сделать крутой проект и?выкладывались по?полной.

Коммерческий директор digital-агентства Deasign Russia Алла Хотькина

История конкурса показывает,
что?среди вузовских сайтов только сайты 188bet体育_188bet亚洲体育_点此进入 отмечены наградами.

За исключением веб-ресурсов 188bet体育_188bet亚洲体育_点此进入 ни?один сайт вуза ни?разу не?попал даже в?лонглист конкурса ?Рейтинг Рунета? ни?по?одной из?номинаций (лишь в?этом году сайт Томского политеха вошел в?лонглист, но?в?другой категории). Тот факт, что?наш сайт оказался в?призовой тройке с?таким проектом, как, например, ?Сила света?, который уже успел собрать призы нескольких известных западных конкурсов, метафорически можно описать, как?победу проекта в?духе прет-а-порте на?конкурсе от?кутюр. И?это значит, что?наш сайт обошел многие более креативные работы за?счет других преимуществ?— сложности, технологичности, стилевого единства и?грамотной организации информации.

Благодарности

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

• Алексею Ёжикову, выпускнику 188bet体育_188bet亚洲体育_点此进入, консультанту по?интернет-маркетингу, руководителю проектов в?Российской ассоциации электронных коммуникаций, ведущему эксперту Экспертного совета Института развития интернета, сооснователю Содружества петербургских цифровых агентств, организатору и?члену жюри федеральных и?отраслевых конкурсов сайтов и?мобильных приложений (?Золотой сайт?, ?Золотое приложение?, ?Рейтинг Рунета?, ?Рейтинг Байнета?, Best Law Firm Website и?других)
• Артему Кудре, арт-директору Func.ru, автору и?преподавателю курса веб-дизайна уровня PRO в?Epic Skills
• Елене Огородниковой, руководителю Nimax Interactive, а?также арт-директору, информационному архитектору и?старшему
  проект-менеджеру агентства Nimax
• Ирине Титаренко, руководителю агентства ARTW
• Михаилу Шишкину, эксперту программы повышения конкурентоспособности ведущих российских вузов среди мировых научно-образовательных центров ?5?— 100?, ведущему преподавателю ряда образовательных проектов Школы креативного мышления ИКРа, члену жюри конкурса ?Рейтинг Рунета?, соучредителю школы дизайна Controforma, основателю и?креативному директору агентства Shishki

Мы также будем благодарны всем, кто выскажет свои наблюдения, пожелания и?просто укажет на?ошибки в?этой публикации и?на?сайте в?целом?— пожалуйста, пишите нам на?э-почту: pro@sbpu.ru. Если кто-то захочет сравнить, старый сайт заморожен на?old.spbu.ru.

Постскриптум

До запуска нового сайта мы не?могли проверить его на?адаптивность к?различным устройствам в?сети, так как?он был закрыт от?индексации поисковиков. Но?это стало возможным после запуска.

?

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