Feedback on UI design

Hello developers!

Recently, I found myself really interested in UI design. For a project, I need the base design. Following some suggestions, I used Figma.

Here’s what I made:

Photos

Base, typical search/utility buttons

Tab viewer, the plus is probably going to be changed but its for new tabs

Old

DevForum Post

Any feedback is highly appreciated. Thank you for reading.

Hello, I’m going about this assuming this is a search engine UI you’re working on. I love the color choices the blue and gray goes well together, I suggest using a darker gray for the background because the search bar is sort of hard to see. A good rule of thumb is if you can step away from your screen and see it then it’s readable if you have to squint or look for a period of time then it’s readability is lacking. Also for the icons try using a ruler guide or something along that and size them equally, the magnifying glass and reload icon’s are different sizes and margins are different symmetry in icons is what you should shoot for.

For the tab viewer I suggest, making the border around where I assume the icon is less thick so the image or tab itself contains most of the square. Also set your drop shadow distance to 0 and just change the size, can try also changing the mode of the drop shadow to something like soft light.

In general, remember The 60–30–10 Rule, It’s a simple concept, 60% if your palette should be one color, and another complementary color should make 30% and the remaining should be used as a accent (like a border) and should be around 10%.

1 Like

Thank you for the feedback, I’ll do some changes and reply with the finished product.

1 Like

Cant wait to see! Best of luck hope some of that helps