Created a fun project which I call "UI Eras Tour" As a designer, I alwaysCreated a fun project which I call "UI Eras Tour" As a designer, I always
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
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.
Post image
Rishi's avatar
Very cool exploration of design history. The fact that you stitched together multiple visual eras into one experience makes this stand out from typical portfolio projects.
Check out my challenge entry: https://on.contra.com/pnfJBQ
Happy to get your feedback.

on.contra.com

Introducing Voya: Revolutionize Your Travel Planning Experience

Connect with next-gen talent and tools to get work underway. Hire more independents. Start more projects. Get more creative.

Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started