Design Feedback
Im creating a link in bio tool to learn nextjs 13 app dir and just wanted some feedback on the design of a dashboard link so far. Something seems off to me but I am not sure what, maybe the colors of the icons or spacing? (too tight?) Thanks!
- icons might be too big?
- icon color too bold?
- spacing too tight?
- space between links too little?
13 Replies
and is it clear that the left handle icon is for dragging the links to do reordering?
Heya @Perfect Designer/Noobdev here.
Icons are fine but the layout might be more clear if you make sure the icons are located next to their action.
- Putting a boarder around the link will help set it out from the rest of the items.
- The trash icon could be put next to the link if its action is to remove a link?
- the Trash icon could be put at the top of the card, if its set up to remove the entire card.
- Hover states for the drag button could be added using the group hover sudo in tailwind. so you know when you hover the card is draggable.
Attached a few mocks.
Lete me know if that helps,
Otherwise ill get back to learning mutations/
Actually i just understood this is the title and the link. So yea. might make it more clear.
Oh yeah totally forgot to add a hover on the drag icon, good catch
Also, the delete action will do the entire card (not just link). I do like it in the corner and the drag icon in the opposite corner. However, is that considered wasted space in between?
I also really like the idea of the border changing color if it’s being dragged so it’s easier to see
Thank you for the feedback much appreciated!
All good. Happy building.
DW about a bit of whitespace. It makes the card more legible to the end user.
Any more design advice you need, hit me up.
Oh I meant to ask what icons are those that you used? I like them better
I just used Hero Icons. But i dont know if they have the drag icon. Made that one quickly
Ok cool, I think the trash one is especially easier to see
You could use the bars-2 icon as a drag handle. Its pretty common looking.
Yeahhh I might do that, I sent to my parents and asked if they would have any clue what the drag icon would do and they said no idea lol
They are always my baseline for if a design of mine is easy to use haha
Dont forget to update the cursor to the drag pointer also. Will add to the usability
Ohh good idea
I’m gonna do a bunch of updates and I’ll report back for your opinion