DEV Community

Finalizing A New UI (Feedback Requested)

TechMan09 on December 23, 2022

I am finally nearing the end of what has almost been a year-long project. :party: :party: :party: From backend development, security, and so much ...
Collapse
 
webjose profile image
José Pablo Ramírez Vargas

I like it overall, but the 3 bright colors must go. Too bright. Speaking as a mere user. I am no frontend developer.

Collapse
 
techman09 profile image
TechMan09

Thanks for the feedback! What color do you suggest I make them?

And user feedback is really the best, since it shows what potential users of the platform think of it, instead of what people that will not use it think of it

Collapse
 
webjose profile image
José Pablo Ramírez Vargas

I have no problems with the colors, it's the brightness level that shocks me. Dim them down and you should be good, I guess. Don't ask me colors. I am a backend developer for a reason. :-)

Thread Thread
 
techman09 profile image
TechMan09

I’ll try that and let you know how it goes

Collapse
 
techman09 profile image
TechMan09

I made some adjustments and added a video to the original post showing my changes. Not sure if the system pinged you when I did that, so letting you know here as well. Thanks for your suggestions!

Collapse
 
cicirello profile image
Vincent A. Cicirello

I agree with @webjose. Those 3 colors are rather bright in both themes.

Collapse
 
webjose profile image
José Pablo Ramírez Vargas

Compromise: Just the border.

I just realized I have something similar in the React example for wj-config.

Drawing attention

It is on a light background as seen. The bright color is only used in the border. The background color is actually so light that you can write black text, but the overall feel is quite attracting. What do you say?

You can see this in the Version_2 Branch of wj-config.

Collapse
 
zyabxwcd profile image
Akash • Edited

This is super good for someone used to doing backend. Keep reminding yourself that good software is built slowly in increments, atleast thats what I have learnt from my experience.

Suggestions:

  1. Keep the padding, margins consistent and relative to the size of the text/image/icon. The top bar has some issues with spacing between icons and their texts.
  2. The icon and text sizes are looking off wrt each other. I think the icon size should be reduced. This applies everywhere, the top bar, left nav and cards. Especially the 3 cards. Even the links/texts at the bottom part of the card.
  3. The cards are also looking a bit blank or overly minimalistic as if its lacking something.
  4. I have read that 2 colors are good and 3 tops. So you may wanna rethink the some of the colors in their and keep it restricted to the chosen 2-3.
  5. Welcome back section is smaller in width from the section above and below it. Its looking a little off. Try to look at the main right section as a single unit, you'll see that the notification at the top has a different width, below it, are the cards row having a different width, then comes welcome back box, again a diff width and below that are the info cards, matching the width of the KPI cards but having a width different than the element above it. Do something about it.
  6. Use font weight and spacing effectively. Other things you can use are shadows and subtle animations.
  7. The blue notification in dark mode has to change. It doesn't have enough contrast I feel.
  8. The padding in the info cards below the welcome back box can also be improved.
  9. In my 2-2.5 years of experience I have learnt to some degree how to change perspective and view the UX/UI from a non-dev standpoint. That helps a lot. I cant completely switch off my dev intuition or experience because I have been interacting with the software while developing it, and all that while, my head is like in there in the application trying to connect pieces. But from whatever little I have trained myself to do, it goes a long way and sometimes the perspective I get is really astonishing. I just get how different I was viewing a thing as a developer developing it and how a user using it would feel. Believe me, it can be surprisingly different and amazing to comprehend. So just try and do that if you can. Just take break, switch off the developer inside you and just simply log in to the application as a normal user. A catalyst to this, I feel is taking a break from development for a while and then changing the machine, as in login from a different system than which you develop on. It can be your phone browser (you can view the site in desktop mode if its not responsive) or your personal laptop or someones else's laptop.

I am no UI/UX developer, but this is my sum total perspective on this. Great work though. You have built a lot of functionality and feature it seems and taken care of security too as you speak. Patching security loopholes can be surprisingly tedious.

Collapse
 
techman09 profile image
TechMan09

Thanks! This was really quite helpful, and also helped me notice some changes on other pages that I did not showcase here.

I made some modifications based on your feedback and added a video to the original post showing them. Can you take a look and let me know what you think?

(And yes, patching security holes is very annoying)

Collapse
 
zyabxwcd profile image
Akash • Edited

Looking much more 'refined' IMO. Looks good for version 1. I can't come to a conclusion about the KPI cards colors. Google 'KPI cards UI dashboard' and you'll get some pretty neat ideas of what some good enterprise softwares follow. Maybe lighter versions of colors would look good, or maybe keep the background off-white or white and make the content colorful. Apart from the colors, the KPI cards are still looking too sparse. Either add some more information or adjust the styling so that it looks more fuller if you know what I mean. Maybe adjust the alignment a little. Example: instead of just a number like 6, you change the verbiage to 6 tickets and for the bottom part instead of Tickets >>, you can make it All Tickets >>(size of arrows can be a little more small). Club this with the UI example you will see on Google and I think you are good to go.

Collapse
 
receter profile image
Andreas Riedmüller

I think you might not need the navigation items at the top bar. And removing the colors from the icons will make the design a bit more calm. There is a strong emphasis on the three colored boxes.

Collapse
 
techman09 profile image
TechMan09

I have a love/hate relationship with those colored boxes at the moment. I love them because they are simple to use, but hate them because I can never get the color right.

What color do you suggest I should make them? Just the default color of a card?

Collapse
 
receter profile image
Andreas Riedmüller

It depends on how much attention you want to direct to the boxes. The more subtle the color the more attention will go to other parts of the screen.

Collapse
 
tarunc profile image
Tarun Chaudhary

The brightness of the 3 colors ruins it. It should be more dimmed like in dark mode

Collapse
 
swoorr profile image
Furkan

May be looks like good if you use small paddings