войти зарегистрироваться

Parcsis/Turbomilk

Parcsis/Turbomilk
хабраиндекс
158,05

Как мы придумывали и рисовали интерфейс Иконзы

Для нашего собственного проекта Иконза нам понадобился интерфейс. Очень хотелось, чтобы он получился красивым и модным, а еще удобным и простым в использовании. Чтобы при одном взгляде на него дух захватывало и все бы говорили: «Ого! Какой хороший интерфейс!». Так как мы были клиентами сами у себя, то у нас не было никаких ограничений — можно было делать все что угодно.

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

image

Следуя современной моде, мы выбрали готичный черный цвет за основу и темно серые элементы управления. Во-первых, они красивые. А во-вторых, они не отвлекают от главного – от иконок.

image

Основная часть интерфейса реализована при помощи canvas и JS библиотеки Mootools. На стороне сервера используется Django.

image     image

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

image

Чтобы было интереснее подбирать иконки, мы придумали забавных и весьма болтливых персонажей — червяка и крота. Они появляются снизу экрана и комментируют действия пользователя.

image

Интерфейс получился красивый и удобный в эксплуатации. Множество людей уже воспользовались Иконзой и получили неземное удовольствие.

image

Важное замечание! Статичные картинки не передают полный спектр ощущений. Наши веб-технологи использовали всю мощь совремнных технологий и сделали так, чтобы интерфейс красиво и плавно реагировал на действия пользователя. Посетите Иконзу, не пожалеете!
+46
29 июля 2009, 12:02
8
kortunov

