TechMan09

Posted on Dec 23, 2022 • Updated on Dec 24, 2022

Finalizing A New UI (Feedback Requested)

#design #help #showdev #ui

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 more, I am finally in the home stretch, which means it is time to finish the part I have been putting off till now; finalizing the UI.

Now before I ask for your opinion on what I created, there are a couple of things you should note first:

I am not a designer, not by any means. Normally, I do the backend, and someone else does majority the frontend after I sketch something out. But this time, I decided to give it a go myself. It's been a journey, but I think I may have the beginnings of something great (maybe ... hopefully).
This service that I am creating is a webhosting provider, that caters towards people that are just starting out in the world of web developing and hosting. Most likely, many of my users will be brand new to the world of webhosting, and not have much prior knowledge.

With that taken care of, here is the design that I have come up with:

Light Mode:

Dark Mode:

Feedback on the design above (or even just words of encouragement) are highly appreciated. Feel free to say you hate the entire thing (I won't be offended), but don't leave me hanging (let me know how I can fix it).

For the time being, I am not going to release the URL (But if you are truly interested, let me know down below, we can work something out).

Thanks for your time, and if you offered it, your feedback.

EDIT:

@webjose @cicirello @zyabxwcd @receter @tarunc

I made some changes to the page, but still not sure what I think about the coloring of the 3 boxes.

Did I improve on some things here, or did I just make it worse?

Thanks again for your feedback!

Top comments (15)

José Pablo Ramírez Vargas • Dec 23 '22

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

TechMan09 • Dec 23 '22

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

José Pablo Ramírez Vargas • Dec 23 '22

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. :-)

TechMan09 • Dec 23 '22

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

TechMan09 • Dec 24 '22

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!

Vincent A. Cicirello • Dec 23 '22

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

José Pablo Ramírez Vargas • Dec 24 '22

Compromise: Just the border.

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

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.

Akash • Dec 24 '22 • 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:

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.
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.
The cards are also looking a bit blank or overly minimalistic as if its lacking something.
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.
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.
Use font weight and spacing effectively. Other things you can use are shadows and subtle animations.
The blue notification in dark mode has to change. It doesn't have enough contrast I feel.
The padding in the info cards below the welcome back box can also be improved.
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.

TechMan09 • Dec 24 '22

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)

Akash • Dec 25 '22 • 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.

Andreas Riedmüller • Dec 23 '22

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.

TechMan09 • Dec 23 '22

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?