Вёрстка текста
| На протяжении нескольких лет я убеждаюсь в одной любопытной вещи. Когда текст выглядит вкусно и красиво, у заказчиков намного меньше к нему претензий и правок, чем когда он выглядит как последовательная пелена. Я долго бился над причиной этого явления и даже ставил эксперименты. И каждый раз получал результат: к красивому тексту претензий меньше при прочих равных условиях.
| |
| И только спустя более года мой друг дизайнер объяснил, в чем причина. Все дело в визуальном восприятии. Голый текст, отформатированный текст, материал с разделением на функциональные блоки и текст в дизайне воспринимаются совершенно по-разному.
| | |
| Психологический аспект восприятия я объясню Вам чуть позже. Сейчас Вам главное понимать, что общее впечатление читателя формируется не только от того, что Вы пишете и как, но и от того, как Вы размещаете свой материал.
| |
В успешном тексте большую роль играют три фактора: что Вы пишете, как Вы пишете и как представляете текст визуально.
Вертикальное и горизонтальное размещение текста
99% авторов пишут текст вертикально: сверху вниз. И основная мысль у них идет сверху вниз. Примерно вот так.
| Ничего плохого в этом нет, если не считать того факта, что с каждой строчкой, с каждым скроллом, у читателя все меньше желания читать Ваш материал, особенно если он большой. Честь Вам и хвала, если Вы делаете его интересным и затягиваете читателя. Однако практика и статистика показывают, что люди все меньше читают тексты. Синдром "слишком-много-букв" все глубже проникает в общество.
| |
| Приведенный выше пример текста относится к 1-колонному формату (текст идет в виде одной колонки). К слову, это письмо также относится к этому же формату, поэтому я всячески стараюсь его разрядить изображениями и цветными блоками.
| | |
| Когда мы говорим о горизонтальном размещении текста, мы переходим к 2-колонному формату. Вот такому.
| |
2-колонный текстовый формат (горизонтальное размещение).
| Видите разницу? Текст один и тот же, буквы одни и те же, но воспринимается уже совсем по-другому. Визуально текст выглядит легче и создается иллюзия, что перед нами не один, а три текста: два маленьких и один побольше.
| |
| Так размещать блоки очень просто в любом текстовом редакторе. Просто делаете таблицу с невидимыми границами и, вуаля, у Вас 2-3-4 - сколько угодно блоков.
| | |
| Добавляем визуализацию Можно пойти еще дальше заменить один блок текста изображением (или таблицей, или видео, или чще чем-нибудь). Но обратите внимание, что длина блоков в этом случае у Вас должна быть одинаковой. Если один будет длиннее, то визуально это будет смотреться не очень изящно. Сравните.
| |
Когда блоки имеют разную длину, образуется пустота, которая смотрится очень некрасиво.
А теперь вот как выглядит текст, у которого колонки одного размера.
Колонки одинаковой длины смотрятся органично и естественно.
Наборы колонок
Вы можете распределять текст так, как нужно, используя для этого различные сочетания колонок.
Используя различные сочетания колонок,
Вы можете размещать текст как угодно.
О чем важно помнить
Горизонтальное размещение текста очень хорошо помогает разрядить материал. Особенно когда Вы используете его в сочетании с грамотным форматированием. Но здесь Важно учитывать ряд моментов.
- Используйте горизонтальное размещение там, где это целесообразно. Оно должно подчеркивать логику материала, а не вносить диссонанс.
- Если Вы разбиваете текст на блоки, старайтесь, чтобы они были разнородными. Плохо, когда подряд идут колонки 1/2-1/2 два и более раз (если только это не нужно для решения задачи, например, когда у Вас есть 6 преимуществ, и Вы их сгруппировали на 3 пары).
- Всегда делайте поправку на место публикации текста. Так, на странице сайта без боковой колонки 4 блока в ряд будут смотреться хорошо, но если сайт с боковой колонкой или просто текстовый документ формата А4, то три блока в ряд - это предел. Больше не влезет, а если и влезет, то будет некрасиво.
В заключение
Возможно, сейчас этот урок Вам покажется не особо полезным, однако он необходим, чтобы развивать пространственное мышление. И он жизненно необходим, чтобы разрабатывать продающие страницы (Landing Page) в дальнейшем.
То, что мы сегодня рассмотрели, называется версткой