what i built

• picked the new look for the entire website. MacOS Liquid Glass vibes instead of the old clinical AI generated design

• did it entirely in figma, no code yet, just comps- built out command center as the first full mockup: floating glass panels, frosted cards, gradient canvas behind everything instead of a flat background…LOOKS STRAIGHT OUT OF APPLE HQ trusttttt

• pulled in a cursive treatment for the wordmark and a tuffff color palette

• this page is kinda like a reference page yk. Basically imma use this page and then figure out how each of the next few pages are gonna look like## what broke

• nothing broke since there’s no implementation yet- the actual friction was getting figma to fake something it doesn’t really do natively. so basically Figma doesn’t have a liquid glass feeling or even a backdrop blur refraction type of thing, so to get the cards to look like the PERFECT APPLE FROSTED GLASS, instead of the boring looking like kinda transparent kinda not white box

how i fixed it

• basically kinda faked the entire blur by creating a duplicate of the background behind each of the cards instead of just using the transparency feature. the blur by layering a blurred duplicate of the background behind each card. thats  kinda how I got that frosted apple glass type instead of a weird semi-transparent glass look

• kept a saturated gradient underneath (THE STANDARD IMAC BACKGROUND) so the glass has something to actually pick up color from

• i basically spent like 30 mins slowly adjusting the opacity by eye until it looked like the goated apple liquid glass look

• next step is turning this into real webpage instead of just a figma mockup

design stages

1. original ui (brown)
the starting point. flat, clinical, warm-brown/cream tones with a green accent. it was functional but looked really AI and generic. It didn’t feel like me or anything that I would personally build.

2. first sketch (white)
this one was mainly like a way for me to figure out how to lay all the elements out while still keeping that abstract vibe that I like. (HEAVILY BASING IT OFF OF APPLE). I also cleaned some things up, made it more minimalistic, and made everything to a light/cream. basically, I wanted it to look more and more like an apple product so that it has the clean , sleek design that I love about MacOs. 

3. final design (blue, liquid glass)
this is my final design. I completely gave up on making it white/cream and decided to make it what I want (A LOT OF BLUE AND THE CLASSIC IMAC BACKGROUND). I made everything with that like liquid glass/frosted effect and basically just built off of the IMAC standard display, MacOS vibes and like the apple minimalism and basically took A LOTTTT OF INSPO from Apple