Универсальные Правила Иллюстрации в Статьях
Правила иллюстрации, которые помогут избежать популярных ошибок и улучшить иллюстрацию.
Универсальные правила иллюстрации 1
За годы опыта, наблюдений, ошибок своих и чужих, на основе всего этого я сформировал правила иллюстрирования. Это те правила, которые повысят качество иллюстрации и помогут избегать популярных ошибок новичков. Правила и советы от банальных до менее банальных. Так что без долгого вступления, погнали!
🔻1. Демонстрируй изображение во всей красе, во всю ширину текстовой колонки
Создай красочную иллюстрацию, которая полностью заполняет ширину текстового блока. Иллюстрация — это визуальное средство, и она должна выглядеть впечатляюще.
Как пример. В качесве иллсютрации используется фото группы. когда фото по всей ширине текстового блока это выглядит гармонично и устойсчиво с точки зрения композции, а когда изображение не выравнино по ширине текстового блока, то неустойчиво, да и иллюстрацию плохо видно. не рассматреть к чему ты так с вельветками?
Итог. Делай иллюстрацию по всей ширине текстового блока.
🔻2. Показывай иллюстрацию «До» и «После»
Если хочешь показать, как было и как стало, лучший прием — выстроить два кадра в ряд. Не просто «было — стало», а чтобы разница била в глаза, как контраст между бардаком и стерильным порядком. Сюда же я отнесу и схему «правильно — неправильно». Логика тут та же, только вместо хронологии — оценочное суждение.
Пример. Если это курс по рисованию, то самое лучшее — это показать результат, чего ученик достиг, показать результат наглядно. А лучше всего в этом поможет иллюстрация, как ученик рисовал до курса и после его окончания.
Итог. Если есть возможность проиллюстрировать разницу между «До» и «После» — делай. То же самое касается и прямого примера, и его антипримера, как надо и не надо.
🔻3. Используй единую стилистику
Старайся вести все иллюстрации в единой стилистике. Понимаю, что не всегда это выходит технически, но если удается — это серьезный плюс к визуальному качеству. Когда все картинки сделаны в одной стилистики — будь то схожая цветовая палитра, один и тот же шрифт для подписей или однотипная графика — иллюстрации перестают быть просто набором отдельных изображений. Вместо этого всё собирается в общий визуальный ряд, который работает как цельное оформление, а не как случайный набор слайдов.
Как видно на моем примере выше, все иллюстрации в единой стилистике, хотя темы разные, но дизайн один — шрифт, цвета белый, оранжевый и черный, единый размер квадрата, схожий дизайн графических элементов.
Итог. Старайся соблюдать единую стилистику иллюстраций, это добавит баллов к качеству.
🔻4. Не лепи текст в иллюстрацию
Не лепи текст на изображение. Очень частая проблема, когда есть изображение и нужно куда-то поместить текст, и дизайнеры начинают исхищряться: затемнить фон, найти на изображении пустое место, где можно впендюрить текст, следить, чтоб текст не залез на глаз, лицо или еще что. Но делая так, ты обречен на вечные танцы текста и картинки. Если изображение затемнять, оно станет хуже — его информационная ценность падает, как и контрастность текста, что напрямую влияет на читаемость. Поэтому лучшее решение — сделать так, чтобы текст и изображение были отдельно друг от друга.
Как пример. Я поместил изображение отдельно — текст отдельно. И все хорошо читается: и изображение, и текст. А в анти-примере текст заезжает на фото, глаза, и также изображение теряет свою насыщенность. Да и в целом выглядит хуже, хотя не так очевидно, потому что у меня еще удачно вышло подружить изображение с текстом — бывают куда более и более плохие примеры.
Итог. Не лепи текст в изображение, изображение — отдельно, текст — отдельно. Всё! Текст за пределами фото, а не на нём.
🔻5. Используй универсальные размеры (соотношение сторон)
Используй универсальные и проверенные разрешения и соотношение сторон. В зависимости от потребностей стоит выбирать один из четырёх типов:
- 1. 2160px на 2160px, Квадрат. Универсальный тип, наследие эпохи запретgramа, где он долгое время был стандартом. Можно хорошо показать изображение, и текста будет достаточно видно. Работает по принципу золотого сечения, пусть и в упрощённой форме, что подсознательно комфортно для глаза.
- 2. 2160px на 1080px, Суженный прямоугольник. Здесь весь акцент смещён на текст, а изображение уже не столь важно. Используй его тогда, когда важнее донести мысль текстом, нежели показать картинку. С точки зрения восприятия, такая горизонтальная композиция, близкая к формату 2:1, позволяет взгляду скользить по тексту, не отвлекаясь. Ну или когда нужны компактные посты — используя этот тип, пост в ленте получается максимально компактным по высоте, чего не скажешь о других.
- 3. 1615px на 2160px, Вертикальный прямоугольник. Антипод суженного. Этот тип стоит использовать, когда ты хочешь максимально показать своё изображение, сделать на нём акцент, дать зрителю рассмотреть его во всей красе. Не рекомендую часто использовать данный тип, лучше редко, но точечно.
- 4. 2655px на 2160px, Оптимальный прямоугольник. Мой фаворит — это именно он. Его пропорции (примерно 5:4) — это не случайность, а компромисс. В этом типе и изображение хорошо покажешь, и текст, и компактность держится на приемлемом уровне. Лично я почти всегда такой размер в постах и использую.
Итог. Используй уже проверенные размеры в зависимости от ситуации, где тебе нужно больше показать иллюстрацию или текст.
🔻6. Используй легкий вес файла
Чем меньше «вес» файла (то есть килобайты или мегабайты), тем он легче. А чем легче файл, тем быстрее он загрузится и тем быстрее откроется страница сайта. Поэтому нужно стремиться к оптимальному размеру. Ни в коем случае не пренебрегайте этим. Делай файл максимально лёгким, чтобы страница загружалась быстро — особенно на разных устройствах и при разной скорости интернета. Это очень важно.
Лично я бы брал за ориентир файл не более 500 КБ — это прям круто. В идеале — 300 КБ, это уже потолок.
Пример. Лично я делаю иллюстрации в Photoshop и сохраняю в формате JPEG через функцию «Сохранить для Web». Но иногда этого может быть недостаточно. Поэтому можно использовать специальные сервисы для сжатия, например:
- compressor.io — Сжимает файл практически без потери качества. Используй при случае, когда нужно облегчить вес файла.
Итог. Загружай иллюстрации размером не более 300-500 КБ.
🔻7. Сделай корректное расположение иллюстраций
Чтобы правильно располагать иллюстрации, следуй нескольким правилам:
Первое — ставь иллюстрацию сразу после заголовка или подзаголовка. Если ты делаешь заголовок, а потом немного текста, это выглядит не очень. Потому что взгляд читателя по природе цепляется сначала за крупные элементы — шрифтовые выделения и изображения. Люди сначала сканируют страницу, выхватывая именно заголовки и визуал, а только потом погружаются в текст, что крупица текста после заголовка перед иллюстрацией будет не к месту. Поэтому после заголовка сразу ставь иллюстрацию — так ты даёшь визуальный якорь.
Второе правило — разделяй иллюстрации друг от друга значительным объёмом текста. Не стоит делать схему «иллюстрация — немного текста — иллюстрация». Делай «иллюстрация — ДОСТАТОЧНО текста — иллюстрация», либо сгруппируй графику в одном месте по принципу «иллюстрация — иллюстрация — текст» (хоть это тоже не очень, но лучше уж так). Все наглядные примеры я предоставил выше.
Итог. Не ставь мало текста между иллюстрациями, делай значительно текста перед следующей иллюстрацией.
🔻8. Фон
Если делаешь фон для иллюстрации — делай его чёрным или белым. Забудь про яркие цвета, да и про остальные цвета в целом. Красный, зелёный, розовый фон — всё это выглядит как старый сайт 2008 года, это колхозно и некрасиво. Нейтральный фон не конфликтует с основным содержанием.
Пример. Взять Apple — их весь визуал построен на этом принципе. Или посмотри на любой современный интерфейс вроде Notion или Figma — там ты не встретишь кислотных подложек.
Итог. Просто используй белый или чёрный фон — всё!
Универсальные правила иллюстрации 2
Итак, продолжаем. Чтобы подкатегория не превратилась в бесконечную ленту, я разделил её на несколько подглав. Идем по азам иллюстрирования дальше:
🔻9. Делай один акцентный цвет
Используй цвет точечно. Цвет — это не украшение, а информация, маркер, поэтому его стоит применять, только когда нужно подчеркнуть взаимосвязь или указать на что-то важное, схожее, своего рода указатель. Самая главная функция цвета в иллюстрациях — создавать логические связи между элементами.
Как видно на примере выше, в композиции сторис используется один акцентный цвет — он уравновешивает кадр и направляет взгляд зрителя. И антипример — когда всё пестрит разными цветами. Это может выглядеть ярко, но убивает любую логику и иерархию, превращая сообщение в визуальный шум.
Итог. Используй один яркий цвет точечно, а не создавай радугу.
🔻10. Создавай гармоничные композиции
Одна иллюстрация во всю ширину колонки — самый сильный ход. Если ты ставишь в ряд 2-3 иллюстрации, мозг зрителя неминуемо начинает их сравнивать. Это сродни старым любимым загадкам вроде «найди 10 отличий», где ставят две картинки и вот сиди сравнивай. Смотря на два изображения одновременно, взгляд не понимает, куда смотреть то — он прыгает туда-сюда, что нервирует и рассеивает внимание. Наш мозг по своей природе ищет паттерны и контрасты, и когда ты даешь ему два визуальных объекта сразу, он не может не заниматься этим принудительным сравнением, даже если твоя цель была совершенно иной.
Если ты не сопоставляешь одну иллюстрацию с другой намеренно — чтобы подчеркнуть разницу или показать прогресс, — тогда делай ее отдельно. Дай иллюстрации дышать. Пусть иллюстрация займет все возможное пространство и воздействует на зрителя напрямую, без лишнего визуального шума и необходимости постоянно скакать глазами и сравнивать фото.
Итог. Иллюстрации — строго в одну колонку на всю ширину. Это концентрирует внимание и усиливает воздействие. Несколько изображений в ряд запрещены — они рассеивают внимание и усложняют восприятие.
🔻11. Выделяй главное — маскируй фон
Выдели главное — то, на что должен смотреть зритель, и замаскируй незначительное, создав контраст. Я уже говорил про аннотации, но иногда самый быстрый и простой прием — это как раз замаскировать фон и выделить рамкой нужную область. Из самых рабочих приемов я бы выделил несколько:
- 1. Выделить главное и обесцветить незначительное. Довольно мощный контраст, ведь цветное на черно-белом создает почти физиологический приоритет — наш мозг обрабатывает цвет одним из первых сигналов, это не просто «интересный прием», а прямой указатель для внимания.
- 2. Выделить главное и сделать размытие незначительного. Неплохое решение, но я бы использовал его крайне редко. Только когда незначительное действительно не несет никакой информационной ценности. Сильное размытие имитирует малую глубину резкости, и если четких границ много, взгляд начинает метаться.
- 3. Выделить главное и затемнить незначительное. Еще один лидер, хорошо подходит для случаев, когда сильного, кричащего контраста не нужно, но при этом незначительное имеет какую-то второстепенную ценность, которую не хочется полностью уничтожать. Это мягкий способ сузить поле зрения, не выбрасывая контекст.
- 4. Выделить главное и добавить шум незначительному. Неплохой вариант, но мной не особо любимый. Шум или текстура понижают читаемость, и если переборщить.
- 5. Комбо! Ничто не мешает комбинировать сразу несколько приемов. Как пример, обесцветить и добавить лёгкого затемнения — получится сложный, многослойный контраст, который направляет взгляд еще надежнее, чем один метод. Главное — не превратить всё в винегрет.
Итог. Создавай контраст для того, чтобы выделить нужное с помощью различных дизайнерских приемов.
💡Еще ряд Советов
- Подписывай иллюстрации. И причем просто подписи недостаточно, подпись также должна дополнять и пояснять иллюстрацию, тот момент, который зрителю не сразу ясен или на что он должен обратить внимание.
- Сначала придумай иллюстрации и уже под них пиши текст. Если видишь, что статья — лажа, и не получается подобрать к ней нормальные иллюстрации, не мучайся. Просто создай сначала базу мощных, цепляющих иллюстраций — инфографику, фото, скриншоты, мемы, что угодно, что визуально продает твою идею, — и уже к ним строи текст на свою тему.
- Предметные фото. Рассказываешь о конкретном инструменте, материале или продукте? Дай читателю рассмотреть его во всех деталях.
- Если делаешь картинку большой, то она должна быть интересной, чтоб было что разглядывать, а не просто минималистичный объект на пустом фоне.
- Изображение должно дружить с заголовком и подзаголовком. Если делаешь заголовок, подзаголовок, то последующие изображение должно описать этот самый заголовок.
- Не используй людей из фотостоков, в 9 из 10 случаев это будет проигрышный вариант.
- Лучше не использовать мемы как иллюстрации. Юмор — это очень сложный жанр, поэтому велика вероятность, что можно не угадать с мемом, и он будет непонятен. Чтобы не рисковать, лучше их не использовать — и всё.
Итог Статьи
По итогу статьи, что важно запомнить:
✔ 1. Ширина. Иллюстрация должна занимать всю ширину текстового блока.
✔ 2. До/После. Для демонстрации изменений или правильного/неправильного используй прямое сравнение в одном ряду.
✔ 3. Стилистика. Выдерживай единый стиль (цвета, шрифты, графика) для всех иллюстраций.
✔ 4. Текст и изображение. Не накладывай текст на изображение. Размещай их отдельно.
✔ 5. Соотношение сторон. Используй проверенные форматы (например, ~5:4 для баланса картинки и текста).
✔ 6. Вес файла. Сжимай изображения до 300-500 КБ для быстрой загрузки.
✔ 7. Расположение. Ставь иллюстрацию сразу после заголовка. Не разделяй изображения маленькими фрагментами текста.
✔ 8. Фон. Только белый или черный. Яркие фоны — табу.
✔ 9. Акцентный цвет. Используй один яркий цвет точечно для выделения ключевых элементов.
✔ 10. Композиция. Одна иллюстрация на всю ширину сильнее, чем несколько в ряд. Рядом — только для прямого сравнения.
✔ 11. Выделение главного. Обесцвечивай, размывай или затемняй фон, чтобы сфокусировать внимание на нужном объекте.
✔ А также. Перед созданием контента продумай визуальную базу: сделай цепляющие иллюстрации, а затем пиши под них текст. Всегда подписывай иллюстрации, но так, чтобы подпись дополняла и поясняла, а не дублировала. Для предметов используй детальные фото. Избегай безликих людей из фотостоков и мемов. Следи, чтобы изображение напрямую раскрывало заголовок или подзаголовок.
Короче! Сначала — сильная визуализация, потом — текст. Держи стиль единым, композицию — чистой, акценты — ясными. Технически: сжимай файлы, выбирай нейтральный фон, не смешивай текст с изображением. Это сделает контент профессиональным, быстрым и понятным.