Magickbase / visual-style-guide

0 stars 1 forks source link

Design icons for RGB++ actions #44

Open Keith-CY opened 3 weeks ago

Keith-CY commented 3 weeks ago

This issue comes from https://github.com/Magickbase/ckb-explorer-public-issues/issues/773, we are going to use icons prior to text to illustrate the action of an RGB++ transaction.


@Kirl70 Could you do me a favor to design a set of icons for the transportation of assets between BTC and CKB

I'm inspired by the game "Portal"

RGB++ works similarly, the asset will be teleported via the portals on BTC and CKB.

But in the CKB Explorer, we can describe the teleportation from the CKB perspective.

  1. Come from BTC: an asset appears in the portal

    image
  2. Go to BTC: an asset disappears in the portal

    image
  3. Transfer on BTC: an asset moves in the tunnel

    image

The color of the portal can be the primary color of BTC, which will make it easier to add themes for other blockchains in the future.

Kirl70 commented 2 weeks ago

Some icon schemes

image
Keith-CY commented 2 weeks ago

I prefer the concept of portal, similar to teleport or something.

But this one looks good if it can be an animation with gradually changed color

image

For example, the basic animation at https://giphy.com/stickers/black-arrow-anamagenta-wRqcEcKfCqVzcsQQyj BTC -> CKB:

Arrow animates from left to right

CKB -> BTC: modified_animation_90deg

Arrow animates from left to right

Kirl70 commented 2 weeks ago

Animation based on schemes 2

https://github.com/user-attachments/assets/7dedc427-987a-408f-87ef-37c8da074a6d

https://github.com/user-attachments/assets/89db1a96-afd3-44b4-a4dc-4c95c927afc8

Keith-CY commented 1 week ago

After consideration, I prefer the gradually growing arrow shown in the gif, similar to

https://github.com/user-attachments/assets/b7480a6d-2a9f-4aba-bdb3-2c9ef83a733a

It would be great if the color grows along with the arrow instead of simply from left to right.

Kirl70 commented 1 week ago

update

https://github.com/user-attachments/assets/ceb41e98-4cd6-48cf-9dab-9aa9938d1611

https://github.com/user-attachments/assets/0858211e-3e38-4a98-aec5-5926ce7a0ade