Skvot

Mag

Skvot              Mag Skvot Mag
Курсы по теме:
Четыре шага арт-дирекшена

Как создавать вне правил.

card-photo
card-photo
Саенко Катя

автор в SKVOT

Переехать в Нидерланды из Новой Зеландии, чтобы сделать проект об истории Амстердама и собирать награды в креативном диджитал-агентстве? Это сделал арт-директор студии Resn Маркус Браун с таймлесс дизайн-идеями, которые уже получили «Каннских львов», FWA, Awwwards и карандаши D&AD.

Маркус поделился своим видением и опытом арт-дирекшена в выступлении на Awwwards, а мы пересказываем самое полезное.

 

Эмотивность — ключ к хорошему дизайну

Каждый день мы сталкиваемся с тонной эпизодического контента, который «живет» 10 секунд — и забывается. Чтобы он все-таки оставался в памяти, он должен быть эмотивным. Если человек чувствует радость, удивление, интерес к продукту, он уже с ним взаимодействует.

Начиная любой проект, нужно задать себе вопросы:

1. Как сделать что-то впечатляющее?

2. Как сделать что-то красивое?

3. Как сделать что-то запоминающееся?

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

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

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

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

Не все пользователи — дизайнеры

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

Погружаться в новое для себя очень важно. Пример такого погружения — сайт-путешествие Canals из четырех частей о каналах Амстердама. Он сделан с акцентом на арт-дирекшене и типографике.

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

Четыре шага к созданию сильного визуального продукта

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

РИСЕРЧ

Чтобы собрать информацию для Canals, пришлось провести ооочень много времени в библиотеке. Нужно было выбрать ключевые особенности Амстердама, которые выделяют город среди других. Стало ясно, что Амстердам:

  • канонический нидерландский город, известный во всем мире
  • очень старый, первые упоминания о нем появились в начале XII века
  • либеральный, исторически-современный, с жителями 170 национальностей


Другими словами, Амстердам — идеальный баланс старого и нового, окутанный водой со всех сторон. 

ПОИСК ИДЕИ + СОЗДАНИЕ КОНЦЕПЦИИ

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

#1. Сделать сайт каноничным для «своих» и впечатляющим для остальных. Сначала была идея сделать основным цветом светло-голубой. Но он выглядел слишком пресно. Вдохновение стали искать в самом ярком символе Амстердама — его флаге:

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

#2. Передать гармонию нового и старого. Когда палитра заработала, возник новый челлендж: сбалансировать историческое с современным. 

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

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

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

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

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

Главное — чтобы все элементы в итоге работали вместе. Нарушают ли они при этом какие-то правила, совсем не важно.

СОЗДАНИЕ ЦЕЛОСТНОСТИ

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

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

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

Если кратко

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

Шрифт вполне может стать главным элементом проекта. За последние 5–10 лет веб-типографика настолько эволюционировала и появилось столько крутых словолитень, что теперь выбор уже не в рамках «шрифтов с засечками и без». Новые шрифты действительно влияют на смысл проекта и его tone of voice. 

Главное — не ограничиваться только тем, что есть, а неистово экспериментировать.

Поделиться материалом
РАССЫЛКА SKVOT

Раз в две недели мы отправляем новые публикации и анонсы курсов на почту