Как мы рисовали пиктограммы для контекстных объявлений Бегуна

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

    imageУ Бегуна есть тип рекламных блоков, в которых показываются тематические иконки. Наш чудо-индексатор смотрит рекламируемый сайт и определяет тематику, и согласно тематике показывает иконку. Иногда индексируемый текст может не точно соответствовать тематике объявления, и поэтому нужны иконки которые не чётко показывают тему, а лишь определяют её. Аллегория должна быть верной, чтобы рубрика ремонт не показывала иконку с автомобилем, но не нужно конкретизировать, что это исключительно ремонт. Попробуете такое противоречие осмыслить?
    Алексей Шмелёв, Бегун

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

    image


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

    image

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

    image

    Далее мы принялись за скетчи, коих нарисовали великое множество. Вот лишь крошечная их часть:

    image

    Потом мы сели и за несколько недель нарисовали более сотни пиктограмм:

    image
    Фестиваль 404
    44.64
    Company
    Share post

    Comments 65

      +15
      а где же иконки для сайтов «порно секс скачать»?! :)
        +5
        а, нашел. Какие же вы…
        +13
        а теперь если убрать подписи и думаю 10% — совершенно непонятные значки.
          +4
          Так в том и задание было. Не все объявления лекго поместить в какую-то конкретную категорию. Поэтому мы специально избегали узких и однозначных метафор.
            0
            Точно.
            В приведенном автором примере мониторчик с крестиком — пришлось искать «легенду» чтобы понять что оно означает.
              +8
              А если закрыть глаза, то все 100%

              Имхо, иконки помогают и украшают. В совокупности с текстом объявления все будет ясно
                0
                +1
                Зрение плохое и долго втыкал на иконку «автозапчасти» — думал свеча лечебная нарисована.
                «Оптимизация и продвижение» очень сходна с «билеты на транспорт». Сходны до смешивания. То же самое с «уборкой» и «бытовой техникой», «Политика» — очень долго втыкал что нарисовано, думается будет отвлекать. «Спорттовары» в эскизе более понятно. «Увлечения и хобби» — это же винчестер!

                Общий стиль иконок правильный и задачу, описанную в начале топика решают.
                  0
                  На примерах показано, как будут использоваться иконки. Они будут рядом с объявлениями, то есть будут дополнять их. Свою задачу – обратить внимание на объявление они решают на 200%. :)

                  Надо понимать, что каждому пользователю привычен и понятен индивидуальный набор значков. Это связано с жизненным опытом человека, с отпраслью. К примеру – тематика «психология».
                  0
                  крутяк
                    0
                    Отличные иконки, молодцы!
                      0
                      Надо было оставить в виде скетчей. Было бы очень круто.
                        +1
                        Я боюсь, что они не к любому дизайну подошли бы. А это очень важно. И на темный фон непонятно как их класть.
                          0
                          Вывороткой?
                        +4
                        Порадовала иконка «Бытовой мистицизм». А вообще очень классно
                          +2
                          да, мистицизм прикольный. )
                            +1
                            «Продаётся замок с привидением» :)

                            0
                            ох, не думал что ваша рука к этому приложилась…
                              0
                              Эх.а как включить данный режим показа объявлений в настройках?
                                0
                                'thumbs': 1, 'thumbWidth': '55', 'fontFamily': 'arial'};
                                  0
                                  'thumbs': 1
                                +2
                                «Уборка» — вынос мозга!
                                А вообще, конечно, ребята молодцы. Как всегда.
                                  0
                                  Высос мозга! Этож пылесос! :)
                                  0
                                  Бытовой мистицизм отличный. Но не понравилась иконка Дизайнерских услуг. Скорей подходит для художественных услуг, если считать, что дизайн не связан с искусством
                                    0
                                    Да! Она у нас тяжело рождалась. Что мы только не рисовали. И ваком, и кривую безье, и карандашик. Выбрали меньшее из зол.
                                      0
                                      По-моему скетч с карандашиком и кривой безье лучше бы подошел
                                        0
                                        Это по-твоему. Но большинство просто не поймет что там изображено.
                                          0
                                          Ну да, кстати, скорее всего. Я субъективен
                                          0
                                          Много объявлений в этой тематике – интерьеры и так далее, а не только веб и иллюстрации.
                                      –6
                                      Я считаю, что это сама плохая работа Turbomilk из тех, что мне приходилось видеть.

                                      1. Иконки зачастую не соответствуют легенде.

                                      2. У иконок нет единства по плотности наполнения цветом.
                                      • UFO just landed and posted this here
                                        0
                                        Да все клево!

                                        Меня больше восхищает, что кто-то сидел и объявления по категориям раскладывал. Сразу думаешь — а вдруг не все категории учли?
                                          0
                                          Не поверите, этим занимался не один человек. :)
                                          +2
                                          Классно!
                                          Интересно, а почему в категории «спортивные товары» отказались от гантель, как изначально и планировали?
                                          Гантели, как по мне, визуально легче воспринимаются.
                                            +2
                                            Визуально легкие гантели. (записал в блокнотик)
                                              +1
                                              Я с первого раза и не понял. :)
                                                0
                                                Тоже не сразу осилил распознавание образа велотренажера. Думал, газонокосилка в анфас. Долго удивлялся, когда прочитал подпись.

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

                                              Спасибо.
                                                0
                                                Это мы рассказать не можем. Кстати, самые внимательные, наверное, заметили, что тут не все иконки.

                                                Могу в двух словах сказать, что с Бегуном нам работать понравилось — очень вменяемые и компетентные ребята.
                                                0
                                                Как всегда на высоте!
                                                Но очень уж много — легко запутаться. Что-нибудь типа здоровья, фармпрепаратов и медицинских услуг (автомобили и автозапчасти,… и… ) можно было бы объединить в одно.
                                                Коляска из «Семья и дети» очень похожа на кошелек из рекламы сбербанка ))
                                                Но, повторю — очень круто рисуете, правда! )
                                                  +2
                                                  Спасибо! Список категорий нам предоставил Бегун. Уверен, что им виднее :)
                                                    0
                                                    Эта мысль закрадывалась ко мне ) В навигаторе прогород тоже нахимичили с иконками POI — пока найдешь нужное…
                                                    +1
                                                    Можно было и сократить до групп тематик, но мы решили, что разнообразие это хорошо.
                                                    0
                                                    Красиво и со вкусом!
                                                      +1
                                                      Часть пиктограмм абсолютно не информативны, без подписей вообще не понял бы о чём речь,
                                                      а некоторые очень даже хороши.
                                                        –1
                                                        Непонятно только, чем эти иконки к Бегуну привязаны. Сем они отличаются от «фри ту юз вектор айконс» сетов от старательных европейских студентов? Вот, например: webdesignledger.com/freebies/the-best-icon-sets-for-minimal-style-web-design

                                                        Язык понятный, но сухой и неостроумный. Какбэ не мусор, конечно, но и не блестящщее решение задачи.
                                                          +1
                                                          Как же можно привязать уже нарисованный сет к нашему уникальному набору тематик? Тут нужно было именно от тематик идти, чтобы получить достойный результат. А не готовые сеты на тематики нанизывать.
                                                            +1
                                                            Я имел ввиду вторичность языка пиктограмм. И как раз от тематик пришел только смысл, иногда путаный. Ни русских, ни рекламных, ни объявлений, ни Бегуна тут нет. Теперь мы все можем рассмотреть еще один набор плоских одноцветных иконок со скругленными уголками. На троечку, короче.
                                                              0
                                                              Я вас не понимаю.

                                                              По вашему, хорошие иконки это объёмные и разноцветные? Или о чём вы говорите?

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

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

                                                                Вот iconverk.com приводят ниже, там тоже есть монохромные, для Cisco, например. Видите, у них — характер. А тут —характер? Троешная работа, троешная.
                                                                  0
                                                                  Ну по первому абзацу – это скорее для иконок приложения может быть свойственно. Это не показатель качества.

                                                                  Иконки для Циски понравились. Каждая, как логотип, продуманные. Но к сожалению, мы не видем все 300, что были нарисованы.

                                                                  Но у нас с Циской может быть разные сроки исполнения проекта, бюджет, ожидания. Может со стороны Циски там коллектив арт-директоров работал? :)
                                                          0
                                                          Градиент всё портит и иконки смотрятся на уровне школьника…
                                                          Раньше вы делали иконки намного лучше.
                                                            0
                                                            В пиктограмме оптимизация и продвижение просматривается ваша фирменная ракета)
                                                              0
                                                              Наша фирменная ракета немного другой системы. Она у нас из пакета молока сделана, а на иконке более традиционная винтажная модель. :)
                                                              –1
                                                              эх, вот тут пиктограммы самые лучшие www.iconwerk.com
                                                              А вот то что вы сделали не дотягивает, нет единого стиля в сете, гдето толщина линий по 2 пикселя и расстояние по 2, гдето по одному…
                                                                +3
                                                                Стефан из Iconwerk, безусловно, делает очень крутые пиктограммы. Мне очень лестно, что ты сравнил нашу работу с его творчеством. Да, мы не такие крутые как он, но мы будем стараться.
                                                                  –1
                                                                  Денис, ты понял почему ваши выбиваются и не выглядят как цельный сет?

                                                                  Если взяли толщину линий одну то ее везде и держите, а то какие-то в одном стиле, какие то в другом совсем. И кстати вот на превьюхе они нормально выглядят, а вот целиком выбиваются дико.
                                                                    +1
                                                                    Да, я понял о чем ты. Единство стиля — это всегда компромисс. Мы решили, что узнаваемость и читаемость иконок важнее, чем их стилевая идентичность. Пусть линия не два пиксела, а один, но она именно там и именно такая какая нужна. Тем более, что «сетом» эти иконки не работают — из них не делают функциональных тулбаров и прочего. Конкретно для этой работы не «важен язык пиктограмм». По сути это мини-иллюстрации, которые должны привлекать внимание.

                                                                    Мы уже давно отказались от жестких стилевых норм и считаем это признаком своего роста. Во всяком случае раньше строгое соблюдение концепции и стиля приносили нам только проблемы.
                                                                +1
                                                                Хобби — это потрошённый хард?
                                                                  0
                                                                  Это проигрыватель пластинок. Наш дизайнер улекается диджейством, поэтому он лоббировал это хобби. Не хуже, чем марки.
                                                                  +1
                                                                  Молодцы! Красиво! Достойно! Наконец-то! :)
                                                                    –1
                                                                    Конечно сейчас посыпятся минусы. Но я все же выражу свое мнение.
                                                                    Что вообще нового в создании иконок?
                                                                    Посмотрите мы нарисовали папку, а вот мы тут нарисовали человечка он у нас обозначает юзера.
                                                                    Ассоциации для иконок давно уже известны и велосипед тут не изобретешь.

                                                                    Вот если бы вы создали иконку под новую технологию или функционал. Было бы интересно.
                                                                      0
                                                                      А хуже всего то, что судя по коментариям, этот набор стандартных одноцветных ничем не примечательных, засвеченных дурацким градиентом с блевотным цветом иконок понравился людям.
                                                                        0
                                                                        Это что же вы такое едите, что у вас блевотина такого цвета?
                                                                        0
                                                                        Определенно пиктограммы вписались как никогда круто! Цвет зеленый уж очень ядовитый какой-то только ;)
                                                                          0
                                                                          Отличные пиктограммы, гораздо лучше предыдущих!!!:)

                                                                          Only users with full accounts can post comments. Log in, please.