Пошаговый алгоритм работы с текстом и применение визуальной иерархии

95% любого дизайна составляет текст, поэтому каждый дизайнер должен уметь не только правильно подобрать шрифт, но и построить правильную визуальную иерархию. Иерархия позволяет размещать текст в порядке его важности.

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

Давайте представим, что заказчик прислал отрывок из статьи, и вам предстоит применить все знания работы с текстом.

Исходный вариант:

Алгоритм работы выглядит следующим образом:

Шаг первый

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

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

Не обязательно менять только по одному слову. Если нужно, переписывайте целые предложения и удаляйте ненужные слова. Не стоит слепо доверять сервису, анализируйте каждую ошибку. Главред вам только поможет, но никак не сделает работу за вас.

Первый вариант текста получил оценку 8.3

Что можно сократить и переписать?

1) Убираем слова «Оно нужно?» из вопроса. Оставим только «Что такое Pomodoro?». Смысл не потеряли, вопрос остался.

2) Убираем целое ненужное предложение «Базовая техника довольно проста». Мы сразу можем перейти к шагам, а ненужный набор слов сократить. Помните о том, что нужно экономить время читателя.

3) Убираем слова «активных» так как не совсем понятно, что они означают. Оставляем «Список задач».

4) «Самые приоритетные» убираем усилитель «Самые», без него вполне можно обойтись.

5) «Начинаете работать». Здесь можно переписать приложение следующим образом: Ставите таймер и работаете, убирая слово «Начинаете».

Я думаю смысл понятен, убираем лишние слова, и переписываем текст так, чтобы не потерять смысл.

После всех манипуляций у меня получился второй вариант, который получил оценку 9.5, что является очень хорошим показателем.

Шаг второй

Разделяем текст, на заголовки, подзаголовки и абзацы. Нужно, чтобы заголовок отображал суть, написанного ниже текста. Читатель должен понять по заголовку, что это то, что ему нужно.

У подзаголовков задача такая же — втягивать в прочтение абзаца. Для удобного чтения разделяйте текст на 3–5 предложений.

Шаг третий

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

Выделение всего текста жирным или ПРОПИСНЫМ сильно ухудшит чтение и даже может вызвать раздражение у читателя.

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

Шаг четвертый

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

Чаще всего применяется 2–3 уровня заголовка. Первый самый большой для всей статьи, а второй для всех остальных заголовков.

В моем случае размер заголовка первого уровня 36 пикселей, и такой заголовок будет только один, для всей статьи. Размер второго уровня 25 пикселей, и таких заголовков может быть множество.

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

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

Какая возникает проблема?

Наш взгляд сразу падает в середину статьи, и есть риск того, что основной заголовок просто не будет прочтен, так как иерархия нарушена.

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

Заключение

Сегодня мы рассмотрели пошаговый алгоритм работы с текстом и применением визуальной иерархии на примере отрывка из статьи. Все эти правила легко применяемые к любому сайту.

В следующей статье, мы возьмем тот же текст, сделаем из него прототип продающей страницы и прорисуем макет по всем принципам визуальной иерархии. Будет полезно и интересно!

--

--

UI Designer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store