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