---
publishYear: 2024
name: Пушкин ⟨цифровой⟩
title: Дизайн интерфейса коллекции материалов Пушкинского дома
excerpt: Создали интерфейсы научно-просветительского портала, где представлены рукописи и старые издания Пушкина, пушкинистика и справочные материалы.
isNew: true
thumbnail:
src: ~/assets/images/portfolio/cards/itmo.svg
src2: ~/assets/images/portfolio/cards-l/itmo_big.svg
alt: Собака Павлова • Пушкин ⟨цифровой⟩ • Дизайн интерфейса для Пушкинского дома
isDark: true
doubleSize: true
logo:
src: ~/assets/images/portfolio/itmo/logo.svg
alt: Пушкин ⟨цифровой⟩• Логотип
link: https://itmo.ru/
image: ~/assets/images/portfolio/itmo/main.png
imageAlt: Собака Павлова • Пушкин ⟨цифровой⟩ • Дизайн интерфейса для Пушкинского дома
tags:
- ed
- research
- ux-design
- mass
context: |
[Пушкин ⟨цифровой⟩](https://pushkin.digital/) — проект, который открывает читателю доступ к рукописям и прижизненным изданиям всех произведений Пушкина, а также к большому массиву научно-исследовательской и справочной литературы о поэте.
Более 100 лет [Пушкинский Дом (Институт Русской Литературы Российской Академии Наук)](http://pushkinskijdom.ru/) собирает рукописи, прижизненные и посмертные издания Пушкина, его заметки, письма, труды филологов, историков, лингвистов, — всё, что связано с жизнью и творчеством поэта.
Это богатство оставалось доступным только узкому кругу профессионалов. Чтобы изучить архивы, нужно как минимум приехать в Петербург, а доступ к таким ценностям, как рукописи или письма — отдельное бюрократическое приключение.
К 225-летию со дня рождения Пушкина [университет ИТМО](https://itmo.ru/) и [Санкт-Петербургский Федеральный исследовательский центр РАН](https://spcras.ru/) запустили проект по оцифровке и публикации всех архивов Пушкинского Дома и пришли к нам за интерфейсами.
relatedPages:
- text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
[UX-дизайн под ключ](/services/ux-design), как в этом кейсе, и [многое другое](/services).
collection: services
page: ux-design
- text: |
### Хотите уметь так же?
Научим создавать хорошие интерфейсы.
collection: promo
page: mio
- collection: promo
page: uc
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: prozhito
- collection: portfolio
page: math
- collection: portfolio
page: tigitl
- collection: portfolio
page: korochka
- collection: portfolio
page: vuborgskiy-zamok
outcome:
title: Некоторые цифры
numbers:
- title: Передали в разработку
number: "17 разделов портала"
text: "В макетах отдельно описали работу скролла, раскрытие интерактивных элементов на страницах и т.п."
- title: Проработали отображение
number: "27 типов контента"
text: Общий принцип позволяет единообразно отображать разнородные материалы на всех страницах портала.
- title: Создали
number: "4 портрета пользователей"
text: Они помогут разрабатывать будущие разделы портала и проверять, насколько те нужны пользователям.
result:
- src: ~/assets/images/portfolio/figma.svg
text: Покажем из рук в руки и расскажем ещё больше
link: "mailto:we@sobakapav.ru"
budget: 2 800 000 ₽
time: 9 месяцев
review:
text: |
До знакомства с командой «Собаки Павлова» мы долго ломали голову над тем, как выстроить работу. Ведь нам нужно было и собрать экраны для проекта, и всё продумать, и вовлечь в работу студентов и студенток, и сохранить гуманитарную составляющую.
Как только появились коллеги из СП, мы перестали ломать голову, потому что они принесли с собой отличные рабочие практики. Появился общий план, задачи для создания интерфейсов, планёрки с обсуждением всех деталей, удобные документы. Потом Юра Медведик здорово помог нам как проджект, удерживая разные стороны работы проекта.
Но коллеги пришли не только с планами. Алексей Евстифеев вник в проект, помог понять, каким может (и не может) быть интерфейс и понял, в чём особенность нелинейности произведений Пушкина. Юля Груздева создавала в Figma то, что мы вместе обсуждали, а ещё вовремя говорила «вот», и оказывалось, что вся нелинейность может уместиться на экране.
Мы работали с разными разработчиками, а в финале проекта весь дизайн довольно сильно изменился. И сейчас продолжаем дорабатывать интерфейс, но фраза «Это есть в макетах Собаки» — звучит до сих пор. Как бы ни менялся Пушкин <Цифровой> дальше, мы знаем, что цифровую базу этого проекта создали в КБ «Собака Павлова».
photo: ~/assets/images/portfolio/itmo/person.png
person: Полина Колозариди
position: Академический руководитель магистратуры, директор DH-центра, проводница цифровой инфраструктуры и исследований ИТМО
director: |
13 лет мы живём одной идеей: работает то, что создано для людей.
В 2024 году нам повезло: наши практики интерфейсов для людей пришлись как нельзя кстати при реализации проекта Пушкин ⟨цифровой⟩. Участвовать в чем-то настолько масштабном и значимом — немалая честь и огромное удовольствие. И просто круто же.
В том же году мы работали еще над одним большим академическим проектом — [массовой оцифровкой семейных архивов под эгидой «Европейского университета»](/portfolio/prozhito). Так что без лишней скомностью можем сказать, что создали новый стандарт вовлечения в работу с архивами и учёных, и массовой аудитории.
Ну и конечно, удобный интерфейс — наше все:)
metadata:
canonical: https://sobakapav.ru/portfolio/pushkin-digital
title: Дизайн интерфейса коллекции материалов Пушкинского дома (кейс)
description: "Проектируем интерфейсы для представления и работы с научными и просветительскими материалами o Пушкине."
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/itmo/badge.png'
width: 1200
height: 630
type: website
---
import Image from '~/components/common/Image.astro';
import TOC from '~/components/widgets/TOC.astro';
<TOC>
[Бизнес-задача](#anchor1) • [Дизайн-задача](#anchor2) • [Результат](#anchor3) • [Дополнительно](#anchor4) • [Особенности](#anchor5) • [Нюансы](#anchor6) • [Отзыв, цены, сроки](#anchor7)
</TOC>
## <a name="anchor1" />Задача заказчика
Оцифровать коллекции материалов Пушкинского Дома. Сделать цифровой портал для представления и работы с научными и просветительскими материалами.
<a href="/images/portfolio/itmo/1.jpg" target="_blank"></a>
_Фрагмент картотеки Пушкинского дома_
<a href="/images/portfolio/itmo/2.jpg" target="_blank"></a>
_Прижизненное издание «Цыганов»_
## <a name="anchor2" />Дизайн-задача
Создать UX-дизайн интерфейсов для представления и работы с научными и просветительскими материалами o Пушкине.
<div class="daisy-diff aspect-[1440/800] shadow-xl diff-black">
<div class="daisy-diff-item-1">
<img alt="Пушкин ⟨цифровой⟩ • Собака Павлова • Страница произведения"
src="/images/portfolio/itmo/31-1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Пушкин ⟨цифровой⟩ • Собака Павлова • Страница произведения"
src="/images/portfolio/itmo/31.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Страница произведения. <a href="/images/portfolio/itmo/31.png" target="_blank">Макет интерфейса</a>, <a href="/images/portfolio/itmo/31-1.png" target="_blank">реализованная страница на портале</a></em>
## <a name="anchor3" />Результат
1. Провели исследование пользователей. Описали [портреты целевой аудитории](https://www.google.com/url?q=https://docs.google.com/document/d/17ozvUOUimnJMSlK0avmQPKFJWOg67O_U/edit?usp%3Dsharing%26ouid%3D104089307325780586756%26rtpof%3Dtrue%26sd%3Dtrue&sa=D&source=docs&ust=1742948337878101&usg=AOvVaw2qO5FO0STho-PKs2Ce0Cg7) портала, их задачи на портале и сценарии использования.
>Use cases — пользовательские сценарии, сценарии взаимодействия, сценарии использования, пользовательские сценарии — последовательное описание поведения человека при взаимодействии с системой и системы, когда с ней взаимодействует человек. У нас есть [модуль дизайн-задачника «Сценарии взаимодействия»](https://www.eduhund.ru/program/usecases/?utm_source=sobakapav&utm_medium=site&utm_campaign=page) для тех, кто хочет научиться их использовать в дизайне интерфейсов.
2. Вместе с заказчиками придумали общую концепцию портала и проработали его [информационную архитектуру](https://docs.google.com/spreadsheets/d/1igJiG3_v_c3EbErAGEhUO7jxIZkz4MGX/edit?usp=sharing&ouid=104089307325780586756&rtpof=true&sd=true).
3. Определили и зафиксировали MVP-версию для первого публичного запуска. Часть разделов системы, такие как таймлайн жизни Пушкина, описали концептуально и отложили на потом, остальные взяли в работу.
4. Сделали UX-дизайн для десктопной и мобильной версий интерфейсов портала.
5. Передали заказчикам [библиотеку компонентов](www.figma.com/design/pVU2zEvxMuJoGgbhhYRM7x/Push-Design-(General)?node-id%3D5710-141680&sa=D&source=docs&ust=1742948337871297&usg=AOvVaw2NDl6aXXa1qeLgG8zNu8_A) для последующей адаптации графическими и UI-дизайнерами и использования в разработке.
<a href="/images/portfolio/itmo/3.png" target="_blank"></a>
_Рубрикатор произведений. Макет интерфейса_
<a href="/images/portfolio/itmo/3-1.png" target="_blank"></a>
_Рубрикатор произведений. В UI на портале_
Пушкин ⟨цифровой⟩ – это не коллекция текстов из учебника. Это семантическое издание. Согласно определению Бориса Орехова, доцента школы лингвистики НИУ ВШЭ, «семантическое издание — это представление текста в виде связанных данных».
<a href="/images/portfolio/itmo/6.png" target="_blank"></a>
_Рукопись «Скупого рыцаря». Экран по умолчанию_
<a href="/images/portfolio/itmo/8.png" target="_blank"></a>
_Рукопись «Скупого рыцаря». Раскрыто оглавление и контекст_
Чтобы показать сложность Пушкина, и дать возможность каждому стать исследователем, потребовались сложная архитектура и нестандартные интерфейсные решения. Мы сделали:
1. Каталог произведений Пушкина, в том числе:
- Рубрикатор произведений по разделам, выделенным пушкинистами за долгие годы труда.
- Поиск по произведениям, фильтрацию, навигацию по времени и по алфавиту (как дань уважения традициям Пушкинского Дома).
- Раздел «Письма», группирующий переписку по людям и по времени.
<a href="/images/portfolio/itmo/4.png" target="_blank"></a>
_Поисковая выдача_
<a href="/images/portfolio/itmo/5-1.png" target="_blank"></a>
_Раздел «Письма». Письма сгруппированы по персоналиям_
2. Раздел «Произведение», который представляет текст Пушкина как комплекс связанных данных, включающих:
- Привычный текст произведения «из учебника».
- Рукописи Пушкина. Для этого потребовалось разработать специальный PDF-вьюер, удовлетворяющий как задачам учёных, так и простых читателей.
- Редакции, показывающие как менялся текст на разных этапах работы над ним.
- Печатные издания.
- Страницу для показа атрибутов, присвоенных произведению, изданию или каждому листу рукописей академическими исследователями.
- Научные комментарии академиков, как ко всему произведению, так и к какой-либо строфе, строке, а иногда и конкретному слову.
- Корреляты: материалы, в которых упоминается произведение.
- Библиографию работ по этому произведению, с функциями поиска и экспорта, столь ценными для учёных, оформляющих ссылки в своих статьях по ГОСТу.
- Просветительские материалы, специально разработанные для портала.
<a href="/images/portfolio/itmo/11.png" target="_blank"></a>
_Аттрибуты_
<a href="/images/portfolio/itmo/13.png" target="_blank"></a>
_Корреляты_
3. Раздел «Экскурсы» с просветительскими материалами, которые рассказывают о контексте создания произведения и его особенностях:
- Биографические комментарии, которые описывают отразившиеся в произведении события жизни поэта.
- Культурный контекст: повлиявшие на произведение исторические события и культурные явления.
- Комментарии филологов к поэтике, раскрывающие средства выразительности.
- Карту просветительских материалов и комментариев.
- Шаблоны для лонгридов, посвященных значимым персоналиям и местам, связанным с Пушкином.
<a href="/images/portfolio/itmo/15.png" target="_blank"></a>
_Раздел «Экскурсы». Разводящая страница_
<a href="/images/portfolio/itmo/16.png" target="_blank"></a>
_Раздел «Экскурсы». Попап_
<a href="/images/portfolio/itmo/19.png" target="_blank"></a>
_Шаблон лонгрида_
4. Глоссарий для пояснения академических терминов.
5. Раздел «О проекте», рассказывающий о его организации, миссии и ценностях, участниках и планах развития.
Все разделы проработали в десктопной и мобильной версиях.
## <a name="anchor4" /> Дополнительная польза
### Дизайн продукта
Над проектом работали:
- филологи из Пушкинского Дома
- специалисты по Цифровым Гуманитарным проектам из ИТМО
- специалисты по базам данных из Академии Наук, делающие back-end
- разработчики из IT-агентства, делающие front-end
- дизайнеры из команды бренда, разрабатывающая цвета, шрифты и визуальные элементы
- отдел PR, организующий мероприятия и пишущий тексты о проекте
- мы, делающие информационную архитектуру и UX-дизайн портала
Интерфейс – то место, где разные команды встречаются и на экране, а не на словах, видят противоречия. Пока обсуждается концепция, каждый участник представляет что-то своё. Когда появляется картинка – приходится договариваться.
<a href="/images/portfolio/itmo/28.jpg" target="_blank"></a>
<a href="/images/portfolio/itmo/29.jpg" target="_blank"></a>
_Дизайн интерфейса рождается в споре_
Первые полгода работы над проектом Собака Павлова много участвовала в дизайне продукта: мы модерировали обсуждения концептов, стараясь понять и реализовать в интерфейсе запросы всех команд. Инициировали исследования, воркшопы и консультации, пока все команды не согласились, что предмет обсуждения обрёл форму.
<a href="/images/portfolio/itmo/21.jpg" target="_blank"></a>
<a href="/images/portfolio/itmo/23.jpg" target="_blank"></a>
_Проектируем на бумаге_
В ходе этой работы мы ходили в архивы Пушкинского Дома, придумывали концептуальные метафоры, строили карты, брали интервью и даже собирали многослойные экраны из стекла и бумаги на столе.
<a href="/images/portfolio/itmo/20.jpg" target="_blank"></a>
_Проектируем на стекле и под стеклом_
### Образование
Вели практику междисциплинарной гильдии студентов нескольких университетов (ИТМО, УрФУ). Ходили с ними в Пушкинский дом интервьюировали пушкинистов и изучали организацию архива. Придумывали концепции для разделов интерфейса. Проводили исследования публик и тестирования макетов портала.
<a href="/images/portfolio/itmo/25.jpg" target="_blank"></a>
_Студенты_
## <a name="anchor5" /> Особенности
### Некоммерческий проект
Пушкин ⟨цифровой⟩ – проект некоммерческий. Для бизнеса конечная ценность – прибыль. Если проект не окупит себя – он закроется. Нам не нужно было продавать Пушкина, это уже сделали за нас: «Пушкин» – главное слово 2024-го года.
В нашем случае критерии выживания иные:
1. Финансирование проекта – целевое: в первую очередь нужно представить данные, с сохранением полноты и многообразия связей, определённых академиками за последние столетия;
2. Материалы должны быть доступны разным людям: академикам от мира литературы, отраслевым профессионалам (экскурсоводам, учителям, историкам, режиссёрам…), простым любителям Пушкина. Каждый должен получить нужную глубину, никто не должен подумать что вошел не в ту дверь.
3. Цифровые Гуманитарные проекты живут, пока вызывают интерес. Для этого мало просто выложить в интернет всего Пушкина: нужно продумать стратегию развития проекта на годы вперёд и учесть эти перспективы в интерфейсе.
### Интерфейс, объединяющий людей
Помимо простых читателей, особую роль играют посредники: те, кто используют труды Пушкина в своей работе, создавая авторские материалы для своих аудиторий.
Например:
- экскурсовод, готовящий маршрут по пушкинским местам в родном городе;
- библиотекарь, который готовит выставку;
- историк, специализирующийся на Золотом Веке;
- журналист, который пишет про литературу;
- преподаватель литературы школы или ВУЗа.
<a href="/images/portfolio/itmo/26.jpg" target="_blank"></a>
_Проводим юзабилити-тестирование прототипов интерфейса с профессионалами из разных сфер_
Пушкин ⟨цифровой⟩ для них – источник уникальной информации для создания собственных материалов. Вместе с коллегами по ИТМО и студентами мы изучали цели и задачи таких людей, чтобы они могли решать их на портале. Одна из перспектив проекта – стать не только источником, но и витриной для подобных работ, связанных с Пушкином и Золотым веком.
<a href="/images/portfolio/itmo/14.png" target="_blank"></a>
_Библиография_
### Работа с академиками
Сохранить академическую точность, вынося Пушкина из научных архивов на всеобщее обозрение – непростая задача.
Учёные годами вырабатывали особые способы расшифровки рукописей, разметки редакций и вариантов, именования элементов. Итог их работы больше напоминает ноты: чтению такого текста нужно учиться специально. Нарисовать для него интерфейс – особое искусство.
<a href="/images/portfolio/itmo/10.png" target="_blank"></a>
_Вот так это выглядит. Редакции и варианты_
Термины – другая сложность. С точки зрения академической науки, не может быть такого раздела каталога как «Сказки». Правильно – «Фикциональная проза». Мы организовали фокус-группу с преподавателями, библиотекарями, историками и другими профессионалами. Ни один из них не смог найти «сказки» иначе как методом исключения, и это убедило академиков. Однако сложных терминов на страницах ещё много.
Мы строили пути пользователя по интерфейсу таким образом, чтобы понятные каждому блоки встречались первыми, а требующие кандидатской степени – оставались доступными, но не отпугивали родителей, пришедших почитать детям сказку перед сном.
<a href="/images/portfolio/itmo/17.png" target="_blank"></a>
_Комментарий к произведению в «Экскурсах»_
<a href="/images/portfolio/itmo/18.png" target="_blank"></a>
_Карта комментариев к произведению в «Экскурсах»_
### Логика организации материала
Семантическое издание предполагает демонстрацию не только текста, но и всех связанных с ним данных. Задача со звёздочкой – придумать информационную архитектуру и навигацию, которые с одной стороны – позволяли бы любому пользователю сориентироваться на портале, а с другой – соответствовали бы требованиям академиков.
Для примера рассмотрим организацию раздела «Произведение». Когда человек только попадает на страницу – он видит текст. Тот самый, который знаком нам по учебнику. Акцентная кнопка раскрывает «Контекст»: все материалы, с этим произведением связанные.
Материалы, относящиеся ко времени создания произведения – рукописи, редакции, первые печатные издания – расположены слева. Они – источники текста, который нам знаком. Справа расположены интерпретации: материалы, созданные на основе этого текста: комментарии, библиография, экскурсы, корреляты. Такая организация отражает восприятие времени в нашей культуре: таймлайны как правило организованы слева направо.
<div class="daisy-diff aspect-[1440/800] shadow-xl diff-black">
<div class="daisy-diff-item-1">
<img alt="Пушкин ⟨цифровой⟩ • Собака Павлова • Страница произведения"
src="/images/portfolio/itmo/9-1.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Пушкин ⟨цифровой⟩ • Собака Павлова • Страница произведения"
src="/images/portfolio/itmo/9.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Страница произведения с раскрытым контекстом. <a href="/images/portfolio/itmo/9.png" target="_blank">Макет интерфейса</a>, <a href="/images/portfolio/itmo/9-1.png" target="_blank">реализованная страница на портале</a></em>
Мы прорабатывали таким образом каждый раздел.
## <a name="anchor6" /> Нюансы процесса
Особое внимание уделялось визуальным метафорам, цветам, формам. Заказчики хотели учесть и эстетику Золотого Века, и историю издания Пушкина, и особенности цифрового представления архивных данных.
Например, немало времени ушло на основную визуальную метафору со скобками, как в слове ⟨цифровой⟩ или вокруг кнопки ⟨контекст⟩: скобки символизируют цифровую трансформацию, при которой объект открывается большему числу людей, но при этом неизбежно что-то утрачивает, оставляет за скобками цифровизации.
Цвета, шрифты и прочий UI были настолько же важны и требовали большого ресурса на обсуждение. Эту часть работы забрала отдельная команда заказчика, с которой мы работали в плотной связке. Мы строили, коллеги – красили. Их решения в свою очередь отражались на нашей работе: метафора со скобками отражается в композиции экрана и навигации.
<div class="daisy-diff aspect-[1440/930] shadow-xl diff-black">
<div class="daisy-diff-item-1">
<img alt="Пушкин ⟨цифровой⟩ • Собака Павлова • Научные комментарии"
src="/images/portfolio/itmo/12-1.jpeg" style="margin-top: 0;" />
</div>
<div class="daisy-diff-item-2">
<img alt="Пушкин ⟨цифровой⟩ • Собака Павлова • Научные комментарии"
src="/images/portfolio/itmo/12.png" style="margin-top: 0;" />
</div>
<div class="daisy-diff-resizer"></div>
</div>
<em>Научные комментарии. <a href="/images/portfolio/itmo/12.png" target="_blank">Макет интерфейса</a>, <a href="/images/portfolio/itmo/12-1.jpeg" target="_blank">в UI на портале</a></em>
В работе с таким объектом как «Пушкин» много нюансов. За каноничным, сформированным советской школой, академической традицией, фольклором и анекдотами образом Пушкина сложно увидеть человека.
Научные архивы затем и нужны, чтобы отделять зёрна фактов от слухов и легенд.
## <a name="anchor7" />