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

О заказчике

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

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

Этапы при разработке

Предпроектное исследование

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

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

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

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

Создание фирменной иллюстрации для главной страницы

Генерация идей или брейншторминг

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

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

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

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

Скетчинг, а потом снова брейншторминг

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

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

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

Создание итоговой версии иллюстрации

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

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

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

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

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

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

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

Гармонично вписываем иллюстрацию на главную страницу

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

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

Результаты

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

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

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