x
 
Артём
7 июля 2014

Расскажите об иллюстрациях как базовом элементе.



Иллюстрация — базовый элемент вёрстки.

Дети любят книжки с картинками. Смотреть на страницы без картинок скучно. Такая книжка оставит ребёнка равнодушным или вызовет у него недоумение.

Наивно думать, что со взрослыми дело обстоит иначе. Взрослые листают журналы, ищут иллюстрации в книжках, смотрят на банеры. Разглядывают фотографии, пересылают друг другу «котяток» и «демотиваторы». Картинки любят все.

Иллюстрация привлекает внимание быстрее заголовка: ребёнок учится видеть мир раньше, чем читать. Как и заголовок, иллюстрация цепляет читателя, вызывает интерес к чтению, помогает выбрать между текстами или объявлениями. Только всё это — быстрее и эффективнее.

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

Хорошая иллюстрация делает всё сразу:


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

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


Иллюстрация — самый заметный якорный объект. Конструкция страницы часто подчиняется ключевой иллюстрации: её пропорциям, размеру и положению.

На восприятие иллюстрации влияют её пропорции. Благодаря двум глазам поле зрения человека вытянуто вширь. Поэтому горизонтальная иллюстрация выглядит естественно:


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


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


Если картинка имеет чётко выраженное направление, лучше, чтобы она «смотрела» на текст:


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

Печально, если ключевой иллюстрацией в конструкции страницы становится рекламный банер.

Фотография должна быть чётко ограничена собственным фоном или тонкой прямоугольной рамкой. Облака, сходящие «на нет» — ошибка:


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

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

То же относится к границам обтравленных иллюстраций: они должны быть чётко очерчены.

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

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

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


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


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


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

Дизайнер следит, чтобы на выбранной им фотографии посторонние объекты случайно не искажали форму объекта:


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


Накладки: подборка Чарльза Эпла
P. S.

Это был понедельничный совет о вёрстке и типографике в вебе. Хотите знать всё об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? Присылайте вопросы.

Типографика и вёрстка — дисциплина Школы дизайнеров. Занятия с 27 августа. Мы напишем вам, когда будет открыт набор.
 

Поделиться
Отправить

Комментарии

Евграф Борезов
8 июля 2014

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


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

Почему же на сайтах «Системы Главбух», «Системы Юрист» и «Системы Кадры» именно левая «подмышка»? 2 13 2




Недавно всплыло

В таких разборах сразу видно, как теорию перекладывать на практику. Делайте, пожалуйста, побольше видео! :-) 1 Что за font-family? Где его взять? 2 Илья, видео с переговорами прикольные, продолжайте :-) 2 Расскажите о дизайне REST API 1