Cardano.org Header Proposal

[mattykand]

The proposal:

Original Github issue
🧠 The approach is intentionally neutral to start with, to allow for flexibility - but it does subtly reference the values of decentralization & innovation while referring directly to Cardano logo.

• The animated spheres represent Cardano nodes in motion, symbolizing on-chain activity.
• The dots come together to form the Cardano logo, representing the network’s collective strength and unity.
• It’s a lightweight video (~400kb) and should be straightforward to implement.

Preview it here:

• Web
• Mobile (as you can see, there are a number of options on mobile)
  Password: ng-car-hero

The background story - community contribution from Netguru

We’re Netguru, a product design and development consultancy currently working closely with the Cardano Foundation on branding, UX/UI Design & Web Development initiatives, e.g. we set direction and delivered Cardano Foundation Website
This contribution is part of our commitment to not only support CF initiatives directly, but also show up for the community.
When the topic of the new header for Cardano.org was mentioned in our conversations with @katomm , we got genuinely excited to take part!

Feedback

💬 We’d love to hear your thoughts! Looking forward to your feedback! 🚀

[RayTracedObserver]

This is interesting, thank you for sharing. I really like the design of the Cardano Foundation Website by the way.

So about this header proposal. Do you think you could make it so that the spheres which compose the logo come from outside the viewport right after loading the page, then they organize and start their loop ? Also the motion right now seems a bit abrupt perhaps... Starting and stopping too abruptly... Maybe it can never fully stop, just become so slow when it's in the cardano logo formation that it's almost not perceptible, but it would still be moving ever so slightly.

Is this a video or is it webGL or something that could be made to be slightly interactive on hover or on scroll or when tilting device ?

Also the background seems very flat and very one dimensionally blue despite the small dots in the background. Perhaps it would look good animated and without the dot grid ? By animated I am thinking of some very very diffuse and slowly moving large gradient blobs (I'm sorry that I don't exactly know which words to use) of slightly changing colors ? It would make it more alive yet very subtle and less "in your face" Windows blue screen of death style blue ;)

I'm exaggerating that last part a bit for fun, unicolored backgrounds can be just as nice :

I actually quite like the blue that you chose, it may give a more utilitarian look than gradients ? A bit like modernist Swiss posters with bold flat colors... What does it look like without the background dot grid and no gradient, just blue ? Or instead, could the dot grid be slightly animated so the dots grow a bit on hover or on touch to make the background more alive ? Abstract art.

Could there be another version for dark mode which uses a bit more melatonin production friendly colors ? Blue is great for daytime.

Thanks again for sharing this @mattykand

EDIT : Sorry I had not noticed that you had already said that it's a video. But my questions about the possibility of making it interactive instead are still valid. It would be really great if it were.

[katomm]

Thank you @mattykand for putting effort into this, please note that with release V1.17.0 in #234 we have managed to bring back the old header at least on desktop devices.

(It will probably need a few more iterations and that doesn't mean you can't replace it with a new header if you want to pursue it further.)