Волгоград Москва (8442) 36-79-77 (495) 215-29-73

info@magwai.ru

разработка и продвижение сайтов


Разработка промо-иллюстрации для детского интернет-магазина: идея, эскиз, результат

22.02.2018

Задача: Разработать интернет-магазин детской одежды с эмоциональной (WOW) подачей контента для конечного клиента.

S_1 (14) (1)

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

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

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

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

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

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

S_Scene_03

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

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

S_Scene_08 (1)

S_Scene_02

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

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

S_Mood board Simple Style

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

Как итог — мы получили 100% попадание в цель. Эскизы преобразились 1 в 1 на уже готовой иллюстрации. Нам удалось передать всю атмосферность и премиальность реального магазина, который предстает перед клиентом при заходе на главную странницу интернет-магазина.
 

иллюстрация-главной_1024x768

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

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

S_Главная страница (Дима)

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

S_Преза главной страницы (Дима)