I have a modal that is so boring and ugly I cannot stand to look at it. In a user table, the user can press a button to view all details about the user (the table only shows name, role, etc). This modal ends up looking like

enter image description here

I have bootstrap at my disposal, obviously, but I don't know what I should do to make this look any better.


It'd be great to have a photo. Either way, what you need is some good 'ol design here (UX and graphical). There is a lot of pointless text I would eliminate. My emphasis with bold type may be completely out of character for your app, but see my image below for some ideas.

enter image description here


Ah, the classic key/value display. I agree with Rashcom- avoid unnecessary text, and use some color to both break up the monochrome and help the user easily read and understand the information. Here's another example: Screenshot of key/value display

Here are some ideas/principles when displaying key/value pairs:

  • Bold and right alignment helps distinguish the keys from the values
  • Color helps the user quickly understand information/status (just like the green check in Rashcom's example)
  • Icons help the user quickly recognize enumerated values (e.g. the "Mail" portfolio is one of only 5 unique values, so the icon can be learned)
  • The dotted line under some values invites a hover over for more detailed information
  • Values are formatted (currency, missing consistently as N/A, etc.)

Find some inspiration

This is not the straight forward answer that you want, but it's an answer that is going to help you time and time again when it comes to things like this.

This isn't as much about the user experience as it is about a good looking UI, so it's likely you will face this question again with another part of your project, or while working on a future project. Someone's suggestion here may not hold true for the next time you want to display some information.

Try google searching images for what you're looking for, or just browsing websites that you like, even a simple google search for "beautiful user interfaces" will give you a ton of blog articles and inspiration that you can draw on.

A couple of my favourites are behance and dribbble - try searching on there or narrowing down by tags, and you will find some really great inspiration. I think that this is going to help you to build on some of the ideas that you have for good UIs. As a UI and UX designer myself, I am constantly looking at new designs that I can borrow from replicate in some way.

Take something like this design from Leon Wu on Dribbble for example - it may not be at all right for what you need, but maybe the layout works well, or may the skeuomorphism is something you like. That's the best bit about inspiration, you only have to like a tiny bit of a design and build on that. Keep looking and you'll find something!

Image from dribbble by Leon Wu

Not the answer you're looking for? Browse other questions tagged or ask your own question.