Stack A Flag
A gamefied way to learn the first steps of interface building using SwiftUI, in a graphical, fun and universal way.
- 2020
Discovering
Even after countless hours trying to learn how to code I’ve always felt a barrier in the learning process of coding, but that changed when SwiftUI, a new declarative way of coding, was announced at WWDC19.
This new framework gave me the power to take my ideas off from the paper and into an interactive screen, like Stack A Flag, developed entirely using SwiftUI. This framework is perfect for making prototypes, particularly when building custom UI.
To learn more about I turned to different guiding resources, and one of them was the book SwiftUI by Tutorials. That’s when I found one very simple, but very eye-opening example.
The example consisted in a user avatar with its name and two stripes in the background. But it’s represented in two different ways. The first one in a bi-dimensional representation, and right below it, a three-dimensional perspective, where the elements were “going up” in a z-axis. This is how the authors introduced the concept of ZStack.
From this example I knew there was something I could explore and turn this into a learning interactive experience.
Defining
Therefore, I used the forced connections technique, which is a creative method that I found in a book by Ellen Lupton. Forced connections are based on the brain's ability to link two disparate items and then use the new language generated by the linkages to think through the problem.
Eventually I came across vexillography, which is the practice of designing flags.
Besides having a great interest in the vexillography, flags seemed to be a perfect way to train the brain to see the forms from a different point of view. Thus, one thing led to another and when I realized I had created a puzzle game where the user’s goal was to use SwiftUI layout tools to replicate national flags.
Developing
The first thing I did was to create an MVP of the solution to test with potential users. Made out of three layers of cardboard, some duct tape and a lot of glue, I got to test the first three levels of Stack A Flag.
After some positive feedbacks I started to code, and by the end of the week I had already developed the full experience which consisted in five levels. In each level I went through a fundamentals of layout in SwiftUI, with exception of the last one, where the user had to apply all the knowledge from previous levels.
Stack A Flag let its user to learn how to create a layout by organizing the colors of the flags, thus evolving their learning and associating their discoveries with programming.
Result
This interactive experience was submitted to Apple's Swift Student Challenge 2020 and was selected among 350 projects made by students from around the world.
As a personal challenge I started working on a mobile version, so stay tuned!
