Как перестать собирать референсы и начать их использовать

Люди примерно со времен неолита договариваются друг с другом при помощи картинок. Это один из самых долгоиграющих трендов в сфере визуальных коммуникаций, и там, где мы в принципе (на профессиональном уровне!) разговариваем про картинки, нет никаких причин от него отказываться. NB Материал основан на реальных заданиях и проиллюстрирован работами студентов. Может содержать следы пользы для начинающих дизайнеров.

Так уж сложилось, что, описывая картинку словами, мы будем бесконечно договариваться о терминах с другими участниками дискуссии. Да что там, даже просто называя цвета (я не беру сложносочиненные названия вроде «цвет бедра испуганной нимфы», давайте просто представим себе «оранжевый»), мы будем представлять себе совершенно разное просто потому, что опыт каждого человека уникален. Дизайнер переходит на знакомый ему язык картинок в переговорах с заказчиком и собирает кажущиеся ему подходящими картинки для того, чтобы быть заказчику более понятным. Но иногда референсы или мудборд призваны не помогать решать конкретную задачу, а просто поясняют вкусовые предпочтения исполнителя, что, в общем-то, неплохо, но не соответствует функции референсов/мудборда.

Такого рода мудборд – это своего рода первое свидание, попытка произвести впечатление на заказчика. Как если бы дизайнер словами сказал/а: «Я хочу делать вот такие штуки» или «Мне нравится вот такой стиль». Умеет он/а эти штуки делать, владеет выбранным стилем или нет, это уже другой вопрос.

Мудборд для проекта навигационной системы / II курс
Мудборд для проекта навигационной системы / II курс

Пример студенческого мудборда: что мы на нем видим? Ну да, я тоже хотела бы уметь рисовать как Альфонс Муха, да и модерн, как стиль, мне очень нравится. Дает ли нам это представление о том, как будет решаться проект (здесь мудборд собирался под проект навигационной системы, правда, это не функциональная его часть, но тем не менее)?

Мудборд для проекта навигационной системы / II курс
Мудборд для проекта навигационной системы / II курс

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

Мудборд для проекта многостраничного издания / II  курс
Мудборд для проекта многостраничного издания / II  курс

По отдельности развороты выглядят интересно, но в каждом случае это определенный формат, определенные поля и отношение к ним, определенное отношение к типографике и тому, как картинки взаимодействуют с текстом. Здесь мы видим очень большое число приемов, с которыми может и смог бы справиться в рамках одного издания сильный и опытный дизайнер, но скорее всего опытный дизайнер решил бы, что он еще и умный, и ему столько приемов за раз не нужно. Даже на этапе мудборда целостная картинка не очень складывается. Понятно только (более-менее) отношение к цвету: предпочтительное ахроматическое решение, где, вероятно, иногда будет встречаться цветной акцент. Но это не точно.

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

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

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

Разработка логотипа / II  курс
Разработка логотипа / II  курс

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

Набор пиктограмм на основе разработанного знака / II курс
Набор пиктограмм на основе разработанного знака / II курс

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

Часть визуального решения проекта, все еще на основе знака выше / II курс
Часть визуального решения проекта, все еще на основе знака выше / II курс

Хорошей тренировкой будет и работа по одному-единственному референсу. Первый этап – анализ структуры референса, что он собой представляет? Какие приемы в нем есть? Какие начертания (шрифты) используются и как? Что с цветом? Как работает пространство внутри формата? Это тот самый этап анализа. Но фишка в том, что анализировать нужно не только референс, но и тот контент или структуру контента, которые у вас есть. Совершенно без разницы, какого рода носитель участвует: это может быть как что-то из старого доброго графического дизайна, так и из сферы digital.

Референс визуального решения к проекту / III курс 
Референс визуального решения к проекту / III курс 

Вот например, что мы видим на этом референсе? У нас тут два цвета, один из которых факультативен и участвует только в формировании заднего плана, второй, так сказать, рисующий. Очень мягкий визуально (за счет обилия скруглений) геометрический гротеск (это я про шрифт). В заголовке – выбивание внутрибуквенного пространства, превращение надписи в трафарет. Линейки, как элемент дизайна. Линейная графика, вроде бы плоская, но дающая ощущение перспективного сокращения. И – очень симпатичный обтравленный монохромный котик.

Один из экранов проекта с работой по визуальному референсу / III курс
Один из экранов проекта с работой по визуальному референсу / III курс

В этой работе мы видим не только буквальное заимствование из референса, но и развитие логики. Так, второй цвет теперь отвечает не только за фон, но и за не интерактивные элементы (исключения – зоны шапки и подвала). Студенты в рамках этого задания получили один и тот же прототип, но разные референсы. Можем посмотреть еще парочку.

Референс визуального решения к проекту / III курс
Референс визуального решения к проекту / III курс
Один из экранов проекта с работой по визуальному референсу / III курс
Один из экранов проекта с работой по визуальному референсу / III курс

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

Референс визуального решения к проекту / III курс
Референс визуального решения к проекту / III курс
Один из экранов проекта с работой по визуальному референсу / III курс
Один из экранов проекта с работой по визуальному референсу / III курс

Бонусом в этой задаче идет осознание роли типографики в проекте и то чувство, знаете, когда ты понимаешь, как взаимодействуют и связаны друг с другом графика и типографика. Потому что иногда (часто) референс недостаточен с точки зрения визуального описания тех элементов, которые придется использовать в макете, и приходится их додумывать с последующим анализом: а подходит ли новоиспеченный нос Петра Ивановича к глазам Ивана Петровича?

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

44
1 комментарий

крутой текст, спасибо

Ответить