В отличие от печатных изданий документов, дизайн электронной документальной публикации фокусируется на функциональности, интерактивности и оптимизации для мобильных устройств и настольных компьютеров. Оптимальный дизайн электронной документальной публикации повышает читабельность и визуальную привлекательность контента <363>.

--------------------------------

<363> Подробнее см. подраздел 4.3 Методических рекомендаций по созданию и развитию официальных сайтов и официальных страниц органов управления архивным делом, государственных и муниципальных архивов Российской Федерации; Рекомендации по созданию Интернет-выставок архивных документов. С. 12 - 16.

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

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

Например:

в дизайне интернет-проекта "1939 год. От "умиротворения" к войне" использованы фото-, аудио- и видеодокументы;

Рис. 47. Фрагмент страницы интернет-проекта "1939 год. От "умиротворения" к войне" на сайте Российского исторического общества

использование рисунков и художественных произведений представлено в дизайне виртуальной выставки на сайте Росархива "Крым в истории России" <364>;

--------------------------------

<364> URL: https://krym.rusarchives.ru/ (дата обращения: 26.11.2025).

Рис. 48. Фрагмент страницы виртуальной выставки "Крым в истории России" на сайте Росархива

художественное оформление с использованием графических изображений реализовано в виртуальной выставке ЦГА СПб "Городские имена сегодня и вчера: петербургская топонимия в архивных документах" <365>.

--------------------------------

<365> URL: https://spbarchives.ru/toponimika2023?ysclid=lpgiegpjq5777024420 (дата обращения: 26.11.2025).

Рис. 49. Фрагмент страницы виртуальной выставки "Городские имена сегодня и вчера: петербургская топонимия в архивных документах" ЦГА СПб

Иллюстрации и иные элементы художественного оформления могут создаваться также непосредственно для конкретного проекта или для серии проектов.

Для быстрой загрузки сайта (не более 2 сек.) необходимо оптимизировать используемые на сайте графические изображения, следуя рекомендациям:

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

- следует правильно подбирать сочетания цветности/размера/качества/объема изображения;

- желательно не использовать изображения, превышающие по размеру 200 Кб;

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

- не следует использовать на сайте мерцающие или часто меняющиеся элементы текста и графики.

Оформительская графика должна занимать не более 10 - 15% общей площади страницы, также допустимо не использовать ее вообще.

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

Например:

использование уменьшенных изображений документов с максимальной степенью сжатия в виртуальной выставке ЦГА СПб "Городские имена сегодня и вчера: петербургская топонимия в архивных документах" <366>;

--------------------------------

<366> URL: https://spbarchives.ru/toponimika2023-2 (дата обращения: 26.11.2025).

Рис. 50. Фрагмент страницы виртуальной выставки "Городские имена сегодня и вчера: петербургская топонимия в архивных документах" ЦГА СПб

пример размещения уменьшенных копий (превью) в виде таблицы представлен в Государственном реестре уникальных документов Архивного фонда Российской Федерации <367>.

--------------------------------

<367> URL: https://unikdoc.rusarchives.ru/klyuchevye-slova/evangelie?ysclid=mi2yvncki7876604060 (дата обращения: 26.11.2025).

Рис. 51. Фрагмент страницы Государственного реестра уникальных документов Архивного фонда Российской Федерации на сайте Росархива

При этом рекомендуется снабдить каждое изображение, используемое в проекте, так называемыми всплывающими подписями, появляющимися при наведении курсора на изображение, если они не мешают восприятию документа.

Например:

всплывающая надпись архивного шифра документа реализована в интернет-проекте "Накануне Великой Отечественной. 1 сентября 1939 - 22 июня 1941" <368>;

--------------------------------

<368> URL: https://nakanune.rusarchives.ru/ru/soobschenie-narkoma-vnutrennikh-del-sssr-lp-berii-iv-stalinu-o-bombardirovkakh-germanskoy-aviaciey (дата обращения: 26.11.2025).

