One of the assignments given when I was enrolled in the UI/UX Design class last month, July 2020, was to recreate the looks of a mobile app. We were asked to recreate two screenshots of any pages from the app we choose. This was assigned so we can learn how to use either Figma or Adobe XD.

I picked Youtube Mobile App and recreated it on Figma. The two pages I recreated were these two:

I could choose any other applications that were simpler, but I thought that would defeat the goal of learning how to use Figma and examining the interface design of an app. And at the end, the recreating process itself didn't take me that long. It was the learning process of using Figma that took time. Well, that was the purpose of this project, so all's fine.

I had fun doing this task. Figuring out what fonts Youtube uses, the colors, and also the kerning. Finding out how opaque the video progress bar and the time box on every thumbnail.

And, we were not allowed to just cut the icons from the screenshot and put it on our recreation. We should either look for them online, or recreate the icons. The icons looked simple enough, so I chose to recreate them, including the YouTube play button. The only thing I took directly from the screenshot was the 'YouTube' writing from the logo, which was acceptable.

It all took less than 5 hours, including the learning process, the icon making, the coloring, everything (also including break time, hehe). Not bad for first time.

Here they are, the finished products: