Роль
UX/UI дизайнер
Формат
Командный проект
Дата
2024 - 2026
Инструменты
Figma, Tilda
Digital Law Lab
Сайт исследовательского центра на стыке права и технологий
Спроектировал сайт исследовательского центра Digital Law Lab, уделив особое внимание оформлению объёмных экспертных публикаций. Основной задачей было создать удобную систему для чтения, навигации по разделам и работы с научными источниками.
// 01. Контекст
Digital Law Lab исследует цифровое право и связанные с ним технологии: LegalTech, Legal Design, искусственный интеллект и регулирование цифровой среды.
На сайте представлены публикации, подкасты, экспертная сеть, проекты и новости лаборатории.
Главная содержательная часть сайта — исследования. Это объёмные материалы с подробным анализом, выдержками из нормативных актов, авторскими комментариями и научными ссылками.
Для таких публикаций недостаточно просто аккуратно оформить текст. Необходимо создать интерфейс, который помогает ориентироваться в структуре исследования и работать с источниками.
Сайт
// Мой вклад
В рамках командного проекта я отвечал за информационную архитектуру сайта, проектирование интерфейса публикаций, навигацию по длинным исследованиям и визуальную систему страниц. Также участвовал в реализации сайта на Tilda.
// 02. Задача
Как сделать сложные исследования удобными для чтения?
Юридические публикации могут включать десятки разделов, нормативные документы, таблицы, сотни сносок и библиографию.
Пользователи взаимодействуют с такими материалами по-разному: одни читают исследование последовательно, другие ищут конкретное положение закона или проверяют источник.
Мне нужно было создать интерфейс, который позволит:
  • комфортно читать длинные тексты;
  • быстро переходить к нужным разделам;
  • различать нормативный текст, комментарии и дополнительные материалы;
  • обращаться к источникам, не теряя контекст чтения;
  • использовать знакомые принципы навигации в публикациях разной структуры.
Основная задача — сделать сложный контент удобным для изучения, сохранив его полноту и научную структуру.
// 03. Два формата исследований
Чтобы показать, как система работает с разным контентом, рассмотрю две публикации Digital Law Lab.
Что объединяет эти материалы?
Первый материал предполагает адресный поиск по статьям закона, второй — последовательное чтение с обращениями к источникам.
Мне нужно было учесть особенности обоих сценариев и сохранить единую логику взаимодействия с контентом.
The Artificial Intelligence Act of South Korea
Постатейный юридический комментарий
Материал представляет собой подробный анализ закона Южной Кореи об искусственном интеллекте.
Он включает 43 статьи, каждая из которых сопровождается текстом нормативного положения и авторским комментарием.
Основной сценарий здесь — быстрый поиск конкретной статьи закона.
Пользователю не обязательно читать материал от начала до конца. Его может интересовать отдельное положение — например, требования к операторам ИИ, оценка рисков или ответственность.
Поэтому на первый план выходит навигация по всем статьям закона с возможностью сразу перейти к нужному фрагменту.
Посмотреть публикацию
The EU KIDS Act
Аналитическое исследование с научным аппаратом
Этот материал имеет другую структуру: 11 тематических разделов, а также отдельные блоки Notes и References.
Исследование включает 187 пронумерованных примечаний со ссылками на законодательство, судебную практику и экспертные материалы.
Здесь пользователь не только перемещается по главам, но и изучает аргументацию автора, обращается к сноскам и проверяет первоисточники.
Поэтому интерфейс должен поддерживать последовательное чтение и удобную работу со ссылками, не перегружая страницу дополнительной информацией.
Посмотреть публикацию
// 04. Навигация по публикациям
Два формата оглавления для разных типов контента
Для длинных исследований предусмотрел навигацию по якорным ссылкам, позволяющую переходить к нужному разделу без длительной прокрутки страницы.
В исследовании закона Южной Кореи оглавление раскрывается поверх страницы в виде широкой многостолбцовой панели.
Такой формат позволяет одновременно показать все 43 статьи и быстро найти интересующее положение.
В The EU KIDS Act навигация организована в виде боковой панели. В ней перечислены 11 основных разделов, а также Notes и References.
Это помогает читателю переходить как между тематическими главами, так и к справочным материалам.
В результате пользователь может выбрать удобный сценарий: читать исследование последовательно или сразу переходить к нужной информации.
// 05. Работа со ссылками, сносками и источниками
Источники доступны без потери контекста
В юридических исследованиях ссылки и сноски — важная часть содержания. Они позволяют проверить утверждение автора и обратиться к первоисточнику.
В The EU KIDS Act ссылки на примечания обозначены красными надстрочными номерами внутри текста.
При взаимодействии с номером появляется небольшая белая всплывающая карточка с библиографическим описанием источника.
Благодаря этому читатель может ознакомиться с примечанием, не переходя в конец длинной публикации и не теряя место чтения.
При необходимости пользователь также может открыть отдельные разделы Notes и References через оглавление.
Такой подход сохраняет связь между основным текстом и научным аппаратом, не перегружая страницу постоянным отображением примечаний.
// 08. Результат
В результате была создана контентная платформа для публикации и изучения объёмных юридических исследований.
В интерфейсе реализованы:
  • навигация по разделам с якорными переходами;
  • разные форматы оглавления для разных структур публикаций;
  • всплывающие сноски с описанием источников;
  • оформление нормативных текстов, комментариев и таблиц;
  • единая визуальная система для исследовательских и информационных материалов.
На примере двух публикаций видно, как сайт представляет разные форматы контента: постатейный комментарий из 43 разделов и аналитическое исследование с 11 главами и 187 примечаниями.
// 06. Типографика и структура текста
Визуальная иерархия для большого объёма информации
В длинных публикациях типографика помогает не только читать, но и ориентироваться в содержании.
Для страниц исследований я использовал модульную сетку и чёткую иерархию элементов: заголовков, основного текста, нумерации разделов и комментариев.
На широких экранах название раздела и его содержание могут располагаться в соседних колонках. Это визуально разделяет структуру документа и основной текст.
Для дополнительных материалов, включая таблицы, предусмотрено согласованное оформление с тонкими разделителями и акцентом на читаемость.
В результате разные типы информации объединяются в одну систему, не теряя собственной структуры.
// 07. Остальные разделы сайта
Помимо публикаций, в рамках проекта я работал над другими разделами Digital Law Lab.
Главная страница знакомит посетителей с исследовательским центром, его направлениями и деятельностью.
На сайте также представлены экспертная сеть, подкасты, новости лаборатории и LegalTech Map — карта компаний и проектов технологической экосистемы Азербайджана.
Несмотря на различия в содержании, разделы объединены общей сеткой, типографикой и визуальными принципами.
Это позволяет сайту сохранять целостность и при работе с длинными исследованиями, и при представлении более компактного контента.
// Вывод
Этот проект показал мне, насколько важна информационная архитектура при работе с объёмными экспертными материалами.
Задача дизайнера здесь — не просто оформить длинный текст, а продумать, как пользователь будет читать его, находить нужные разделы и взаимодействовать с источниками.
Главным результатом моей работы стала система, которая помогает представлять сложную информацию в понятной и последовательной форме.
Made on
Tilda