I've been working on learning UI design, what do y'all think of this? https://www.figma.com/proto/rOhbNvD6U1MEkM3zeznLeJ/music-thing?page-id=0%3A1&type=d[…]aDh-1&scaling=contain&starting-point-node-id=2%3A3&mode=design

when approaching UI design, I find it really helpful to layout the goals that the UI will need to support before doing any design. So, here, I’d ask “what are the top few activities that someone would be looking to do when using this UI?”

I guess the main activity would be looking for a certain piece of media someone has heard about. Maybe price isn't necessary then... :>

sort of following on that line “how will they be looking, what info do they need to find that thing?”

Hmm, yeah

Honest feedback, good start. Design is something that you just need to internalize, and look at lots and lots of other designs and see what speaks to you. Sometimes you don't know why a design looks so nice until you break it apart. Then you can use that information to build your own. Contrast, size, alignment, proximity, shape, etc. all work together (or not). https://vwo.com/blog/crap-design-principles There's also a book (maybe overpriced but still a great read) that gets more into the details: https://www.practical-ui.com

What you have is so charming! I got noticeably cheerier after looking at it. Thanks for sharing. :) I suspect putting real data in there might reveal a few small things to change, like I noticed that there’s probably not nearly enough room for artist and album names, for example. If you want, http://worrydream.com/#!/MagicInk breaks down the user needs for a very similar store listing UI that I think is a good example of how you might answer many of the questions people are posing here like “What are people trying to accomplish?”

Oh yeah!! I was actually super inspired by Magic Ink, though I might not have a hang on the ideas

Great start! Process-wise, I'd recommend showing this to someone who hasn't seen the UI and ask them to explain what they see (or how they'd start doing different tasks) — this is sometimes called "guerrilla usability testing". Also, I'd use more real data to see what happens to the layout with longer song names, artist names, genres, etc. On UX/usability level things that I'd pay attention to: do users realize song is a drop-down and song name an input? What do icons such as "P" and "P + circle" mean? Which elements are clickable and how to make that obvious? On UI level I'd try to reduce clutter to make the design more clean to reduce extra load from the user to perform their tasks. So: just one typeface, more neutral zebra row color (or remove it), remove the note icons, remove vertical bars next to album art, etc. And then, if you like, add the visual matrix printer motif back when all extra clutter is removed. I'd avoid also strong border colors and use subtle background colors, and try to be uniform with paddings, borders, etc.

Oo thanks

The trend to use white or grey buttons or text fields is an interesting subject, as I noticed it in the first example of Refactoring UI. You could say the gray textbox looks more like a button. Thoughts?

Refactoring UI was released in the end of 2018, so it is now almost five years old. I don't think it has been updated since. The fundamentals are ofc up-to-date, but some trends, such as colors of buttons, have shifted a bit since the release of the book, such as what colors to use for buttons. I think something like Shadcn (and Vercel UI) are what would be trendy/default now: https://ui.shadcn.com