SwiftUI Prototypes

I have been prototyping and exploring SwiftUI a lot over the past year. Over the last few months, I posted these prototypes on Twitter. As of today, August 3, 2023, I have my doubts about the future of the platform. For that reason, I'd like to share videos of my prototypes. As a bonus, I'll share code snippets and provide more details behind the interactions.

A bit of context about my journey: I've been coding for as long as I've been designing. I studied visual communication design in a professional arts school in Porto, where the entire school IT system was a Linux distribution that allowed you to log into your account from any computer. Each student had a free online hosting folder, and everyone took IT classes that taught HTML and CSS coding, as well as publishing that code online. As part of the visual communication class, I also studied Flash. So, my roots in design and coding are deeply connected to those technologies since high school.

At present, as an industry professional, I focus on product design, and I apply coding to my prototypes, hobbies, side-projects, and more. I have considered switching primarily to software development, and I've freelanced as a software engineer a dozen times.

My current focus is on SwiftUI, and I'm learning through the 100 Days of SwiftUI free online course by Paul Hudson. I can't recommend it enough. Thank you, Paul, for the amazing material. My experience with iOS so far has been launching a simple currency converter app in 2016 written in Swift. In the future, I hope to delve into visionOS.

Component Reference Catalog

I built the simplest navigation for different types of components readily available in SwiftUI. Code available on GitHub.

Path Drawings Prototype

Following Paul’s lesson, I made a prototype with path drawings.

AirDrop Arrow Recreation Prototype

A prototype of the motion similar to the AirDrop arrow that rotates with the device.

Checkmark Animation Prototype

A simple path animation with haptic feedback that can be triggered at any moment.

Notes App Toolbar Animation

An animation with the toolbar icons smoothly animating into the top of the keyboard. It's just a really small bit of polish work for the Notes app.

This is actually not a SwiftUI prototype, just a Figma prototype. Nonetheless, I want to include it on this list. I hope to follow up one day with the real implementation.

I love learning SwiftUI and creating these prototypes. While they don't push the boundaries in the field of human interface design, I hope to one day prototype things that are truly innovative. For now, I'll remain focused on learning the craft.

Thank you for reading.