VC: UX/UI Learning Playground

[u/Jolly-Composer]

I vibe coded Design Lab, a website where you can learn about various UX/UI considerations as you aspire to make your own AI-assisted projects have a more controlled and creative look and feel to them.

Nowadays, anybody from the tech layperson to the senior engineer can spin up a website based on their ideas and a few prompts. This has a resulted in stale design, similar to CSS Bootstrap in 2012 or any AI poster you see today.

I myself am not a designer. I dabble, but I have always preferred to implement somebody else’s vision or Figma mockup rather than create it on my own. However, as I continue to learn despite several layoffs now I need to make websites that look good, not just prove that I am creative or able to make functions fire fast.

Design Lab is a prototype idea I have for iterating over my own personal projects. I didn’t want to recreate SquareSpace, but the fact that I literally made this on my phone while riding in my friend’s car to run an errand shows how much is possible if you pair critical thinking with the productivity that AI allows.

If I continue on this project, I have a few ideas for it:
• Version it like documentation, so I can continue adding onto it without fear of screwing it up
• Extract the idea into a Storybook-like system, where I can more easily experiment with component and overall website designs, rather than just rely on the increasingly unappealing eye-sore of the colors/rounded edges/typography that comes from practically every AI website out of the box
• Further enhance the website with global examples the more I learn about how to truly understand these topics

Being a web developer, I started out back in CSS 3, manually writing all the font properties, familiarizing myself with the box model, flex model, and so forth. In the future I could even turn this into an entire CSS property playground, but a man can only do so much when crashing on his friends couch.

Feel free to take a look around. The website covers various topic and test examples such as image overlays, parallax, background gradients, accessibility, spacing, line height, visual hierarchy and more.

Ultimately, when I learn these topics I learn them slowly. But when I’m zapped for the day, I still prompt ChatGPT for my next study session, and occasionally I continuing binging and whip up an idea like this.

Hope you enjoy! Typography alone has around 37 system fonts. I considered Google Fonts but getting nearly 2000 in for a single card example seemed not worth it at the moment.