Table of contents:
· Video Animations
· Chat List
· Contact List
· Settings Page
· User Info
· User Profile
· Channel Profile
· Group Profile
· Bot Profile
· Private Chat
· Channel
· Bot
· Secret Chat
· Group Chat
· Selections
· Modal Pages
· Messages Types and Chats


Dynamic Palettes:
· Dark Mode (Default)

· Light Gold
· Dark Gold

· Light Mint
· Dark Mint

· Light Pink
· Dark Pink

· Light Green
· Dark Green

привет! меня зовут Илья Гришин и я уже 8 лет рисую супераппы продуктовый дизайнер

(а еще арт-директор, эйчар, хед оф дизайн, дизайн-менеджер, продакт-менеджер, разработчик, моушен потому что мне обязательно нужно надевать все шапки 🫨)

если мы с вами не знакомы, то пара слов обо мне могут звучать как-то так:
— сейчас я строю с командой криптовалютный Кошелёк, что встроен в Telegram;
— активно приглядываю за всем, что есть в TON; помогаю и кручусь, чтобы сделать экосистему полезнее (а не в просто красивой обложке), строя открытую платформу вместе с ребятами в top.co;
— ранее, два года помогал меняться Дзену в Яндексе и отвечал за его ленту;
— шесть лет помогал строить и меняться соцсети ВКонтакте и чуть-чуть объединять VK снаружи и изнутри.

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

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

такой контент примерно тут и будет: некий станок и разные штуки, которыми чуть чаще хотелось бы делиться наружу.

настало время проводить собственные конкурсы.

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

я бы сам поучаствовал, но теперь раздаю призовой фонд до $30,000 в Toncoin!

подробности тут: https://telegra.ph/Wallet-in-Telegram-announces-first-contest-for-designers-05-07

⚡️Более 300 работ было прислано на конкурс.

Кажется, так много не отправлялось даже на конкурсы Telegram. И как все это проверять?

Наконец-то дождался Wallet в блоге, ещё и в таком крутом апдейте!

https://t.tg.goldica.ir/b0dd72633a60ad0070e10de7b12c5322/blog/mini-app-bar-paid-media-and-more#mini-app-bar

Каждый раз, подключая TON Space к какому-нибудь даппу, я немножечко горжусь тем, насколько клёвым получился процесс подключения.

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

Однако, во всём, что я встречал — мне не хватало законченности. Некого итога, мол, вот всё подключено — иди теперь делай свои дела.

Хотелось найти этакий Apple Pay существующий в парадигме быстрой шторки: показать счёт, подтвердить транзакцию и получить итог — уйти в фейл, либо в победный хаптик и приятный звук финала.

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

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

И если разобрать покадрово видео-прототип, то можно заметить как блюрятся аватарки, как меняются цвета. На вебе сделать такое непросто, но возможно. Еще и спеку нужную разработчику отдать. Не по видео же строить?

В ходе прототипа выяснилось нечто технологично прекрасное:
1. Кружочки под аватаркой могут вливаться, словно капли, как делает это аватарка на экране настроек Telegram, вливаясь в Dynamic Island. (Для видео делать было лень, но в главное, что в проде).
2. Галку, да и ещё и с баунсом разработчик сам идеально не отрисует, значит нужно прибегать к Lottie.
3. Выяснилось, что Lottie можно красить на уровне CSS. Да и ещё как можно! Им можно прописать класс в SVG, прописав название класса в After Effects. Я был удивлён, что такая логика абсолютно незадокументирована (либо я её не нашёл).
4. Это значит, что можно сделать единую Lottie и всю физику переложить в этот рендер, а красить с нужным таймингом на уровне CSS.
5. А дальше всего-то прописать аккуратно тайминги, потому что синхронизация таких вещей все равно должна допиливаться уже в браузере.


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

Правда, плавное центрирование с учётом локализаций реализовать не удалось. Если у кого-то будут идеи как такую систему придумать — приходите в комменты!

А я пойду радоваться, что каждый, кто подключает свой кошелёк к Hamster Kombat иногда встречает такую анимацию на пути.

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

На фоне того, что Wylsacom записал обучающий ролик про Wallet аж на целых 20 минут, вспомнил про свой любимый костыль, связанный с Вилсой.

Года три назад (ого, как давно-то!), когда я только начинал работать в Яндексе, то в первую свою неделю приехал в Красную Розу знакомиться с командой. Да и вообще узнавать чего там за дела такие происходят, как люди живут и как бы им поскорее помочь?

Ребята тогда активно готовились к запуску Y2 — новой версии поиска. Ничего не понятно, но к счастью очень интересно. Ребята носились как оголтелые, а в особенности готовились к запуску ролика к РК про Y2. В нём тогда участвовали Гена Лохтин и Антон Шеин, они тогда должны были рассказать про отдельную веху в этом апдейте, а Wylsacom — главное медийное лицо этой РК.

Вот только снимать ролик пора, а как демонстрировать новую главную — совершенно неясно. Поддомен не дать, не всё там ещё идеально готово. Прототип Фигмы так к скроллу не подвяжешь, да и ещё надо так, чтоб в Яндекс Браузере запустить.

Тогда вспомнил былое и написал красиво выглядящий прототип из картинок (ещё и без ChatGPT!) часа этак за три, чтоб его не стыдно было в ролике демонстрировать. До сих пор он лежит тут под забавным названием — https://ilyagrshn.com/nomoredesign/

Недавно тут наткнулся на него снова и приятно было взглянуть: приятные глазу анимашки, вёрстка из картинок, даже собранный из костылей скелетон, и отдельная чудесная деталь — мой говнокод. Неважно что внутри, работает же!

Отдельный бонус: на каждый рефреш разная лента новостей. Видимо, чтобы Вилса у себя этот рефреш как-то в ролике демонстрировал.

Конечно, всегда знал, что умение костылить мне где угодно пригодится. Но этот один из самых приятных.