I am creating a form for uploading data in a dashboard
Want to know if any styling improvements can be done to the following UI
34 Replies
I like it. Maybe add some spacing between "Dashboard" and the form, as well as some more spacing between the input fields and button
Cool. I will do that. Also I wanted to ask. Is it okay to have no placeholder text? As I have a label
Yea that's fine, but personally I like adding placeholder data just so that people can see what type of data should go in there. I also think it helps make the form look a bit less empty
I would definitely have a placeholder for Image URL, because that's an unfamiliar input field. What type of URL are you looking for? One from Spotify, YouTube, etc? Thoughts people might have
And if you're going to have a placeholder for that, you should have a placeholder for everything else because it'll probably look off.
Also if you put a placeholder in, I'm not sure if a screen reader reads placeholders. I just looked it up and apparently it varies on browsers and programs. Don't take my word on that I just asked google and read the first thing that popped up.
So if it's the case that screenreaders don't always read placeholder text, I'd try to make sure you have some way of allowing people who use assistive technologies to understand what should go into that input field.
I see.
Also I didn't notice this before but center align the button text and give it something like font-weight 500
I was thinking of making the width to fit rather than auto
Yea that could work too
Your alignment is also off here
Would it work If i get rid of the image URL(I was mainly looking for image url from CDNs), and add an upload image file type input?
I'm not an expert on making things accessible honestly so you'd have to do your own research on that
Sure
But it would be a lot more intuitive for sure
Great. Thanks for the input. I will make these changes
Good luck!
Which is better?
or
Neither, make them full (or close) width and stack
Okay. I thought bigger screen sizes, multicolumn layout would be nice.
Ya but that looks like tablet
Desktop I think it would look good ya
So in that case, the first one
Cool
I'd bump up the spacing between the label and input field a tad
I have used 0.5rem ig
Maybe try 0.75rem
Will try 0.75
What's the spacing between input fields? 1rem?
Yeah
If you make the label 0.75rem try making the distance 1.5rem between inputs
Well looks much better now
Great! You could even experiment with adding 1rem between label and input field and bumping the spacing between inputs accordingly
Hey. I have finished the Form components and deployed a test version. Can someone give feedback on the dashboard page, and expecially the
tag-input component that I have made in the Songs form. I want to know only UI/UX feedback for the dashboard route (Other routes still in development)
Deployment URL: https://song-list-dun.vercel.app/dashboardReact App
Web site created using create-react-app
I like it! I think there's some opportunity to experiment with a few things:
I think your page is a bit too bright, could be because I'm tired rn though. I'd try to tone it down a bit and pick colors that are a bit darker on the color wheel.
Maybe you could add a background to the page/cards/elements to make it a bit more interesting. I really like https://heropatterns.com/ for this
I think the full sized cards look good on mobile (and possibly tablet) but I think for larger screensizes you could try to have 2 cards in 1 row, or more depending
It feels a bit off on the input fields when you click them. When you click on an input field to focus it, it removes the shadow and puts the outline there. Maybe experiment with keeping both on and see if it looks better? I find it a bit jarring that the shadow just completely disappears on click.
Talking about shadows, I'd tone down the box-shadows on the input fields a bit.
Not sure if your live site is the same as your development site, because I don't see that dropdown for artists. It looks good though. I think if you add a really soft pink border-bottom to the options it would look great
All that stuff is just me being nitpicky, it looks good so far!
Thanks. I will try to incorporate those changes. I was testing a few color schemes which go with white and purple, found a few good ones.
Yeah the shadow disappearance does seem a bit off. I will change that to maybe increase the shadow when in focus.
Also the popup functionality pops in only as you type into the input field. It needs a minimum of 1 character in the input to show in the markup.
ohhh
i'd make sure the genre dropdown is styled exactly the same
Yeah. I forgot to style the Select component. Will do that.