комментарии (116)

  • Здорово. Еще было бы прикольно, если бы по клику на червяке он выдавал какие-нибудь перлы :)
    • аки шузлики :)
    • perl -e '$??s:;s:s;;$?::s;;=]=>%-{<-|}<&|`{;;y; -/:-@[-`{-};`-{/" -;;s;;$_;see'
    • «Zug-zug» и «Stop pocking me!» а потом взрывался бы.
  • красиво и качественно сделано, молодцы!
  • Сайт вообще шикарный.
    Денис, а для чего именно canvas вы там использовали?
    • В пост призываются наши веб-технологи! Я в этом ничего не понимаю, я же дизайнер.
    • на canvas-е отрисовываются сами иконки
    • В основном для отрисовки интерфейса, а также сам механизм перекрашивания иконок с его помощью реализован.
      • О, а можно поподробнее про отрисовку интерфейса? А то не приходилось сталкиваться с подобным, а так все шустро работает. Какие-то особые преимущества?
        • В нашем случае преимущества были такие:

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

          Чтобы этого не делать используется 1 класс, который и рисует на канве все эти плашки.
          • Интересно.
            Тогда такой вопрос — а на сколько этот «ваш случай» частный.
            То есть, для более общего случая у этого решения есть существенные недостатки?
            • Да не очень частный. Имеет смысл использовать такой подход, если у вас есть дизайн с какими-то однотипными элементами, которые нельзя реализовать без использования графики, например скругленные углы, тени, градиенты.

              Не могу сказать что есть какие-то недостатки. Вопрос скорее в необходимости использования в каком-то конкретном случае.
              • Ну тут, я бы сказал, вопрос не в необходимости, а в оптимальности.
                Как раз меня это заинтересовало как _возможная_ замена графики для скругленных уголков в однотипных блоках в интерфейсах систем. Вот и пытаюсь выяснить подводные камни.
                Thanx за ответы.
                • Да, именно в оптимальности.
                  На счет интерфейсов, есть одна библиотека — MochaUI, работает по тому же принципу и позволяет делать различные веб-интерфейсы, возможно пригодится.
                  • Здорово! Еще один вопрос по теме — а как у такого подхода с кросс-браузерностью?
                    • С кроссбраузерностью все нормально. При желании, можно даже под IE6 сделать. Есть excanvas для IE, я использовал moocanvas (это тот же excanvas только переписанный на mootools). Остальные браузеры более-менее поддерживают его и без костылей, поэтому использовать можно достаточно спокойно, по крайней мере когда нужно 2D, с 3D все намного сложнее.
                      • Ну, 3D не нужно (для этого есть Flash, Silverlight), IE6 — тем более :)
                        Сэнкс!
  • может пора двигаться дальше?..
    • Согласен. Мы пытаемся двигаться. Но и из Иконзы нужно выжать все соки :)
      • Выжмите ещё иконок 50.
      • Сервис хороший, но я им не пользуюсь. По м2 причинам:
        1. нет возможности скачать иконки одной картинкой. (главное)
        2. нет возможности создать вариант :hover. (второстепенное)
        • А кнопка «Скачать все иконки» для кого?
          • Не понимете, не одним файлом(архивом), а одной КАРТИНКОЙ. image mapping.
            • а принт-скрин тут точно не помогает?
        • 3. Очень ограниченный набор иконок.
          4. Стиль весьма специфичный.
          • 3. Работаем
            4. Работаем

            Еще мы ищем спонсора, чтобы работать быстрее.
        • Спасибо за замечания, думаю в следующей версии добавим такие возможности или что-то подобное.
  • НЛО прилетело и опубликовало эту надпись здесь.
    • А почему пиар черный? Вроде наоборот — белый и пушистый.
      • НЛО прилетело и опубликовало эту надпись здесь.
        • Вы не совсем верно понимаете значение выражения «чёрный пиар»
          Это называется «Статья на правах рекламы» :)
        • Баннеры — это хорошо. Они помогают хабру жить и развиваться.
          • НЛО прилетело и опубликовало эту надпись здесь.
            • 4 статьи за 2 месяца. Не, конечно они не очень интересный и высосанные из пальца, но все же)
    • +1 К турбомилку из-за этого плохое отношение лично у меня.
  • новые иконки планируются?)
    • Уже в работе. Ожидайте в ближайшее время. Потом еще «новый стиль» думаем сделать. Правда у нас дебаты — какие они должны быть. Я предлагаю делать «плоские» иконки, а коллеги в стиле мак ос.
      • Продолжайте настаивать на плоских :)
      • А сделайте вкладочки, для выбора стиля.
        Насколько я помню, на сайте у вас болтался тутор по созданию многослойных иконочек… ммм, что если добавить отключаемые слои («добавить объем»), которые будут добавлять объем? Конечно, это нереально сложно, но было бы великолепно.
      • Я за мак ос! даеш мак ос!
  • Не в обиду, но персонажи вашей Иконозы вызывают разжижение мозга. Разве что Морковка Ок, но только для детского сайта, а не для этого.
    • Какая уж там обида. Разжижение мозга было главной целью в процесс придумывания ётих самх персонажей. Извините, а вам не кажется, что Червяк похож на хуй?
      • Я стеснялся это сказать, но именно так
      • я думал сначала что это кит )))
        • Внимание: второе матерное слово в корпоративном блоге.

          Это какой-то очень хуевый кит получается.

      • а у крота глюки с глазами… или то ухо?
      • Стоп. Так это не хуй?
        • Хуй, конечно. Ты только Денису не говори, пускай думает, что червяк.
          • Вообще идея положить на хабр сверху говорящий хуй мне кажется очень перспективной.
            • Ты потише тут. Хабр тоже думает, что это червяк.
            • смялся!
            • смеялся в смысле!
    • НЛО прилетело и опубликовало эту надпись здесь.
  • да, действительно очень хороший, удобный и полезный сервис.
    • особенно понравилась фраза
      При всем при этом иконки в «Иконзе» совершенно бесплатные, делайте с ними все что хотите. Только одно условие: умоляем, не помещайте малиновые иконки на ярко-зеленый фон.
      • Разумеется, это было первое, что я сделал. :)

        Жаль, что червяк в этом случае никак не реагирует.
  • А я червячка и не видел.
    Хотя не однократно пользовался вашим ресурсом.
  • Грамотный рекламный пост, что ж сказать. Это не оскорбление, это похвала. Так надо уметь.
    А то был тут один пост ( к сожалению не могу найти, назывался «Офисные игры» ) с рекламой каких то курсов, от которого аж воротило.
    А сервис ваш — безусловно хорош, хотя иконок очень мало. ИМХО, но если бы было больше стилистически разных иконок, вы бы могли вызвать у посетителя впечатление создания индивидуальности иконок, которые он там накрутил.

    В любом случае удачи вам, проект хороший, а вы — молодцы!:)
    • НЛО прилетело и опубликовало эту надпись здесь.
  • НЛО прилетело и опубликовало эту надпись здесь.
  • При отключенном JS (Noscript так отработал) поле с набором иконок увеличено вдвое по высоте, иконки продублированы (верхний блок из noscript не виден, но кликабелен).
    • Ебанись! А через консоль и wget вообще ХЗ что показывает! И в ie 4 не работает!
      • Включаем моск (если это возможно) — я говорю о том, что на сайте есть блок NOscript (это тэг такой, если что), и он не работает как надо, если отключен JS. Если уж пытаетесь сделать для тех, кто не использует скрипты, то делайте это грамотно.
    • Да есть такой баг, пока не поправили, но поправим обязательно. Спасибо.
  • Шикарная работа, так держать!
    (понравилось как только в первый раз увидел, теперь рекомендую знакомым)
  • Вам не кажется, что ваш червяк страдает гидроцефалией?
    • Это не водянка.
      • Неужели это волчанка? Мои мечты сбылись!
  • Почерк на первой картинке 1 в 1 мой :-)
  • А все иконки представлены на сайте, или их можно листать? Я не увидел. Просто если сайт (мудной, красивый и все такое) создавали ради раздачи одного набора иконок, то… то я от комментариев воздержусь =)
    • Не понял смысла комментария. Можно как-ньть более доходчиво перефразировать?
      • одного набора иконок мало
      • Может стоит разрешить другим пользователям добавлять свои иконки? Хотя бы через вас, с жесткой модерацией.
        • Думали, но кажется желающих наберется ровно ноль!
          • А если разрешить авторам ставить ссылочки на себя?) Вы же ради пиара, они тоже могли бы.=)
            • Там всё пипец как сложно нарисовано. Сейчас сделаем еще два стиля. Они проще будут и, красивее. Вот тогда в твоей мысли и вернемся.
      • Овчинка выделки имхо не стоит
  • Bad Gateway :(
  • «Мы взяли доску, цветные маркеры»

    какая-то помятая доска, ИМХО, если судить по картинке :-[
    • :)) опередил чуть-чуть :)
    • Доска бывает с бумажками, называется флипчарт. Не тупите.
      • очень лестно заявление сотрудника компании в таких тонах… нда
        • Ок, простите. Не тупите, пожалуйста. Так лучше?
          • Хорошо Вы представляете компанию, своей грубостью и резкостью. Молодцы, вперед :)
            • Не поверите, но это работает. Это обычная честность. Мы не хотим работать с людьми которые тупят или сочувствуют тем, кто тупит. И мы этого не скрываем. Происходит фильтрация. В итоге наши клиенты — вменяемые люди с нормальным чувством юмора.
              • Я знаю что это работает, так делают на западе. Громко, открыто, вызывающе. Но есть подходы, которые работают лучше. Плюс люди не обязаны знать, что у вас там за доска и какие доски бывают. Или целевая аудитория иконзы — производители этих досок? :)
                • Ну я просто не стал ходить вокруг да около и подбирать верные формулировки, а сказал так, как я действительно думал. Что я сделал не так? Более того, я уверен, такое мое поведение никак не помешает нашему бизнесу, а возможно даже ему поможет.

                  Пост-то вообще не про доски, но нашлось три хомячка которые «вывели меня на чистую воду». Я высказал свое отношение к такому поведению и ни о чем не жалею.
                  • Не мне судить и не буду, просто мое ИМХО что лучший вариант был бы не отвечать на такие комментарии, и не уводить обсуждение в левое русло.
  • «Мы взяли доску, цветные маркеры и набросали прототип будущего интерфейса.»

    А на картинке фотография листа бумаги.
    • Вы действительно считаете это серьезным недостатком?

      • Серьёзный недостаток, что она не выглядит вот так:

  • Пишите про маркеры и доску, фотография листа бумаги. Который наверняка перед самой статьей был нарисован.
    Сайтом пользовался один раз. Идея неплохая, но кол-во иконок слишком уж скудное.
    • Вот черт. Все опередили с доской)
    • Это доска и маркеры.
  • интересный проект, согласен с предыдущими ораторами по поводу ограниченного количества наборов, но «Москва не сразу строилась» (с)
    растите!
  • прикольно, можно еще прооптимизировать загрузку сайта. и вот еще что заметил

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

      А что именно по поводу оптимизации загрузки можете посоветовать?
      • это явно не кешь, я пропускал ваш сайт через свой оптимизатор. в нем я и заметил проблему.

        по поводу оптимизации, все как обычно, — склейте скрипты, картинки. добавьте gzip. — у вас 473!!! запроса к серверу.
        • Действительно, это был не кеш. Спасибо, поправил.
          • попробуйте использовать base64 для картинок, чтобы уменьшить кол-во запросов.
  • ах эта розовая штука в шляпе и с лапками — червяк :) Вы мне открыли глаза, а-то я терялся в догадках, честно)
    • Я тоже в шоке! Я как-то не терялась. Обозначила для себя «розовое нечто» и забыла, долго не могла понять: а где же червяк, о котором все говорят. Теперь я знаю. С морковкой проблем не было.
      • C кротом, пожалуй, тоже) Кроту — зачет.
  • Очень удивился когда узнал что это червяк, а не какойто космическо-фантастический персонаж как я думал по началу
  • Надо было у ТМ заказывать, там посильнее ребятки в плане архитектуры.
  • Разработка чудесна.
    Надеюсь на основе разработки вам удастся сделать чудесный сток.
  • У соковыжималки сок идет еще о приземления моркови в нее. Fail :)
  • Видео к иконзе меня просто пиздец, как уничтожает.
  • сервис классный, персонажи ужасные =)
  • А я когда увидел ролик про упоротую морковку, подумал «хорошо, что ТурбоМилк так не делает». Не знал я, что ТурбоМилк ИМЕННО ТАК и делает.
  • пощадите зомби возле ящиков, сотрите ту ****** рекламу из их разума
  • Гм. Как минимум, ожидал несколько сотен, а то и тысяч иконок. Красивых. В разных стилях. Чтобы действительно, почти на каждый случай.
  • Сервис отличный, но вот нашел какой баг. Я открыл сайт в Chrome, загрузка прошла, а фон просто серый, т.е никаких иконок не увидел. Думал баг Хрома, открыл в FF 3.5.1 тоже самое. Загрузка успешно фон серый. Оказалось мой Outpost Firewall просто распознал иконки как рекламу и заблокировал. Добавил сайт в исключения и все нормально. Отображается как в Хроме, так и в FF
  • А сейчас оно вообще не отвечает:
    Bad Gateway.
    The proxy server received an invalid response from an upstream server.
    Apache/2.0.54 Server at iconza.ru Port 80
Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.