Hello i need some help to beautification of example for below screenshot. I try searching in but not getting good example.

Any help ? how to make more beautify and standardised

I have design this layout like shown below screenshot. Its very basic UI component. I need to more standardisation as per UX and good UI component.

In simple word i have to do better UX and UI of below screen. Any recommendation ?

Screen example

1 Answer 1


There are several ways to go about this. But generally, the current table data entries have no form of hierarchy whatsoever.

So we start by:

1. Creating a hierarchy between the labels and the content: Here I am doing that by font size and weight. The contrast could be created in a lot of other ways though.

enter image description here

2. We then look at the information themselves and check how we can highlight certain data attributes. My assumption here is that loan type is a categorical data. So I'm going to be converting the loan type to tags. Tags are used for items that need to be labeled, categorized, or organized using keywords that describe them.

enter image description here

  1. The third (and perhaps final ) thing I would do is to look at the table in the context of other elements. So here I am adding some elevation to the table itself and adding a title just to distinguish it from any other table (or components) that may exist on the same page with it.

enter image description here

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