Оформление статьи
Эта лекция посвящена иллюстрации как ключевому структурному элементу текста, создающему ритм чтения и облегчающему навигацию.
Иллюстрация — это такая же часть структуры статьи, как и сам текст. Ритм чтения создают не только заголовки, сноски и абзацы, но и разноплановые иллюстрации, которые так же поддерживают ритм повествования и помогают читателю ориентироваться в частях текста.
Виды иллюстраций по их месту в структуре
Типология иллюстраций по их значению в структуре, изначально разработанная для книжного дела, эффективно применяется и в цифровой среде, хотя и имеет свои ограничения. При работе с веб-сайтами важно помнить, что платформа размещения иллюстраций сама по себе является структурообразующим элементом, поэтому подход к их использованию должен учитывать особенности формата, будь то веб-страница или книжный лист.
Обложка (Титульная иллюстрация) Это ключевой элемент, отражающий суть и основное содержание произведения, будь то печатное издание или цифровой ресурс. Её задача — мгновенно передать потенциальному читателю или пользователю главную идею и настроение.
Обложка может помещаться как на общую/заглавную страницу сайта, так и быть вступительной (титульной) иллюстрацией в тексте.
Perito, Анастасия Лобова
Полосные и полуполосные иллюстрации Полосные иллюстрации размещаются во всю ширину полосы (страницы) и по этой причине выделяются крупным размером. Этот формат считается наиболее самодостаточным. В таких иллюстрациях помещается больше деталей, поэтому чаще всего на них изображаются ключевые события или идеи текста, так как предполагается, что читатель задерживает своё внимание на этом элементе.
Полуполосные, в свою очередь занимают часть страницы, но остаются значимым элементом оформления.
Perito, Анастасия Лобова
Заставки и концовки Это визуальные элементы, которые помещаются в начале или конце раздела. Функционально данный тип иллюстраций не только структурирует контент, но и эмоционально настраивает на восприятие следующего материала, задавая тон и погружая в атмосферу повествования.
«„Предоплату не вернули“: 6 историй о недостоверных отзывах при аренде жилья», Калимба Делунова
Оборочные иллюстрации Это иллюстрации небольшого формата, помещаемые рядом с текстом и/или окруженные текстовым блоком. В отличие от заставок, они не разграничивают блоки текста, а сопровождают их, дополняя содержание.
The Blueprint, Анастасия Крайнюк
Виды иллюстраций по их функции
Помимо структурной роли, иллюстрации выполняют и различные функциональные задачи, помогая читателю взаимодействовать с информацией на разных уровнях:
Навигация Эти иллюстрации помогают читателю ориентироваться в тексте. Они могут означать конец смыслового блока или создавать связь между разделами
Эмоциональная атмосфера Иллюстрации могут создавать определенное настроение или эмоциональный фон для текста.
Нарратив Эти иллюстрации участвуют в повествовании, дополняя или развивая сюжетную линию текста. Они могут изображать персонажей, сцены или ключевые моменты, углубляя погружение читателя в историю.
Инфографика Это особый вид иллюстраций, который представляет сложную информацию в наглядной и легкоусвояемой форме. Диаграммы, графики, схемы и карты данных — всё это инфографика, призванная сделать данные понятными и интересными.
Декоративность Декоративные иллюстрации часто используются как часть общего дизайн-решения, украшают страницу, чтобы поддержать цельный визуальный образ.
Правильно выстроенный ритм иллюстрирования — это ключ к удержанию внимания читателя. Он позволяет избежать монотонности и поддерживает интерес к чтению. Чередование крупных и мелких иллюстраций, их расположение относительно текста, а также функциональное разнообразие создают динамичную структуру.
Размещение иллюстрации
В начале раздела или главы: Иллюстрации-заставки и титульные иллюстрации идеально подходят для обозначения начала новых смысловых блоков, подготавливая читателя к новой информации.
Рядом с описываемым объектом: Для оборочных иллюстраций или изображений, поясняющих конкретный элемент текста, важно размещать их максимально близко к соответствующему фрагменту. Это облегчает восприятие и исключает необходимость искать связь между текстом и изображением.
В местах, где нужно создать эмоциональную паузу или усилить впечатление: Эмоциональные иллюстрации могут быть размещены в ключевых точках повествования, чтобы усилить воздействие на читателя или дать ему возможность осмыслить прочитанное.
На отдельных полосах, между абзацами: Подходит для разделения абзацев, глав, тем, служит обозначением нового смыслового блока или его конца.
План по созданию ритмического рисунка статьи
Шаг 1: Определение «точек для иллюстрации». Опираясь на выбранные ранее отрывки текста, подумайте о функциях, которые должна выполнить соответствующая им иллюстрация.
Шаг 2: Создание раскадровки. Нарисовать очень упрощенную схему всего материала (прямоугольники страниц) и набросать, где и какого размера будут иллюстрации. Это поможет увидеть ритм в целом.
Шаг 3: Создание структуры. На основе раскадровки и иерархии идей определить тип иллюстрации (титул, заставка, полосная и т. д.).
Шаг 4: Разработка эскизов. Создание эскизов уже с учётом композиции и взаимодействия с будущим текстом.
Шаг 5(опционально): Декоративное дополнение. Выделить место для декоративных иллюстраций (иконок, разделителей, анимаций)
Задание 3 Разработка иллюстративного плана статьи
Создайте набросок-план для оформления выбранной статьи. Пользуясь знаниями о взаимодействии иллюстрации и текста, соберите схематичную раскадровку с блоками, отражающими формат планируемых иллюстраций: титульные, полосные и т. д. Постарайтесь аргументировать свой выбор, чтобы отслеживать логику расположения элементов. Следите за ритмом размещения изображений, чтобы избежать неравномерного распределения контента на странице.
Чтобы работать над планом офорления было проще, создайте предварительно проект на платформе mediiia и перенесите текст статьи, используя её инструменты.
Требования к выполнению задания: В результате должен получиться набросок длинного формата, отражающий полностью развернутую веб-страницу статьи, на котором схематично отражено положение текста и блоков изображений.
