Created a fun project which I call "UI Eras Tour"
As a designer, I always felt having missed out on not designing screens for the bygone era, this was an attempt and recreating a designer profile across different eras.
Why this project? With Design.md it is now easy to create a cohesive design system that creates uniformity as new screens are generated, I wanted to create an experience where each page is unique & requires its own design.md, I was able to create unique screens & export html,screenshot & design.md to easily stitch the final experience.
How is used stitch? I first one-shot prompted my idea to get a base design, it was a good starting point & polished. But my idea required certain styles to be less polished by modern standards to truly represent the aesthetics of the era they represented for this "in-place AI edits" came in handy. The native availability of image generation from within stitch was also useful (profile pic also changes based on the era). For quick previews the "motion-rich HTML-native canvas rendering" helped as I was not staring at a static screen (especially for the ads in Y2K), I was able to see the real-time render & iterate based on my needs. Native google ai studio/netlify integration were helpful too when it came to ship the final experience.
Each era has something unique (like a easter egg) that I uniquely anchored onto from what I remember using them (yes, I have memories from dinosaur era)
- ASCII art in Html
- flashing ads & site vistor counter in Y2k
- Z-index (active window) & clock that syncs real time in Skeuo
- Interactive components & drak/light mode in Modern
- Tab/arrow key interactivity in CLI
Feedback on my experience: It was amazing to see the streaming of assets as it got generated which was the first time I have seen the "Show thinking" equivalent for design asset getting generated. The infinite canvas & native-motion rich HTML rendering was very helpful as I didn't have to preview the screen individually in a different screen which helped speed up the iteration/prototyping loop. Things I would have appreciated if it was better, undo was a little confusing as it some time reverted multiple actions at once, so I had to be extra careful every time I did undo.
Try out here: https://ui-eras.netlify.app/
I thoroughly enjoyed creating this project, I could confidently say that this project would not be possible if not for stitch as the complexity to create and execute would have been too much to take on in the past as a solo builder.
1
0
88
AI Collective Rebrand Asset Creation
1
2
For the Figma Makeathon I built an immersive journey about Indian wisdom about creation & creativity. The experience features a fully-guided walkthrough with abstract 3D visuals inspired by Indian motifs & mandala art, relaxing soundscape featuring Indian classical instruments and interaction that responds to head movement & hand gestures.
For the re-imagination of a gesture I have revived finger-on-the-lip (shush) as a solution for mute/un-mute problem of modern video meetings along with an attempt at using mudra/hand-sign/ASL as quick shortcuts for a hands-free experience.
Try here: https://crit-shush-71151332.figma.site/
Turn-on camera and hit the play-button for the full immersive experience.
3
168
Fieldwork Case Study
0
0
GroupTable
0
0