Переделал иконки «Яндекс.Маркета»
Всем привет!
Меня зовут Саша, я люблю хулиганить с дизайном. Сегодня решил докопаться до мышей в «Яндекс.Маркете». Иногда хулиганить полезно, но есть и минусы: в сетчатке выжглась пиксельная сетка, а глаза мироточат от всякого, что видишь постоянно тут и там.
Например, когда пользуюсь хорошим приложением, и вижу какой-то мелкий косяк, который постоянно мозолит глаза.
Ну и зачем тебе это?
Сразу оговорюсь, я люблю дизайн продуктов Яндекса, сам немножко там помогаю в Практикуме. А докопался именно потому что остальной дизайн, что вижу, уже вообще ничего не спасёт — хоть гранату кидай, хуже не будет.
Иконки Маркета меня бесят почти каждый день, в них есть незначительные (а в случае с купонами и значительные) косяки. На коммерческие показатели, я уверен, это никак не влияет, но Маркет же будет развиваться? Когда косяки накопятся, сколько будет стоить, например, перерисовать сотню кривых иконок в нормальный вид? А тысячу? Да ладно, шучу, немного будет стоить, но всё равно хочется повеселиться прямо здесь и сейчас.
Что не так с иконками
На картинке привёл небольшой анализ. Слово-то какое смешное. VC укокошит к чёрту все мои подписи своими оптимизациями картинок для быстрой загрузки поганых джипегов, поэтому продублирую часть текстом дальше.
Штрихи
Штрихи пляшут. В диагональных штрихах букв, кстати, толщина чуть больше горизонтальных и чуть меньше вертикальных — наши глаза воспринимают такие штрихи как одинаковые. В иконках уже по ситуации, конечно, но надо, чтобы общий вид ансамбля смотрелся целостно.
С диагональными штрихами особо ничего не сделаешь, я не стал их сильно пинать. Тут только следить за тем, как они рендерятся в режиме pixel preview Фигмы.
Цвета
Предполагаю страшное: Дизайнер иконок тыкнул пипеткой в инфицированный джипегом скрин текста (там 222221) и цвет получился немного 222222. Ерунда, а бесит. Всё же оставлю основной цвет иконок таким, как получился, а не цветом текста.
Смыслы
Тут всё почти норм. Обмазал какашками то, что не нравится. Впрочем, как и обычно.
Оптическая компенсация
Пиксели
Изначально я делал скрин на ойфон, там хорошее разрешение матрицы, но дизайнер яндекса допустил одну весёлую ошибку. Толщина штриха 3 px. Ну на твоём мониторе — так вообще 1.5 px. Ничего, купишь однажды нормальный, когда инвестиций поднимешь. Так вот, а у иконки ширина 40 px. Если линия идёт строго по центру, она попадает между пикселями, и край штриха рендерится плааавно и невероятно отстойно полутонами. Так делать нельзя, надо смещать такие иконки на полпикселя, тогда из штрихи будут резкие и дерзкие. Чёткие, как пацаны во дворе.
Процесс (нет)
Я сначала хотел его описать, но потом забил и забыл. Там в анализе понятно, что я буду исправлять. А выпендриваться, типа как ты в процессе делаешь и у тебя руки из плеч, а не как у всех — не это отстой. Отложу до момента, когда надо будет впечатлить какую-нибудь девчонку.
Всё же немного фарша покажу:
Ну и что в итоге?
Как видите, после вечера усердной охоты за пикселями для обывателя ничего не изменилось. Но мне приятнее на такое смотреть. Публикации только какие-то хреновые, ну и плевать. Я развлёкся и ладно.
И пара скринов, можно открыть на ойфоне:
Сами иконки:
Итог
Я знатно повеселился, не всё же дизайнерами управлять, составлять карты компетенций, планировать продуктовую дизайн стратегию, и вот эти все ваши биг дата, блокчейн, машинлёнинг, Герман Греф.
Для дизайнеров маркета ссылка. Очень расчитываю, что кровь из глаз поубавится, как внедрят. Хотя, этож надо признаться в косяках. Смутно себе представляю, как дизайнер иконок придёт к тимлиду и скажет: «Я обмделалса, вот рамдомный чумвак почимнил наши икомки, дамвай замемим». Но всякое может быть.
Всем, кто дочитал до конца — вы лапочки. Пока!