I've been working on learning UI design, what do y'all think of this? figma.com/proto/rOhbNvD6U1MEkM3zeznLeJ/music-thing?page-id=0%3A1&type=d[…]aDh-1&scaling=contain&starting-point-node-id=2%3A3&mode=design
Created with Figma
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?”
inversely, I’d also ask “what actions don’t I need to support?”
that can help you decide what is a must have vs what is extra.
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?”
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). vwo.com/blog/crap-design-principles
There's also a book (maybe overpriced but still a great read) that gets more into the details:
A few other things to try is to put yourself in someone else's shoes. "I barely know how to use a mouse. What am I looking at, what should I do?". Another is using realistic, long text in designs. If you use short ones like "genre", you'll find later that nothing fits. One more thing is you can blur the design to get a feeling of weight and hierarchy. If you can generally understand the hierarchy (without clearly seeing the text or images), it's good.
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, 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
Thanks for those links @Mike Austin