Насмотренность в дизайне: зачем изучать дизайн вокруг и как сделать это привычкой

Что такое насмотренность и зачем она нужна

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

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

Разберёмся, как эта суперсила помогает в работе и жизни.

Избавляет от страха белого листа

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

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

Позволяет понимать глубже

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

Иногда эти открытия могут оказаться неожиданными. Например, в основе заставки программы «Пусть говорят» — инсталляция американской художницы Барбары Крюгер, созданная для выставки в Mary Boone в 1991 году:

Придумывая фирменный костюм Лилу для фильма «Пятый элемент» (1997), Жан-Поль Готье вдохновился картиной Фриды Кало «Сломанная колонна» (1944):

Формирует профессиональную интуицию

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

Например, на концепцию знаменитых «Мягких часов» Сальвадора Дали вдохновил вид сыра камамбера:

Помогает ли насмотренность понять, что в дизайне хорошо, а что плохо?

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

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

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

Как оценивать элементы дизайна

Композиция

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

Посмотрим, на что стоит обращать внимание при анализе композиции.

Соотношение объектов

Любой графический объект имеет свой визуальный вес, который складывается из нескольких составляющих:

• Размер. То, что больше, привлекает к себе больше внимания.
• Цвет. Более яркий объект имеет больший оптический вес и притягивает взгляд.
• Тон. Объект более тёмного тона «весит» больше.
• Форма. Чем сложнее форма объекта, тем больше его оптический вес.
• Расположение на листе. То, что находится в верхней части композиции, воспринимается как что-то более лёгкое, а то, что внизу, — как более тяжёлое.

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

130-килограммовый шар сорвётся со своего места и «укатится» в левый нижний угол, потому что шары в 70 и 10 кг не способны его уравновесить. Это не очень хорошо, если несбалансированная композиция изначально не была приёмом для создания динамики.

Вид композиции

Композиции бывают симметричные и асимметричные.

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

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

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

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

Например, на картине Александра Дейнеки «Юность» асимметричная композиция задаётся дугой и подчёркивает движение, которое хотел изобразить художник. Персонаж слева — отправная точка прыжка, а пустота справа — невидимая точка приземления.

Расположение объектов на листе

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

Цвет

Цвет обращает на себя внимание, хорошо запоминается и быстро воздействует на зрителя. Например, об опасности нам часто сообщают с помощью красного, а некоторые бренды прочно ассоциируются у потребителей с тем или иным оттенком: все знают, что Coca-Cola — это красный, а Pepsi — синий.

Чтобы проанализировать то или иное цветовое решение, важно понимать принципы работы с цветом.

Как сочетать цвета

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

Какие цветовые схемы популярны в дизайне:

• Монохромная цветовая схема. Это не только чёрно-белое изображение — оно может быть выполнено в разных оттенках одного цвета, от более ярких тонов к более тёмным.
• Аналоговая цветовая схема. Сочетаем три цвета, которые соседствуют на круге.
• Комплементарная цветовая схема. Абсолютный хит, если у вас всего 10 минут на макет или образ. В этой максимально контрастной цветовой схеме используются два противоположных цвета.
• Классическая и контрастная триады. Классическая триада — схема, похожая на комплементарную, но вместо двух цветов используются три, они вписываются в равнобедренный треугольник. В контрастной триаде цвета тоже три, но два из них приближены друг к другу, как в аналоговой цветовой схеме.

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

ColorScheme.Ru — можно выбрать цветовые сочетания, используя разные схемы.

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

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

Dribbble — на сайте, куда дизайнеры выкладывают свои работы, можно выбрать фильтр по цвету — и посмотреть, как тот или иной оттенок, который вы планируете использовать, функционирует в реальной графике.

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

Типографика

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

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

Разберёмся, на что стоит обращать внимание, когда мы видим текст в дизайне.

Шрифт и шрифтовые пары

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

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

В шрифтовую пару чаще всего объединяются два шрифта, и их сочетание может решать две основные задачи ↓

Функциональную — отделить одну часть контента от другой или выделить важное, чтобы читателю было удобнее ориентироваться.

Смысловую — дизайнеру важно подчеркнуть взаимосвязь разных традиций.

Встретив на сайте понравившуюся шрифтовую пару, можно взять её на заметку. Для этого полезно установить специальное расширение для браузера вроде Fonts Ninja — оно подскажет название шрифта, его размер и цвет.

Выключка

Понятие, хорошо знакомое всем, кто хоть однажды работал в Word.

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

Кернинг и трекинг

Оба эти понятия — про изменение расстояния между символами.

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

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

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

Длина строки и интерлиньяж

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

Оптимальное количество слов в строке — 7–10. Так с помощью периферийного зрения мы можем контролировать начало следующей строки, а глаза не слишком устают от чересчур частых переходов.

Интерлиньяж — расстояние между строками. Иногда минимальный интерлиньяж работает как приём, но если мы имеем дело с большим фрагментом текста, то оптимальное расстояние рассчитывается по формуле: размер шрифта * 1,2–1,5.

При размере шрифта 20 оптимальный интерлиньяж — 24–30.

Висячие предлоги, союзы, частицы

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

Служебное слово и слово, к которому оно примыкает по смыслу, можно соединять с помощью неразрывных пробелов. А если вылавливать «висяки» самостоятельно не хочется — на помощь придёт типограф Лебедева.

Как превратить насмотренность в привычку

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

Как тренировать насмотренность в офлайне

Идём на выставку

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

• вы внимательно изучаете один зал или одну работу по методу slow looking;
• смотрите работы, объединённые по тому или иному признаку: времени создания, тематике;
• быстро проходитесь по всем залам, фиксируя только то, что вам понравилось.

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

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

Исследуем город

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

Учимся у природы

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

Как тренировать насмотренность в офлайне

Вот несколько инструментов для тренировки насмотренности, пользоваться которыми можно не выходя из дома ↓

Онлайн-коллекции музеев позволяют детально рассмотреть произведения искусства:

• Эрмитаж,
• Музей Виктории и Альберта,
• MoMA,
• Rijksmuseum,
• музейные коллекции в Google Arts & Culture.

Сайты, где дизайнеры выкладывают свои работы, страницы профессиональных премий и не только:

• Behance,
• Pinterest,
• Dribbble,
• w.,
• расширение на браузер от Muzli.

Аккаунты и Telegram-каналы дизайн-агентств, онлайн-школ, дизайнеров в числе ваших подписок помогут тренировать насмотренность в фоновом режиме.

Как часто тренировать насмотренность

Существуют три основных стратегии тренировки насмотренности: систематическая, хаотичная, фоновая.

Систематическая стратегия предполагает, что 3–4 раза в неделю по 20–30 минут вы выделяете время на просмотр референсов. Временные ограничения необходимы, чтобы не уходить в процесс знакомства с чужими работами с головой, а регулярность довольно быстро поможет сформировать первую визуальную библиотеку.

Хаотичная стратегия, или стратегия под задачу, предполагает развитие насмотренности от случая к случаю, когда у вас есть ресурсы, время или необходимость. Поиск референсов может стать подготовительным этапом для выполнения основной задачи. На один такой подход необходимо в среднем 50–60 минут раз в 1–2 недели.

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

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