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, который отрисован как мини-апп, был отрисован как концепт собранный на коленке. Планов о его существовании не знаю. Потому надо считать эту часть контента вымыслом.