0

I have a design problem where I really don't know how to handle it. I am using Bootstrap 5 together with Bootstrap icons and my website creates a card for every client entry (clients = devices). The color scheme is a dark sidebar and blue highlights.

This card displays the name of the client, the current IP, two download links for downloading a certificate and key and aswell the information when this certificate wont be valid anymore. So when you click onto the blue text with the filename, a download will start. There is also an icon (the tool icon) that opens a popup to change the IP and a link ("create new certificate") that opens up another popup for creating a new certificate for this client.

Currently my card just looks very basic and I think it has to much blue in it. If many card are visible at the same time you will only see those blue links everywhere and thats a it to much I think. I tryed a differend design version (Example2) with icons and its a bit better but I am still not satisfied with that. How could I solve this problem to make the card more appealing to the user? The website is only for desktop usage, so it doesn't need mobile compatibility.

Here is a codepen with the card as example.

Example1

Example1

Example2

Example2

Improve this question

1 Answer 1

Reset to default
1

You need design

  • Add the avatar, this will serve as a reference point for the rest of the layout
  • Change all text links to buttons
  • Extract the part of the text that does not belong to the link
  • Place reference titles to each button
  • If necessary, add the "replacement" icon to each button

enter image description here

Improve this answer
1
  • That looks way cleaner. Thank you for the inspiration :D Commented Jan 17 at 11:03

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.