jukovТекст: Дмитрий Жуков, арт-директор стартапа «Купи батон!», арт-директор дизайнерской команды 5EVEN, директор портала Bodybeat.

Недавно я писал о том, как мы в Батоне создавали новую иконку приложения под iOS 7, и что у нас из этого вышло. Статья получилась интересной, читатели оставили много комментариев со своими мнениями, получилось очень здорово! Я полдня внимательно следил за сообщениями, было интересно узнать, какая иконка наберёт большее количество голосов. В итоге с большим отрывом победил вариант №1, что меня совсем не удивило. Теперь же мне хочется рассказать, почему эта иконка получилась именно такой, и заодно разобрать один из предложенных в комментариях вариантов.

Вариант №1

История началась в декабре прошлого года. Сижу я, никого не трогаю, как внезапно Сергей и Саша (прим. редактора: Сергей Булаев и Александр Салмов, совладельцы «Купи батон!») сообщают мне, что надо рисовать новую крутую иконку. По их лёгкому стеснению я понял, что текущий вариант с пакетом перестал их удовлетворять чуть более, чем полностью. Как гром среди ясного неба буквально! Неделю я ничего не делал, переживал такой удар и думал, что же мне предпринять. Я всё ещё считал, что нынешняя иконка — верх совершенства и соответствия дизайнерской идеологии iOS 7 и текущему дизайну «Купи Батон!». Максимальное изменение, на которое я был готов пойти — убрать нижнее расширение пакета, оно и правда получилось странное и несуразное.

baton2-01

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

  1. доработка старого пакета;
  2. цветовое кодирование;
  3. просто яркая и запоминающаяся иконка;
  4. адаптация иконки «Батона» для Андроида.

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

baton2-02

«Рисую какую-то гадость!» — подумал я. По-хорошему, надо стереть всё и начать с чистого листа, но последняя иконка получилась вроде бы неплохой, разве что слишком суетной. Сузим число направлений до двух:

  1. цветовое кодирование;
  2. просто яркая и запоминающаяся иконка.

Хороший момент, чтобы разобрать один из предложенных читателями МакРадара вариант иконки и описать, что лично мне в нём не нравится.

Для начала расскажу историю. У меня есть знакомые дизайнеры, которые раскладывают иконки на экранах айфона не по категориям или частоте использования, а по цвету иконки. С одной стороны, это достаточно логично, а с другой, наводит на мысль о том, что дизайнеры иконок восприняли стиль, предложенный Apple для iOS 7, немного однобоко. Лозунг «давайте сделаем что-то плоское и одноцветное» буквально захватил умы дизайнеров иконок и приложений.

Вариант читателя

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

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

Обратимся к статистике, матери всех наук. Вот такие продукты формируют десятку самых покупаемых продуктов в США:

  • Milk (Молоко)
  • Eggs (Яйца)
  • Bread (Хлеб)
  • Bananas (Бананы)
  • Butter (Масло)
  • Cheese (Сыр)
  • Potatoes (Картошка)
  • Onions (Лук)
  • Toilet paper (Туалетная бумага)
  • Apples (Яблоки)

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

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

  • Milk
  • Eggs
  • Bread
  • Bananas
  • Butter
  • Cheese
  • Potatoes
  • Onions
  • Toilet paper
  • Apples

Мы хотим использовать одну иконку во всём мире, поэтому нам нужно выбрать что-то совершенно однозначно узнаваемое и интернациональное. Хлеб, молоко и (!!!) туалетная бумага.

Далее нам предстоит не простой процесс выбора формы для оставшейся троицы, ориентируясь на два целевых рынка: США и Россия.

Молоко

Milk

Russian Milk

В Америке, где существует более богатая культура упаковки, можно встретить молоко, упакованное в классические стеклянные бутылки. У нас похожую форму имеют пластиковые бутылки, которые используются наравне с тетра паком. Аналогичная бутылка была и на самой известной иконке «Батона», откуда позже перекочевала на иконку Андроида и новую иконку для iOS 7. Так что молоко оставляем без изменений.

Хлеб

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

Туалетная бумага

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

goods

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

baton2-08

Вместо послесловия

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

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

Идеальный результат

Надеюсь, яблоки никто не стесняется покупать? :)

© Дмитрий Жуков, «Купи батон!».