Процесс. Создание иллюстрации для цифрового продукта

Создание иллюстраций для цифрового продукта — многоступенчатый процесс на стыке различных дизайн-навыков. Рассмотрим его основные этапы.

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

1. Сбор информации и анализ

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

Должны быть ответы на следующие вопросы:

• Какие задачи решают иллюстрации в конкретном месте?
• Зачем вообще иллюстрации продукту в целом?

2. Продумать вёрстку конкретного экрана

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

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

3. Найти референсы, сделать наброски, обсудить

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

При презентации работы важно:

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

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

Вот более-менее готовое изображение. Визуал пока не комментируй (понятно, что над ним надо работать). Мне кажется композиционно и по смыслу всё красиво получается:

• В центре большая плиточками с нашими продуктами(это то, что мы продаём, поэтому это важно).
• Слева графики и важные цифры, справа экран с кодом.

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

Что думаешь?

4. Сделать более проработанную версию, обсудить

Тут просто: нужно рисовать и учитывать идей, которые появились в ходе обсуждения.
И ещё раз презентовать, обсудить.

5. Дошлифовать

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

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

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

6. Отправить в разработку

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

Tags: дизайн, презентация, иллюстрация