Recreate a Dribbble App Design with UIKit Episode 1 — Part 1

This article will guide you through my thought process and approach to programmatically recreating a cool UI design.

Recreating Dribbble Designs

Earlier this week, I stumbled across this youtube video by AJ Picard recreating a design he randomly found on Dribbble using SwiftUI, and it immediately had me thinking:

1. That’s kinda interesting, seeing him basically bringing the design to life.
2. I should probably try my hand at that, (I think we all should brush up on our UI skills from time to time) but using UIKit.

So, I went and did some scrolling of my own on Dribbble and this Digital Product Store App design caught my eye.

My recreation

Before jumping into the code, lets quickly take a second to analyze and perhaps break down this design into smaller sections. I found it fitting to name these sections : the header, body & footer (if these sound familiar, it’s because I am also a web developer).