⚠ Before starting, to get the best out of the post, I’ll leave you some instructional notes so that you have a better experience reproducing the UI:
Let’s divide the original design into blocks
To better understand, I have divided the original design into blocks, which are listed in the order in which we will be reproducing each one, these are:
To replicate the “Contact information frame” block, we just need to add a frame to achieve the oval shapes above.
To add all this contact information we will be working with a Grid which will be contained in Two columns and six rows. Let’s start adding “Your balance” block.
And finally I also used a CollectionView to replicate the history list.
In the main image of this post, I added some screenshot of the IOS version, now I’ll leave those of the Android one.
And our Banking Profile design is done! 😎
Thanks for reading!!!