Coming soon - Get a detailed view of why an account is flagged as spam!
view details

This post has been de-listed

It is no longer included in search results and normal feeds (front page, hot posts, subreddit posts, etc). It remains visible only via the author's post history.

4
How to Get Better at UI?
Post Flair (click to view more posts with a particular flair)
Post Body

I designed this recently and asked for feedback. A person who is a Sr UX Designer said the font is off, the colors are off, and basically said everything is wrong.

I realize the numbers are not perfectly vertically centered.

How can I get better at UI design?

Image
Comments

So, there's a lot that can be improved here, but to answer your question, how do you get better? Keep designing. Test your designs, take feedback seriously. Spend time browsing work on behance or dribbble and make notes about the designs you find pleasing. Take inspiration from them, "borrow" the things that you think make their designs look great.

Ok, as for this design:

You're wasting space at the top with the hamburger menu being the only element in that horizontal space. I'd find a way to combine that and the search.

Speaking of search, you've got 3 different colors happening in here. Pink for the icon, light grey for the text, and then a darker grey icon on the side. There's no need for that kind of complexity, and on that topic, I'd find a simpler microphone icon.

Spacing is a huge issue in this design. You need to let things breath in some spaces, and in other spaces, you need to bring things closer together.

On the "What's available" line, you have a button/link next to that that's not aligned correctly with the "What's available" text. It's also competing with the "What's available" text due to its size, and the icon you're using is too large.

As for the navigation icons, I wonder if you could simplify here as well. Maybe white icons against the background?

As for the cards, they need room to breathe on all sides. The donut name is a bit too large, yeah, and the description text below is spaced too far away. On the last card you can see the selection button, but I wouldn't use the gradient at all. It's taking away from the purpose of the icon. Use a slightly larger (think finger sized), simple icon. You'll need to play with the spacing/design a bit, but for a selected item, I'd give more feedback to that card to make it clear that it's been selected, and I might consider making the /- selector horizontal instead of vertical. I'd also blow out the drop shadows a bit more to make them feel a bit more like they're floating. I'd also use a black drop shadow. I usually do 5-10% opacity, with a heavy blur. I like really soft drop shadows.

For the navigation at the bottom, again, I don't think you need the gradient for the selected state, and I'd find icons that work a bit better. Also, look at your spacing. On the left, the home icon looks appropriately placed, and has enough spacing, but look at your profile icon on the right. It has no room at all. What would that look like if it was selected?

Oh, and in general, you might want to find nicer fonts that reflect the brand a bit better. The fonts/styles you're using now are not working.

Anyway, I hope some of that helps. I'd love to see a revision if you make one!

Author
Account Strength
60%
Account Age
2 years
Verified Email
Yes
Verified Flair
No
Total Karma
1,346
Link Karma
394
Comment Karma
844
Profile updated: 5 days ago

Subreddit

Post Details

We try to extract some basic information from the post title. This is not always successful or accurate, please use your best judgement and compare these values to the post title and body for confirmation.
Posted
8 months ago