Переделал иконки «Яндекс.Маркета»

Всем привет!

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

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

Переделал иконки «Яндекс.Маркета»

Ну и зачем тебе это?

Сразу оговорюсь, я люблю дизайн продуктов Яндекса, сам немножко там помогаю в Практикуме. А докопался именно потому что остальной дизайн, что вижу, уже вообще ничего не спасёт — хоть гранату кидай, хуже не будет.

Иконки Маркета меня бесят почти каждый день, в них есть незначительные (а в случае с купонами и значительные) косяки. На коммерческие показатели, я уверен, это никак не влияет, но Маркет же будет развиваться? Когда косяки накопятся, сколько будет стоить, например, перерисовать сотню кривых иконок в нормальный вид? А тысячу? Да ладно, шучу, немного будет стоить, но всё равно хочется повеселиться прямо здесь и сейчас.

Что не так с иконками

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

Переделал иконки «Яндекс.Маркета»
Переделал иконки «Яндекс.Маркета»

Штрихи

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

Это — нифига не целостно. Скриншот из фигмы, можно бить ногами, но не по лицу
Это — нифига не целостно. Скриншот из фигмы, можно бить ногами, но не по лицу

С диагональными штрихами особо ничего не сделаешь, я не стал их сильно пинать. Тут только следить за тем, как они рендерятся в режиме pixel preview Фигмы.

Цвета

Предполагаю страшное: Дизайнер иконок тыкнул пипеткой в инфицированный джипегом скрин текста (там 222221) и цвет получился немного 222222. Ерунда, а бесит. Всё же оставлю основной цвет иконок таким, как получился, а не цветом текста.

Скриншот из фигмы, ну ты понял
Скриншот из фигмы, ну ты понял

Смыслы

Тут всё почти норм. Обмазал какашками то, что не нравится. Впрочем, как и обычно.

Тут речь только о смыслах
Тут речь только о смыслах

Оптическая компенсация

Переделал иконки «Яндекс.Маркета»
Переделал иконки «Яндекс.Маркета»

Пиксели

Изначально я делал скрин на ойфон, там хорошее разрешение матрицы, но дизайнер яндекса допустил одну весёлую ошибку. Толщина штриха 3 px. Ну на твоём мониторе — так вообще 1.5 px. Ничего, купишь однажды нормальный, когда инвестиций поднимешь. Так вот, а у иконки ширина 40 px. Если линия идёт строго по центру, она попадает между пикселями, и край штриха рендерится плааавно и невероятно отстойно полутонами. Так делать нельзя, надо смещать такие иконки на полпикселя, тогда из штрихи будут резкие и дерзкие. Чёткие, как пацаны во дворе.

Хрень какая-то Неизвестный дизайнер Яндекса, земля его карьере пухом
Хрень какая-то Неизвестный дизайнер Яндекса, земля его карьере пухом
Чёткая иконка Автор — Саша, в связи с чем принимаю поздравления
Чёткая иконка Автор — Саша, в связи с чем принимаю поздравления
Моё любимое занятие при ревью макетов. В США меня бы уволили за неполиткорректность
Моё любимое занятие при ревью макетов. В США меня бы уволили за неполиткорректность

Процесс (нет)

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

В моих фантазиях это происходит как-то так
В моих фантазиях это происходит как-то так

Всё же немного фарша покажу:

Переделал иконки «Яндекс.Маркета»

Ну и что в итоге?

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

Переделал иконки «Яндекс.Маркета»

И пара скринов, можно открыть на ойфоне:

Сами иконки:

Ееее, мазня от пережатия
Ееее, мазня от пережатия

Итог

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

Для дизайнеров маркета ссылка. Очень расчитываю, что кровь из глаз поубавится, как внедрят. Хотя, этож надо признаться в косяках. Смутно себе представляю, как дизайнер иконок придёт к тимлиду и скажет: «Я обмделалса, вот рамдомный чумвак почимнил наши икомки, дамвай замемим». Но всякое может быть.

Всем, кто дочитал до конца — вы лапочки. Пока!

4141
48 комментариев

Я правильно понял, что в простую композицию значков в одной проекции, вы добавляете значок коробки в 2ух проекциях и меняете, более чем, понятный значок «копирования» на(3 звездочки и пол документа) непонятный и сложный?))

14
Ответить

Спасибо за обратную связь!

Да, всё правильно понимаете. Смыслы важнее, хоть сами конки можно ещё улучшать и улучшать. Думал сделать иконку заказов в виде чека, но потом такой: «Какой же это к чёрту чек, если приезжает коробка со скотчем?!».

Вообще, надеюсь, Маркет скоро перестанет ненавидеть окружающую среду с их валовым объёмом заказов-то, и уберёт эти коробки к чёрту. В том числе и из иконок.

1
Ответить

Я один не заметил никакой разницы?

9
Ответить

Привет! Никто не заметил)

2
Ответить

Новые какие-то стремные же, ну

1
Ответить

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

«Списки сравнения» будто стремятся вправо относительно коробки сверху (которая тоже сильно выбивается не только весом, но и другим углом). 

Звездочки в «Мои публикации» превратились в кляксы, да и сама метафора трех звезд над коробкой (?) весьма странная. 

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

Раз это целый раздел, то почему бы вообще не отказаться от этого меню? Можно ведь сразу показывать последний заказ, если он активен, чтобы пользователь мог сразу увидеть его статус. Показывать списки сравнения, избранные товары, лишний раз напоминая и подстегивая. А все остальные функции, а-ля «Настройки», могли бы идти списком ниже. Получился бы информативный интерфейс, удобный пользователю и выгодный бизнесу (пользователь меньше тратит время на путь, больше видит, чаще сам себе напоминает о том, что в избранном что-то есть). А так, если честно, какая-то бессмысленная работа. 

5
Ответить

Спасибо за замечания!
Всё по делу, вакансии и коробка реально слишком плотные, но по-другому не придумал, а дальше было лень. Кстати, тут на VC прикольная иконка вакансий, можно бы её перерисовать. Три звёздочки — тоже согласен, компромисс, но лучше копипасты.

Что касается пользовательских путей — суперспорно. Это только тестами проверяется. Любое экспертное мнение в этой области без тестов не ценнее тупейной бумаги.)

Совсем без иконок — тоже хорошая идея, так многие похожие приложения делают и не парятся. Но надо смотреть на скорость навигации пользователей тогда. Тех, кто только пришёл и кто попользовался несколько дней каждым вариантом)

2
Ответить