You are browsing as a guest. Sign up (or log in) to start making projects!

55m 18s logged

HII guys so heres what I did in the last hour…

I spent a good amount of time was spent working on the design of the interface. Finally, I would say that now the interface looks like a finished product rather than some temporary solution. As the first step, I set up a complete theme via CSS variables in :root. In particular, there were colors for the background which should be dark, golden accents, teal expression color, ink text, muted overlays, as well as font stacks of Devanagari and monospace. All those settings in one place immediately gave the interface much better structure and increased convenience of further editing. Further, I adjusted the global layout to make the app take the full screen and have a nice dark mode design, fitting into the overall musical concept of the project. Then, I designed the camera backdrop including the mirrored video feed, vignette gradients, and stage layer. It provides the project with a moody and atmospheric design. After the backdrop was completed, I turned to designing the top bar which includes the design of fields, labels, dropdowns, hint text, and icon buttons.

I added select styles with gold arrows, blurring effect, and transition on hover to make all of these elements responsive and clean. Then, I created the tanpura toggle button with its teal glow and devanagari title, which fits very well into the overall Indian classical theme. Finally, I added styles for the pose list and pose glyphs, which include small circles that represent poses, pose names, and subdued note labels. In short, this was the process that turned the plain UI into an actual design.

And now I also tested it BUT ima keep it a surprise for yall so I guess stay tuned for the next devlog loll adioss. (I pasted a few of the theme colours in the code below…

0
6

Comments 0

No comments yet. Be the first!