Как мы работаем с иллюстрациями: объясняем по шагам и показываем 3 кейса

Привет, это Antro. Чтобы оформление достигало целей бизнеса, а не было просто картинками, каждый этап должен быть закономерным. Рассказали, как мы разрабатываем иллюстрации и показали много картинок с примерами.

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

Оформление напрямую влияет на впечатление о сайте с товарами: 46,1% комментариев людей направлены на визуал. Барбара Чапарро из университета Эмбри-Риддл показала, что первое впечатление в большей степени диктуется визуальным наполнением. Тут вступает эффект ореола — когнитивное искажение, из-за которого первое впечатление формирует наше мнение о товаре или бренде.

Делимся своим подходом к иллюстрациям: объясняем, как, зачем и почему мы их прорабатываем так дотошно.

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

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

Мастхев для ТЗ мы выделяем такой:

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

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

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

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

В векторе отрисовываем скетчи в нужной стилистике. Раньше мы для этого использовали Adobe Illustrator, но со временем перешли на Figma. Это оказалось удобнее и быстрее: можно работать в несколько рук и отслеживать изменения, которые вносят другие члены команды. В итоге для Illustrator остались только особо сложные задачи.

Процесс выглядит так:

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

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

Чтобы сэкономить время, мы рисуем эскизы и показываем клиенту раскадровку. Так уже на этапе наброска мы можем сориентироваться, совпадает ли наше видение с видением клиента. Действия на анимации отдельно прописываем текстом. Когда заказчику всё нравится, прорабатываем скетчи и анимируем картинки в Adobe After Effects.

Подготовили оформление для сайта BonteQ

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

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

Обновили иллюстрации для POSH MARKET

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

Оформили сайт для Rosan Pay

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

Разработали иллюстрации для магазина и рекламные баннеры МногоСна

Для интернет-магазина МногоСна мы разработали сайт, провели редизайн и разработали брендинг для их нового продукта. Об этом у нас есть подробная статья в блоге: «Разработали одному клиенту сразу два фирменных стиля: раскрываем процесс в деталях».

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

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