company_banner

ICQ Contest. Итоги конкурса на редизайн мобильного приложения



    В начале декабря мы анонсировали мегаконкурс на редизайн мобильной ICQ. С каждым днем он набирал обороты, работы поступали все интенсивнее, и к завершению, 21-го февраля, у нас уже было 88 работ! Мы получили несколько интересных интерфейсных и идеологических решений по видеосвязи, и бонусом любопытные параллели с трендовыми сервисами. Было также и сказочное безумие с радужными единорогами в космосе, которого мы с нетерпением ожидали.

    Задача


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

    Цель


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

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

    Жюри


    Оценивали работы дизайнеры и менеджеры ICQ. Павел Лоуцкер и Константин Рубцов (менеджеры продукта). Коля Кучкаров (дизайнер) поставил очень много минусов, Джо Макгрин (дизайнер) рассказал о логотипах и прошелся по троллям, и я, Александр Сметанка (продуктовый дизайнер), взял на себя UI/UX и прочие штуки. В оценке нам помогали организаторы конкурса Вера Бондарева (дизайнер) и Дима Плешаков (менеджер по продукту).

    Работы


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

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

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

    Нетривиальное видеообщение


    Лидерами стали идеи, которые выходили за пределы привычного интерфейса видеозвонков (как проработанные концепции, так и отдельные интересные механики).

    Danial Siddiki предложил «Моменты» — общую видеоленту, из которой можно перейти к общению с автором. Хорошо акцентировал внимание на кнопке в таб-баре, которая запускает камеру.



    Из губительных минусов — доступ к просмотру «Моментов»: он слабо заметен, расположен далеко не «под пальцем» как хотелось бы. Присутствует избыточное при каждодневном использовании препятствие «Введите название момента».

    Александр Кочеванов тоже сделал «Моменты», но в другом формате: они доступны из профиля, а также на интерактивной карте. Под моментами можно оставлять комментарии.



    Misha Bilenko миновал привычный сценарий звонков при помощи быстрого включения видео во время чата.



    Yarik Bright захотел записывать звонки и трансляции.



    Oleg Mishkorudnyy создал подборку из снимков, сделанных во время звонка, которая приходит в чат после его завершения.



    Больше всех оторвался с интерфейсом любимчик Russian Design Cup Denis Shoomov. Сделал много всего, начиная с шикарной презентации и заканчивая анимациями. В случае с видео предложил ряд форматов.



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



    Баблчат — пространство с бесконечными (что бы это ни значило) видеочатами и возможностью сортировки бесконечности.



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



    Видеоконкурсы.

    Трансляции


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



    Вариант трансляции, который отличается не только цветом баллов, предложил Dmitriy Ivanov. В его версии трансляция ведется в режиме SplitView с двумя одновременно включенными камерами.



    Denis Shoomov сделал похожую на интерфейс Apple Watch витрину.



    Видеозвонок


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

    Например, некоторые попытались скрасить общение видеоэффектами.

    Alex Ovs и Vladislav Solomaha добавили эмоциональных масок в звонки и сообщения



    Danial Siddiki предложил сердечки и совместный просмотр контента.



    Pavel Zametniy разрешил рисовать во время звонка.



    Путь к видеообщению


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

    Отвязнее всех оказался Arsen Kolyba с ностальгическим ламповым дизайном.



    Ico Maker с гигантоманией еще выгодно пронес ее в чат.



    Очень просто и приятно у myinterface, опрятно у Danil Siddiki и Виталий Тамашин.



    Сложнее стало из-за иконок и деталей у Dmitriy Ivanov, Kirill Yarovenko и Pavel Karpov



    Были еще игры с превращением логотипа в камеру и контрол. Так сделали

    Vova Sharapov и Edward B.



    Еще один очевидный прием — вынесение камеры в список чатов или контактов. Им воспользовались Dmytriy Kravchenko Pavel Anpleenko Khokim Sharipov Alex Martinov Alex Kurlaev Ivan Demenev.



    Fliqle, как и Pavel Anpleenko выше, тоже добавил камеру и определил пространство вокруг иконки, сделав из нее довольно крупную кнопку, что хорошо.

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

    Чат-лист в виде карточек — не единственная идея, но на темном фоне и с цветными полосками получилось довольно стильно.



    Немного о карточках


    Кстати, о карточках. Они в тренде, их используют много и по-разному, не ограничиваясь тем, что предписывают гайдлайны material-дизайна.

    Sascha Yeryomin отлично выделил новые входящие и использовал карточки в чате. Выглядит как игра!

    К слову, он один из немногих, кто не сделал красную кнопку во время звонка (об этом ниже).



    Slava Kornilov использовал карточки повсеместно, особенно привлекательно получились лайвчаты и трансляции.



    Angela Rybina использовала карточки для просмотра людей и в целом сделала интересный поиск.



    Kirill Yarovenko, Fliqle, Александр Кочеванов и Pinkten применили карточки в звонках.



    Ilya Gruzhevski заполнил карточками звонки и трансляции, получилось цельно и приятно.



    Евгений Першин применил карточки в звонках и витрине чатов.



    Андрей Иноземцев использовал прием в презентации и эффектно оформил витрины лайвчатов.



    Поле ввода


    Изменить поле ввода тоже может быть выгодным решением. Самые смелые смогли на этом сыграть.

    Vladislav Mikhailov сделал звонок возле поля ввода.



    Сразу несколько участников для быстрой отправки видеосообщений добавили камеру с соответствующей иконкой: Slava Kornilov (летающие исходящие бабблы с неоновой подсветкой!), astract (andr.novojilov) и Vyacheslav Nazarov.



    Самое интересное с полем ввода сотворил Denis Shoomov. Он разрешил из поля ввода делать что угодно и (внимание!) не создал второй ряд кнопок под ним, а совсем убрал текстовое стандартное поле, сделав из него кнопку поменьше (поле ввода, по сути, и есть кнопка, большая).



    Красная трубка


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

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

    Например, у Nikita Kokarev, Roman Kryzhanovskyi, Sergey Korneev. Ну вы поняли.



    Bogdan Pavlik, Extremal и Nick Voloshyn сделали сияющее завершение видеозвонка.



    Alex Bogomazov изобрел нетривиальное закрепление собеседника к краю экрана, но трубку переизобретать не стал. Теперь это чемпионская трубка!



    Даже в достаточно нагруженных решениях трубка в центре всего — так у Grisha Uglanov.



    Nazar Moravskyi поступил иначе и поднял завершение звонка в правый верхний угол, может уже и далековато.



    Эстетика, занятные детали и космос


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



    Slava Kornilov сделал все приятно и навел лоск, но логика страдает. Интересный ход с градиентом при выборе действия со звонком, но неясно, как это работает. Похоже, смахиванием можно поменять кнопки.



    Китя Тороповский порадовал непостижимыми единорогами в космосе. Во-первых, это красиво.



    Igor Kus предлагает вращать барабан, чтоб найти знакомства.



    Leon Bakadorov добавил в фотографии интерфейс. Очень много красивых фотографий нашел, разных!

    Увы, таких красивых фото нет у 99,99% пользователей. Всегда нужно стараться работать с реальным контентом.



    Жесть


    Таб-бар с яйцами от Саша Красный.



    Pavel Anpleenko покорил наши умы.



    Ниндзя-свайп от короля свайпов Daniil Antipin.





    Ihor Mikhailov …



    Alex Kurlaev



    Edward B. напомнил все былое! К слову, многие наши пользователи уже не знают, что такое было, они молоды и юны.



    Логотип


    Многие ребята пронесли идею видеообщения в логотип. Отсюда вполне ожидаемые метафоры — камера, кнопка Play, объектив и диафрагма, скрещенные с цветком.



    Ностальгические диафрагмы от Vyacheslav Nazarov и Den Kulinich.



    Хочется отметить дизайнеров, которые попытались сделать что-то совсем странное.

    Ivan Baryshev, Alexander Dadaev, Alexandr Pesenka, Vadim Zlygastev.



    И наш бесспорный фаворит Pavel Anpleenko. Так цветок еще никогда не развевался!



    Интересная подача



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



    Eugene Kazakov подкупил визуальным подходом к концепту.



    Denis Shoomov сделал все, что было можно, и даже больше: классные анимашки, хороший промо-сайт, все описал как следует. Умничка, в общем!



    Самую колоритную презентацию сделал Андрей Кравчук. Трэш-анимация и 8-битные нотки сделали свое дело и покорили сердца любителей «Поллитровой мыши». На стиле! Фитц одобряет.



    www.facebook.com/dlyareganasaytah/videos/1710084605871808

    Победители


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

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

    1–е место: Denis Shoomov



    Очень масштабно и качественно подошел к делу и проделал огромную работу.

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

    Отдельного внимания заслуживает роскошный сайт-презентация. Донес все идеи, разложил по полочкам, сопроводил прекрасными анимациями, иконками, гифками. Огонь!

    Минусы

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

    Есть придирки и недочеты. Смелый дизайн, безусловно, прекрасен. Но важно не переборщить со смелостью. Ретрограды могут назвать приложение слишком веселым и ветреным, а кого-то оно может просто отпугнуть. Можно придраться к метафорам некоторых иконок — над ними нужно еще серьезно поработать. Особых проблем не возникло, но иногда приходилось разбираться что же это может значить. Самое удивительная недоработка это усложнение отправки фрагмента. Быстрое начало съемки и катастрофический процесс с несколькими итерациями до видео-сообщения в чате. “Загрузка” в процентах свела на нет все старания. Для каждодневной функции это провал.

    2-е место: Danial Siddiki



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

    Минусы

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

    3-е место: Misha Bilenko



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

    Минусы

    Можно придраться к сомнительному расположению контролла, включающего видео в чате. Исчезание части сообщений во время звонка довольно внезапно и обескураживает.

    Выводы


    Работ оказалось на удивление много. Оказалось, что даже собрать их непросто: они были отправлены на конкурс не через rebound в Dribbble. В итоге мы собирали работы с различных файловых хостингов и сервисов. Похоже, механизм проведения конкурса оказался не так прост, как казалось. Спасибо энергичному Юре Ветрову за помощь в организации конкурса, сгладил многие углы.

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

    Список участников
    Саша Красный fotki.yandex.ru/next/users/sashkakrasniy/album/504265/view/1525623?ncrnd=9472
    Влад Qdesign bit.ly/1KJO2FA
    Михаил Шунин img-fotki.yandex.ru/get/4009/154870324.0/0_160866_7b95be2b_orig
    Владимир Меркушев 13iangel.deviantart.com/art/ICQ-redesign-for-iOS-577364510
    Pavel Anpleenko www.behance.net/gallery/32595947/New-style-design-ICQ
    Angela Rybina www.behance.net/gallery/34023672/ICQ-Redesign-Concept
    Taras Shypka www.behance.net/gallery/32768219/ICQ-Redesign-Concept-of-iOS-App
    Pavel Karpov www.behance.net/gallery/33787796/ICQ-Redesign
    Ilya Gruzhevski www.behance.net/gallery/33803116/ICQ-App-Redesign-Concept
    Arsen Kolyba www.behance.net/gallery/33932972/ICQ-redesign-contest-application
    Daniil Antipin www.behance.net/gallery/33220431/redizajn-mobilnoj-ICQ
    Bogdan Pavlik www.behance.net/gallery/33785122/ICQ-iOS-App-Redesign-Concept
    Kirill Yarovenko www.behance.net/gallery/33680852/ICQ-Redesign-Contest
    Виктор snovaON www.behance.net/gallery/33512191/Redesign-For-ICQ-messenger-2016
    Alex Tokker www.behance.net/gallery/33989698/ICQ-Videocall-Redesign
    www.behance.net/gallery/33882426/ICQ-Competition-Redesign
    Alina Holub www.behance.net/gallery/33913746/ICQ-Android-App-and-Icon-Redesign-by-Alina-Holub
    Вадим Шатилов www.behance.net/wip/1668162/2830442
    Nazar Moravskyi dribbble.com/shots/2524160-ICQ-redesign
    Dmitriy Ivanov dribbble.com/shots/2524011-ICQ-App-Redesign-Concept
    Edward B. dribbble.com/shots/2517118-icq
    Extremall dribbble.com/shots/2469178-ICQ-iOS-App-Redesign-Concept
    Roman Kryzhanovskyi dribbble.com/shots/2464034-ICQ-messenger
    dribbble.com/shots/2454594-ICQ-app-Material-redesign-concept
    dribbble.com/shots/2446817-ICQ-app-redesign-concept
    Kirill Shapoval www.behance.net/gallery/34041416/ICQ-Redesign-Android
    Victor Nikitin drugmedia.ru/blog/23
    Fliqle dribbble.com/shots/2533217-ICQ-app-redesign
    Vladislav Mikhailov dribbble.com/shots/2534226-ICQ-Video-Chat-Concept
    Nick Voloshyn icq.dreams.global
    Андрей Иноземцев luckysle7in.ru/icq
    Alexander Dadaev www.behance.net/gallery/34164967/ICQ-VideoChat-App-Concept
    Alex Kurlaev www.behance.net/gallery/34171831/ICQ
    Александр Кочеванов habrahabr.ru/post/277447
    Дмитрий Волков www.behance.net/gallery/34167719/mobilnoe-prilozhenie-Icq
    Ico Maker www.behance.net/gallery/34190389/ICQ-Video-Chat-Concept
    Виталий Тамашин www.dropbox.com/s/aoneo57k2vkkbep/icq.png?dl=0
    Vova Sharapov dribbble.com/shots/2537833-ICQ-Neo
    Slava Kornilov www.behance.net/gallery/34216153/ICQ-redesigne
    Grisha Uglanov dribbble.com/shots/2539355-ICQ-app-redesign
    Khokim Sharipov dribbble.com/shots/2539417-Icq-redesign
    Vladislav Gavriluk dribbble.com/shots/2540390-ICQ-iOS-App
    Danial Siddiki dribbble.com/shots/2540525-ICQ-App-Redesign-Concept
    myinterface dribbble.com/shots/2540556-ICQ-redesign
    Alexandr Pesenka dribbble.com/shots/2540591-ICQ-Android-App-Redesign-Concept
    Edward B. dribbble.com/shots/2540746-ICQ-NewFinalFinalDone
    Valeriy Vysotskiy dribbble.com/shots/2540747-ICQ-concept-redesign
    Senya Ars dribbble.com/shots/2540751-ICQ-Redesign-concept
    Nikita Kokarev dribbble.com/shots/2540806-ICQ-Redesign
    Lev Pirogov dribbble.com/shots/2540824-ICQ-Redesign-concept
    Sergey Korneev dribbble.com/shots/2540910-ICQ-Redesign
    astract (andr.novojilov) dribbble.com/shots/2540960-ICQ-Purple-Redesign
    Pavel Zametniy dribbble.com/shots/2540986-ICQ-vision
    Pinkten dribbble.com/shots/2540987-ICQ-mobile-app-redesign
    Aleksei Mazelyuk dribbble.com/shots/2541005-ICQ-Redesign-concept
    Eygeny Gulin dribbble.com/shots/2541036-Icq-Redesign
    Alex Ovs dribbble.com/shots/2541067-ICQ-Redesign-Concept
    Dmytriy Kravchenko dribbble.com/shots/2541082-ICQ-Redesign-for-iOS
    Vladislav Solomaha dribbble.com/shots/2541118-ICQ-android
    Ivan Baryshev dribbble.com/shots/2541121-ICQ-Redesign
    Misha Eliseev dribbble.com/shots/2541123-ICQ-Video-Gif-chat
    Misha Bilenko dribbble.com/shots/2541143-Icq
    Sascha Yeryomin dribbble.com/shots/2541145-ICQ-iOS-App-Redesign-Concept
    Andrii Malinovskyi dribbble.com/shots/2541146-ICQ-redesign
    Alex Martinov dribbble.com/shots/2541148-ICQ-Video-Chat-Concept
    Denis Shoomov dribbble.com/shots/2541150-ICQ-App-Redesign
    Oleg Vishnevsky dribbble.com/shots/2541151-ICQ-Dribbble-Competition
    Mihail Anisimov dribbble.com/shots/2541261-ICQ-App-Redesign-Concept-2
    Vadim Zlygastev www.behance.net/gallery/34228179/ICQ-Dribbble-Competition-by-Mailru
    Jamil Lazarev https://t.co/CXMd4Y8VBF
    Lera Goryachaya www.behance.net/gallery/34229237/ICQ-redesign
    Nikita Gulak www.behance.net/wip/1684741/2855607
    Den Kulinich www.behance.net/gallery/34231267/ICQ-App-Redesign-Concept-from-Mailru
    Victor Zaytsev www.behance.net/gallery/33709082/ICQ-Redesign-Concept
    Евгений Першин www.behance.net/gallery/34241921/ICQ-Redesign
    Китя Тороповский kityaicq.tumblr.com
    Kiylo Valia www.behance.net/gallery/34243003/redizajn-ICQ
    Ivan Demenev www.behance.net/gallery/34245605/redizajn-mobilnogo-prilozhenija-ICQ
    Vyacheslav Nazarov www.behance.net/gallery/34246709/ICQ-App-Redesign-Concept
    Eugene Kazakov readymag.com/u73810282/2016-02-21-APP
    Pavlo Berezovsky www.behance.net/gallery/34250637/redizajn-mobilnogo-prilozhenija-ICQ
    Igor Kus www.behance.net/gallery/34252757/ICQ-concept-App-for-android
    Leon Bakadorov www.leonbakadorov.ru/icq
    Андрей Кравчук www.facebook.com/dlyareganasaytah/videos/1710084605871808
    Oleg Mishkorudnyy www.behance.net/gallery/34252915/ICQ-Redesign-contest-for-Mailru
    Katya Konyushkova www.behance.net/gallery/34251245/koncept-prilozhenija-ICQ
    Alex Bogomazov www.behance.net/gallery/34255209/ICQ-redesign
    Max Krynytskyi www.behance.net/gallery/34255361/ICQ-redizajn
    Yarik Bright www.behance.net/gallery/34255373/ICQ-Redesign
    Михаил Сегеда bunnyartworks.myportfolio.com/icq-redesign-by-bunnyartworks
    Ihor Mykhailov www.behance.net/gallery/34254115/Redesign-ICQ-for-ANDROID
    Mail.ru Group
    393,00
    Строим Интернет
    Поделиться публикацией

    Похожие публикации

    Комментарии 14

      +5
      Открыл только ради "сказочного безумия с радужными единорогами в космосе" — ожидания не оправдало.
        0
        диву даюсь, откуда столько свободного времени у людей?
        +2
        А можно расстановку по местам за пределами тройки лидеров?
          0
          А такое наверное не делалось.
          Выделили только 3 победителей, а дальше и не обязательно.
            0
            ТОП-10 сделали:
            https://vc.ru/p/icq-contest
            +1
            Понравилось очень как сделал Денис. Прям выделился среди всех. "Глаз радуется".
              +11
              Моменты, карта, конкурсы, чатрулетка — хоспаде, о чем вы все?.. Сделайте кондовый мессенджер по подобию раннего Скайпа. :)
                +4
                Конкурс на дизайн и открытый код аськи. Неужили и программисты и дизайнеры разом уволились?
                  +1
                  Победитель, конечно, хорош. Но работа на втором месте вообще вынос мозга. Я не понял как там что работает.
                    +1
                    В чем делают такую прекрасную анимацию как у Дениса?
                      +1
                      это констуктор https://readymag.com/
                        0
                        разве не адоб АЕ?
                          0
                          Имею ввиду приложение, не сайт
                            0
                            Для интерфейса использовал Adobe Animate

                      Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                      Самое читаемое