Рис. 52. Фрагмент страницы интернет-проекта "Накануне Великой Отечественной. 1 сентября 1939 - 22 июня 1941" на сайте Росархива

всплывающие надписи заголовков документов применяются в проекте Института систем информатики Сибирского отделения РАН "Электронный архив академика Андрея Петровича Ершова" <369>.

--------------------------------

<369> URL: https://ershov.iis.nsk.su/ru/ershov/awards (дата обращения: 26.11.2025).

Рис. 53. Фрагмент страницы проекта "Электронный архив академика Андрея Петровича Ершова" Института систем информатики Сибирского отделения РАН

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

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

Например, единый дизайн интернет-проектов Российского исторического общества <370>:

--------------------------------

<370> URL: https://historyrussia.org/proekty.html (дата обращения: 26.11.2025).

Рис. 54. Примеры дизайна страниц интернет-проектов Российского исторического общества

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

Например:

в интернет-проекте на сайте Росархива "Великая Отечественная война. 22 июня 1941 - 19 ноября 1942" <371> пиктограммы для обозначения фонодокумента представлены в виде мегафона;

--------------------------------

<371> URL: https://1941-1942.rusarchives.ru/index.php/ru/perechen-dokumentov (дата обращения: 26.11.2025).

Рис. 55. Фрагмент страницы интернет-проекта "Великая Отечественная война. 22 июня 1941 - 19 ноября 1942" на сайте Росархива

в интернет-проекте на сайте Росархива "Хабаровский процесс над японскими военными преступниками 1949 г." <372> пиктограммы для обозначения фонодокумента представлены в виде микрофона;

--------------------------------

<372> URL: https://khabarovsk1949.rusarchives.ru/khabarovskiy-process?page=4 (дата обращения: 26.11.2025).

Рис. 56. Фрагмент страницы интернет-проекта "Хабаровский процесс над японскими военными преступниками 1949 г." на сайте Росархива

в этом же проекте "Хабаровский процесс над японскими военными преступниками 1949 г." <373> используются пиктограммы для гиперссылок на кино-, видеодокументы.

--------------------------------

<373> URL: https://khabarovsk1949.rusarchives.ru/posle-processa?page=6 (дата обращения: 26.11.2025).

Рис. 57. Фрагмент страницы интернет-проекта "Хабаровский процесс над японскими военными преступниками 1949 г." на сайте Росархива

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

Например, пиктограммы в виде значка pdf-документа с функционалом скачивания использованы в виртуальной выставке на портале "Архивы Санкт-Петербурга" "80 фактов о блокаде Ленинграда" <374>.

--------------------------------

<374> URL: https://spbarchives.ru/80facts (дата обращения: 26.11.2025).

Рис. 58. Фрагмент страницы виртуальной выставки "80 фактов о блокаде Ленинграда" на портале "Архивы Санкт-Петербурга"

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

Например, мобильная и компьютерная версии интернет-проекта на сайте Росархива "Великая Отечественная война. 22 июня 1941 - 19 ноября 1942" <375>:

--------------------------------

<375> URL: https://1941-1942.rusarchives.ru/ (дата обращения: 26.11.2025).

Рис. 59. Фрагменты страниц интернет-проекта "Великая Отечественная война. 22 июня 1941 - 19 ноября 1942" на сайте Росархива

Грамотный дизайн повышает визуальную привлекательность и функциональную эффективность проекта.

Процесс дизайна включает:

- разработку концепции дизайна электронной документальной публикации, которая отражает цели и содержание проекта;

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

- разработку дизайна знаков, диаграмм, сопутствующих иллюстраций, таблиц и др.;

- поиск новых и управление существующими изображениями;

- согласование с авторами проекта;

- экспорт изображений архивных документов в требуемых форматах, обычно для печати и цифровых версий;

- управление проектом и художественное руководство проектом.

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

При выборе программного обеспечения для создания электронной публикации рекомендуется ориентировать на отечественное программное обеспечение, включенное в официальный реестр <376>.

--------------------------------

<376> URL: https://reestr.digital.gov.ru/ (дата обращения: 26.11.2025).