(function (d, ver) { var s = d.createElement('script'); s.src = window.__specials_cdn + 'SpecialBranding/top.min.js?' + ver; s.async = true; var container = d.getElementById('special-branding-top'); if (container) { s.onload = function () { new window['BrandingTop']({ container, content: { theme: 'light', link: 'https://go.vc.ru/u3sR', text: 'Познакомьтесь с нашими проектами поближе 👀', button: 'Открыть кейсы', color: '#e6e6e6', textColor: '', img: '', }, }); }; } d.body.appendChild(s); })(document, '__specials_version' in window ? window.__specials_version : 0); (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(22537453, "init", { defer: true, clickmap:true, trackLinks:true, accurateTrackBounce:true }); ym(22537453, 'hit', window.location.href);

Как работать дизайнеру, если в задаче вообще нет ограничений

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

Алена Юрьева, веб-дизайнер digital-агентства «Атвинта», поделилась кейсом, как работать в случае, если заказчик не ставит ограничений, на примере разработки корпоративных иллюстраций для блога агентства.

Алена Юрьева
UI/UX-дизайнер digital-агентства «Атвинта»

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

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

Мне нравится прием с иллюстрациями в вебе.

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

Иллюстрации на сайте Областной детской клинической больницы
Иллюстрации для сайта Детского онлайн-лагеря

Вызов: отсутствие ограничений в задаче

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

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

Итак, что именно должно быть в наборе иллюстраций, как это должно выглядеть — все было отдано на моё решение.

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

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

Шаг 1. Разбираюсь в задаче

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

На первом этапе выделили такие ключевые принципы:

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

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

Шаг 2. Если нет ограничений, придумай их

Цель и задачи проекта я понимала. И все-таки этого было недостаточно, чтобы придумать концепцию: слишком много вариантов для решения задачи.

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

Итак, какие ограничения и подсказки у меня есть:

  • Размер иллюстраций — неясно, в каком размере они будут использоваться.
    Решение: делаю в векторной графике для простоты масштабирования.
  • Количество не ограничивается.
    Решение: создаю не законченные сюжеты, а отдельных персонажей и объекты, которые можно будет комбинировать друг с другом.
  • Содержание: что именно рисовать
    По статистике, людям более интересны люди, а не статичные объекты. Значит, нужны персонажи. Так как иллюстрации для блога — тематика должна быть связана с агентством.
    Решение: Персонажами иллюстраций будут специалисты агентства: дизайнеры, разработчики, менеджеры. С них и начну.
  • Цвета
    Берем из логотипа. Готово.
  • Стилистика: никаких ограничений, никаких подсказок.
    Решение: «добавить» их себе самостоятельно. Выбирала линейную стилистику с небольшим количеством пятен в духе современных трендов. Это позволит изображениям не так перетягивать на себя внимание от текста, как это могло бы быть с залитыми иллюстрациями, да и в целом сделает их менее грузными.

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

Шаг 3. Разрабатываю стилистическую концепцию

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

Отрисовываю один из эскизных вариантов с персонажем. Начать решила, конечно, с персонажа-дизайнера.

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

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

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

Шаг 4. Разрабатываю основных персонажей

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

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

Когда все персонажи из придуманного мной «необходимого списка» были отрисованы, нужно было делать еще какие-то элементы, но.. Но какие?

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

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

Шаг 5. Приземляю задачу на конкретные кейсы

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

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

После этого этапа кроме персонажей появились объекты вроде интерфейсов и офисных предметов. А также примеры использования элементов.

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

Уже на этом этапе отдел маркетинга смог самостоятельно использовать конструктор иллюстраций для оформления статей и постов.

Но выявились некоторые проблемы:

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

Казалось, что ходим по кругу.

Шаг 6. А что, если конструктор автоматизировать?

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

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

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

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

Итого

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

В случае с иллюстрациями я в итоге пришла к тому, что формировала задачу и ограничения себе сама.

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

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

  • Если ограничений нет, то дизайнеру нужно самостоятельно позадавать вопросы, уловить подводные камни, выяснить максимум информации и сформировать полное представление о проекте.
  • Если заказчик сразу сообщает требования, обсудить их, узнать, что за ними стоит. Возможно, некоторые ограничения не обязательны или эту задачу можно решить более эффективно.
(function (d, ver) { var s = d.createElement('script'); s.src = window.__specials_cdn + 'SpecialBranding/bottom.min.js?' + ver; s.async = true; var container = d.getElementById('special-branding-bottom'); if (container) { s.onload = function () { new window['BrandingBottom']({ container, content: { theme: 'light', link: 'https://go.vc.ru/u3sR', text: 'Познакомьтесь с нашими проектами поближе 👀', button: 'Открыть кейсы', color: '#e6e6e6', textColor: '', img: 'cba9d7af-106a-5987-b37f-a9fcea6fbfbb', }, }); }; } d.body.appendChild(s); })(document, '__specials_version' in window ? window.__specials_version : 0);
0
10 комментариев
Написать комментарий...
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Атвинта digital agency
Автор

Спасибо :)

Ответить
Развернуть ветку
Typo

Найдите противоречия в сделующих словах:
- Алена Юрьева, веб-дизайнер digital-агентства
- разработки корпоративных иллюстраций
- Алена Юрьева, UI/UX-дизайнер digital-агентства

Ответить
Развернуть ветку
Атвинта digital agency
Автор

Помогите Федору найти противоречия? :)

Ответить
Развернуть ветку
Typo

У вас в двух абзацах текста, которые идут один за другим, Алена сначала вебдизайнер, потом иллюстратор и сразу ux/ui дизайнер. 

Ответить
Развернуть ветку
Атвинта digital agency
Автор

UI/UX-дизайнер и веб-дизайнер в диджитал-агентстве - будут синонимичны. Нет разве?

И скилл в иллюстрации это, вроде, не отменяет :)

Ответить
Развернуть ветку
Typo

Диджитал генералист)

Ответить
Развернуть ветку
Атвинта digital agency
Автор

Не, именно веб :) Есть же еще логомейкеры, моушн-дизайнеры. Дизайнеры для интстаграм-историй даже бывают :)

Ответить
Развернуть ветку
Игорь Старков

А если назвать просто дизайнер то еще лучше :)

Ответить
Развернуть ветку
Атвинта digital agency
Автор

В агентствах еще есть разные дизайнеры, потому уточнили :) 

Ответить
Развернуть ветку
7 комментариев
Раскрывать всегда