Что такое Lorem Ipsum и зачем нужен

Lorem Ipsum — это набор слов для заполнения макетов, когда реального контента еще нет. Его также называют плейсхолдером («держателем места») или «рыбным» текстом. Он показывает, как будет выглядеть готовый проект: лендинг, баннер, презентация, интерфейс приложения.

Как появился Lorem Ipsum

«Рыбный» текст на латинице — это искажённый отрывок из трактата Марка Туллия Цицерона «О пределах добра и зла». В начале XVI века неизвестный книгопечатник намеренно изменил исходный текст, чтобы продемонстрировать разные сочетания букв и интервалы между символами. Он создал целую коллекцию шрифтов с Lorem Ipsum.

В 1960-е годы компания Letraset использовала отрывок Цицерона в печатных листах с образцами шрифтов — в то время дизайнеры вырезали тексты и вставляли их в макеты. 

В 1985 году появилось первое издательское ПО Aldus PageMaker, где Lorem Ipsum также был шаблоном. «Рыбный» текст дошел до наших дней без существенных изменений. 

На кириллице тоже есть классическая «рыба»:   

Но этот отрывок не так популярен, как Lorem Ipsum. Для русскоязычных проектов часто берут рандомные сгенерированные тексты, а не единый стандартный вариант.

Зачем использовать Lorem Ipsum

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

Можно выделить 3 основных сценария применения «рыбы»:  

1. Дизайн-макет без готового текста. 

Для рабочих задач — не самое удачное решение, т.к. дизайн придется повторно адаптировать под контент. Но «рыба» может спасти, например, когда макет нужно сдать «еще вчера», а текста пока нет. 

Еще один вариант — портфолио дизайнера, где текстовая часть не имеет значения.

2. Разработка айдентики и шаблонов. 

Фирменный стиль компании — это сочетание цветов, шрифтов, фигур, декоративных элементов. «Рыбный» текст дополняет визуальную систему.

3. Тестирование шрифтов. 

Можно оценить, как выглядят разные символы и их сочетания, расстояния, размеры, начертание и прочее. 

Для русскоязычных проектов лучше использовать «рыбу» на кириллице, потому что буквы визуально отличаются.

Когда Lorem Ipsum не подходит

В некоторых случаях «рыба» не помогает и даже мешает.

Например:

• Макет на финальной стадии, презентация клиенту. Проект с «рыбным» текстом  может выглядеть идеально, но при появлении реального контента весь дизайн сломается: заголовки не влезут, блоки поедут.
• Usability-тестирование. Людям сложно ориентироваться в бессмыслице, и тест в результате будет невалидным. Желательно использовать черновик от копирайтера или хотя бы нейротекст, чтобы передать смысл разделов, CTA-кнопок, заголовков.
• Интерактивные элементы и микрокопия: кнопки, тултипы, подписи. В таких случаях влияет каждый пиксель. Lorem Ipsum не передает реальную длину текста и искажает общую картину.
• SEO и контент для продвижения. В «рыбе» нет ключевых слов и продающих фраз, размер итогового текста может оказаться совсем другим.
• Проекты с ограничениями: юридический контент, данные с большим количеством цифр. Предсказать, сколько места займет такой текст, невозможно, поэтому лучше дождаться хотя бы черновика и не использовать «рыбу».

Вывод: Lorem Ipsum не подходит для задач, где контент сильно влияет на визуал.

Примеры Lorem Ipsum в дизайне

«Рыбный» текст в дизайн-проектах демонстрирует композицию, шрифты и другие визуальные особенности.

Цвет заголовка:

Заголовок, структура и описание картинок:

Креативный текст для описания продукта, необычный шрифт:

Демонстрация шрифтов:

Дизайн логотипа:

Шаблон резюме:

Абстрактная композиция, может быть фирменным стилем бренда:

Композиция с оригинальным шрифтом — для логотипа, рекламного постера:

Мокап журнала:

Постер:

Как создать «рыбу»

Текст можно сгенерировать через бесплатную онлайн-программу.

Рыбатекст — генерирует заданное количество абзацев в один клик.

РыбаТекст — выдает указанное количество предложений/абзацев. Для регулировки нужно передвинуть ползунок. 

Есть отдельный генератор заголовков, который создает одну строчку со случайным текстом.

Lorem Ipsum — генерирует указанное количество абзацев, слов, байтов или списков на латинице.

Текст можно скопировать и вставить в любой макет.

Как добавить «рыбу» в Figma

Представим, что создаем карточку товара. На первой картинке нужно указать 3 момента:

— Тип продукта — шампунь.

— УТП. Например, восстанавливает волосы, придает объем.

— Состав. Кратко, основные ингредиенты.

Можем вбить слова от руки:

Или автоматически добавить «рыбу» через плагины Figma.

Для начала ставим фиксированный размер текста, чтобы буквы не наползали на изображение шампуня. Делаем все 3 блока одной длины и в разделе Layout нажимаем Fixed size:

Дальше в нижнем меню находим раздел Actions — последняя иконка. В открывшемся окне переходим в Plugins & Widgets и вбиваем в поиск “lorem Ipsum”. Выбираем понравившийся плагин, например, LORE.

Объем текста небольшой, поэтому указываем количество слов: 3 — для УТП и 5 — для состава. Нажимаем Add — «Добавить». 

Получаем сгенерированный текст фиксированного размера:

Больше плагинов можно найти в Figma Community по запросу “lorem ipsum”.

«Рыба»-текст — полезное решение для дизайн-портфолио и подготовки мокапов на ранних стадиях проекта. С ним можно попробовать разные шрифты, композиции и разработать айдентику бренда.