User Interface Design - Feedback 2

Help and Feedback Art Design Support
#1

So I’ve been away from Interface designing for quite a long time, about ~1 month or 2. I created this post a few months ago and I initially came up with this design:

image
image1035×580 248 KB

Then I came up with this:

image
image1035×580 239 KB

And now I have this:

image
image1153×747 80.8 KB

I would be happy to get some thoughts and suggestions on my latest design, mainly focused on the side buttons “Selected”, “Hover” and “Unselected” and the List dropdown menu. Of course if you see any potential improvements, you may throw them in as well :slight_smile:

My inspiration for this latest version was Discord, Settings App for iOS and a little Google Material. I am also coming up with a Dark Mode variation for the interface :black_heart:

5 Likes
#2

This is the latest revision so far:

image
image1150×736 72 KB

(Still haven’t touched the Dropdown menu and side buttons)

2 Likes
#3

I personally would keep the separation bar between the buttons and the setting options.

4 Likes
#4

It’s really nice and clean, my only issue is the drop down label on the “Option” tab. I would suggest using a rounded rectangle for that label so that is kind of matches the clean, minimalistic look. Other than that I think it looks nice and reminds me of “IOS” GUI. Thank you for sharing!

2 Likes
#5

I don’t think you’ll get much improvements opinions about it, all the changes just ended up leading to be very similar (if not 99%) to Apple image

I Believe this is a bit more than just “taking inspiration”, it’s not forcely a bad thing,
but the < Back button, the topbar, the search mini-icon & the On-Off toggle is making it extremely obvious.

Aside that, it’s a pretty clean UI, simple & clear, nothing specific to say as this is a panel for pretty much any setting/control purposes.

2 Likes
#6

I think it looks really amazing, keep up the great work!

#7

The design is adapted from iOS ideally, maintaining all quality their Settings app has.

I barely see one thing to suggest at the moment that’s important, and that is to divide the category list from the categories’ contents by adding a shade to the category list, that’ll make the UI more obvious navigation wise and it’ll retain the point that it’s correctly put together.

Here is what it would look like after following my recommendation :slightly_smiling_face: .
image

Good luck!

1 Like
#8

Also, in addition to my last post. :arrow_up_small:

I think kenami has a good point about the Back button on iOS. Try to make this less conspicuous by using an alternative, that keeps the same aesthetic. :thinking:

Here’s something you could use if you wanted to:
arrowleft

:+1:

1 Like
#9

You have a lot of lines in your interface. There’s a broad industry wide movement to reduce lines and stick to smoother surfaces or gradients/layers/depth. For some reason, tons of lines give the perception of clutter.

If I was you, I’d look into maybe removing some of the border lines and adding shadows and depth to still keep everything separated.

1 Like