Типографика и верстка способы работы с ней
Я дизайнер и часто сталкиваюсь с одной и той же задачей — сделать дизайн-продукт: от печатной продукции до веб-интерфейса. Раньше в поисках хороших решений я топтался на месте, потому что не знал, что такое типографика и не умел работать ней. Приходилось много читать, проходить образовательные курсы и много работать.
Вот то, что я делал на втором курсе института:
Не нужно быть специалистом, чтобы понять, что здесь есть явные проблемы.
Главная беда этих работ не в картинках и не в ужасных цветах, а в неумении работать с текстовой информацией.
Сейчас я знаю основные принципы оформления текста, другими словами, знаю что такое типографика и научился работать с ней. В статье расскажу об универсальном подходе, который помогает упорядочить любой текст. Покажу, что нужно делать на каждом шаге.
Пробелы в своих знаниях я заполнил на курсе дизайнера Игоря Штанга. Он работал в издательской группе «Парамон» и Дизайн-бюро Артёма Горбунова и делится практической информацией о том, что такое типографика и верстка и способами по работе с ней.
У него есть свой универсальный метод, который помогает дизайнеру разложить все свои действия по полочкам и структурировать работу с текстовой вёрсткой. Он подойдёт дизайнерам, которые работают с печатной продукцией, веб-баннерами, лендингами, емейлами и т. д.
Суть подхода Игоря Штанга
Подход включает 4 этапа. Следуя им, мы движемся от малого к большему: не зная содержания текста, мы не можем работать с его стилем.
Чтобы показать, как работает подход, я возьму в качестве примера рецепт блинов из интернета. Ему нужно придать более информативный вид. В итоге должен получиться печатный плакат.
Я специально не стал брать веб-страницу или баннер, чтобы показать универсальность подхода.
Содержание
Содержание — это текст, с которым вам предстоит работать. Чаще всего он представлен в необработанном виде: не имеет структуры и акцентов. Необходимо изучить текст и определиться с задачей.
Задача — оформить рецепт так, чтобы читателю было приятно и легко готовить по нему блюдо.
Структура
Структура — переход от содержания к форме. На данном этапе нужно выделить элементы иерархии текста: заголовки, подзаголовки, основной текст и т. д.
На этом этапе главная задача — оформить рецепт максимально доступно для повара. Я убрал текст, который не касается приготовления блинов. Он не должен перетягивать внимание с самого важного. Затем разбил информацию на блоки: название блюда, калорийность, ингредиенты, шаги приготовления.
Типографика и верстка конструкций
На этом этапе выстраиваем смысловые блоки текста во всевозможные конструкции и в итоге получаем скелет будущего макета.
Существует несколько видов конструкций, состоящих из отдельных модулей:
- В одну строку (модули идут друг за другом).
Такой вид конструкции используют для представления информации, выражающей определённую последовательность. - Вертикально (каждый модуль с новой строки).
Вертикально логичнее всего завёрстывать списки. - Беспорядочное распределение модулей
Не связанные между собой модули можно использовать, если блоки текста между собой равноправны. - По сетке
В этой конструкции смысловые блоки текста располагаются по сетке.
Чтобы определиться с выбором конструкции, её нужно «примерить» на текст. Мы посмотрим, как выглядит рецепт блинов в каждой из четырёх конструкций:
Для дальнейшей работы я выбрал последнюю конструкцию — по сетке. Первое, на что падает взгляд читателя, — название. По нему читатель решает, то ли это блюдо, которое он искал. Калории показывают, насколько блюдо сытное и подходит ли оно для диеты пользователя.
Блоки с ингредиентами и шагами приготовления я расположил внизу, отдельно от остальной информации. Когда читатель будет готовить, ему должно быть просто найти взглядом тот шаг, на котором он остановился.
У меня готов каркас будущего макета, теперь можно переходить к завершающему этапу и определяться со стилем оформления текста.
Стиль
Настроение макета зависит от выбранного стиля. Он может быть основан на содержании текста, брендбуке компании, пожеланиях заказчика и т. д.
Чтобы найти хорошее решение или вдохновиться, зайдите на Пинтерест. Там можно найти много хороших примеров различных стилей вёрстки: швейцарского, модернизма, минимализма и т. д.
В своей работе я использовал стиль, близкий к швейцарскому, добавил крупную фотографию блинов — и вот что получилось:
Подход Игоря Штанга облегчает поиск решений для оформления текста. Главное, не перепрыгивайте шаги алгоритма и не меняйте их местами. Вы нарушите логику работы над макетом и убьёте кучу времени на стыковку одного шага с другим.
