⚠ 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:
Let’s continue with our next block named 1.2 Menu. Here we will be using a horizontal CollectionView. It’s important that the project adheres to the MVVM Design pattern. That’s why I used text properties Binded.
Finally, the result of the first screen! ??
Let’s continue with the second page!
Defining the main structure: To start developing the complete design structure that will contain our second screen I will use a Grid.
Once created the main structure of our second screen, let’s start with the first block! In this part we will be working with the Main picture block and to replicate it we just need to add the following parts:
To replicate the “Rounded board” block, we just need to work with PancakeView to achieve the oval shapes above.
To replicate the “Legend” block we just need to add the following parts:
Finally, the last block named Menu options! I also used a CollectionView to replicate it!
And the result of the second screen it’s done! ??
And our Burger UI App design is done! ?
Thanks for reading!!!