Дизайн
#статьи

Редактируем дизайном: базовые правила вёрстки журналов и сайтов

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

Иллюстрация: OlyaSnow для Skillbox Media

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

В книге «Редактируем дизайном» Ян Уайт делится простыми приёмами вёрстки и доказывает: дизайн — это не просто красивая упаковка, а инструмент, который помогает сложное сделать простым для восприятия.

Ян Уайт — арт-директор, дизайнер и консультант, который с 1951 года занимался оформлением печатных продуктов. За свою карьеру он провёл более 1800 семинаров в 27 странах и помог многим изданиям улучшить вёрстку своих журналов.

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

Из материала вы узнаете:



вячеслав лазарев

Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.


Вёрстка

Единообразие — очень важная вещь в вёрстке журнала или сайта. Оно помогает быстрее доводить материалы до публикации и не тратить на это много ресурсов. Поэтому Ян Уайт советует вводить правила вёрстки как можно раньше:

Если вы разрабатываете структуру, которая визуально отражает и раскрывает каждый материал, издание от этого только выиграет — эффективнее донесёт до читателя нужный смысл.

Ян Уайт

Сетка — самый простой и надёжный способ добиться единообразия. При её создании Ян Уайт советует использовать четыре, пять или семь колонок, так как они помогают наиболее вариативно компоновать статьи.

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

Изображение: Skillbox Media

Пять колонок требуют шрифта поменьше, если заполнять каждую. Но, объединяя несколько колонок в одну, можно придумать неограниченное количество вариантов компоновки материала:

Изображение: Skillbox Media

Семь колонок в чистом виде не подходят для вёрстки текста, так как строки в них получатся слишком узкими. Но это очень удобный инструмент для различных комбинаций:

Изображение: Skillbox Media

В веб-дизайне обычно используют сетку из 12 колонок, так как она позволяет ещё сильнее разнообразить вёрстку страниц.

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

Изображение: Skillbox Media

Чтобы человек легче вовлекался в статьи и понимал их структуру, важно сделать чтение максимально удобным. В большинстве языков принято писать направо и сверху вниз, поэтому и текстовые блоки нужно верстать так же:

Изображение: Skillbox Media

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

Изображение: Skillbox Media

Использовать правила вёрстки всегда и везде необязательно. Иначе из-за однообразной композиции каждой страницы читатель заскучает и пойдёт заниматься чем-то другим:

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

Ян Уайт

Иллюстрации

Иллюстрация — первое, что сразу бросается в глаза на странице и формирует ожидания читателя от дальнейшего текста. Подбирать картинки по принципу «красиво — некрасиво» — неправильно:

Иллюстрации открывают читателю информацию. Использовать их нужно осознанно, а не просто чтобы разбить текст или оживить страницу. Не нужно относиться к ним как ко второстепенному элементу, которым они не являются.

Ян Уайт

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

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

Изображение: Joseph Gonzalez / Michael Dam / Aiony Haust / Ben Parker / Unsplash / Skillbox Media

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

Фото: Maridav / Shutterstock

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

Изображение: Erick Reyes / Unsplash / Skillbox Media

Любопытство. Всем людям интересно, куда именно смотрит человек рядом, — это же касается и фотографий. Ваш взгляд моментально переключится на текст, если человек на фотографии рядом смотрит на него.

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

Изображение: Japheth Mast / Unsplash / Skillbox Media

Эффект можно усилить, если сделать выносные элементы:

Изображение: Bermix Studio / Unsplash / Skillbox Media

В натуральную величину. Обычно фотографии стараются показать целиком. Но иногда лучше показать предметы в натуральную величину, даже если придётся обрезать часть иллюстрации. Например, композиция с маленькой чашкой выглядит куда слабее, чем с большой, — даже несмотря на то, что фотография поместилась не полностью.

Изображение: tom_chen2011 / Unsplash / Skillbox Media

Крупнее натуральной величины. Преувеличенный масштаб работает ещё сильнее натурального. Этот приём можно использовать в неожиданных контекстах, чтобы добиться ощущения интриги. В журналах о моде этим приёмом пользуются чаще всего — с помощью него можно и подробно продемонстрировать технику макияжа, и сделать вёрстку эффектнее.

Изображение: Amir Seilsepour / Unsplash / Skillbox Media

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

Изображение: Skillbox Media

Заголовки и текст

Если иллюстрация привлекла внимание читателя, то заголовок поможет принять решение, стоит ли дальше читать текст. Довольно часто дизайнеры пытаются его как-то интересно оформить, чтобы «читатель не заскучал»:

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

Ян Уайт

Ян выделяет несколько правил, которым стоит следовать дизайнерам при вёрстке заголовков и текстовых блоков.

Никогда не пишите все слова с прописных. Попробуйте прочитать этот текст и оцените, насколько это сложно сделать:

В Таком Типе Заголовка Столько Же Смысла

Сколько вОТ в эТОМ аБСОЛЮТНОМ иДИОТИЗМЕ — тО жЕ сАМОЕ, пРОСТО вЫВЕРНУТО нАИЗНАНКУ. Но Мы Так Привыкли К Этому Оформлению, Что Верим, Будто Именно Так И Должны Выглядеть Заголовки. Я Утверждаю, Что Это Похоже На Визуальную Икоту.

Ян Уайт

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

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

Изображение: Skillbox Media

Учтите, что даже повёрнутую надпись прочитать сложнее, чем обычную горизонтальную, особенно если она большого размера.

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

Ян Уайт

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

Изображение: Skillbox Media

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

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

Изображение: Skillbox Media

Контраст

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

На странице ничто не существует в вакууме. Читатель смотрит на неё и видит всё вместе: саму страницу, логотип, шрифт, картинки, пустые места, их взаимоотношения. Во всём этом массиве ему необходимо разобраться — БЫСТРО!

Ян Уайт

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

Изображение: Skillbox Media

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

Изображение: Skillbox Media

Контраст цветов. Если поставить одну чёрно-белую фотографию среди 20 цветных, она будет выделяться, даже несмотря на менее привлекательный вид. То же работает с вывороткой — чёрная страница привлекает больше внимания.

Изображение: Skillbox Media

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

Изображение: Skillbox Media

Курс

Профессия Веб-дизайнер

Вы освоите веб- и UX-дизайн. Научитесь создавать удобные сайты, работать с анимацией и презентовать проекты клиентам. Сможете начать карьеру в дизайне и брать первые заказы уже после завершения первых двух курсов.

Узнать про курс
Понравилась статья?
Да

Пользуясь нашим сайтом, вы соглашаетесь с тем, что мы используем cookies 🍪

Ссылка скопирована