Intersection of Design and Code

Digital product design is always evolving and looking for ways to improve and push itself in new and exciting directions. Not just for the sake of new but for actually discovering ways to make products feel more natural and part of the physical human experience. While these digital products are never going to be as real as physical objects, we can find ways to bridge the gap to make the digital more physical and in the process make it more human.

The problem is that theory and talk is cheap and when it comes to bringing meaningful and real products to life, there are actual constraints that can at first seem like barriers. Usually, you can only pick two of Fast, Cheap, and Quality.

• Fast and with quality, won’t be cheap.
• Cheap and fast, won’t be of quality.
• Quality and cheap, won’t happen fast or maybe even at all.

Is there a way to cheat or bend this well-established rule of thumb?

As anything progresses it inherently becomes faster and cheaper to deliver something that is considered quality. The problem is that human nature keeps redefining what these all mean, as these metrics are relative and not based on any absolute measurement. The question should be then, how do we evolve as humans? We evolve by gaining access to new knowledge and tools.

The combination of new accessible knowledge and tools will always produce an environment that will be filled with human curiosity.

In product design, we are at a point where newly accessible knowledge at the intersection of design and engineering has never been better. With the advent of online communities like Meng To’s Design + Code, Javier’s SwiftUI Lab, and Code Academy, just to name a few. This democratized access to knowledge has given more opportunity to someone who has the determination to learn and get their foot in the door.

Knowledge can only take you so far, without a way to effectively express ideas and share them, they’re merely relevant to yourself and not a bigger human experience. That’s why having access to tools that reduce the friction between ideas and expression are vital to evolution.

As an example, for a week and a half, I decided to explore what it means to design and code a product that is more physical, more human. I started with a completely blank page with no preconceived notion of what I was going to make. My journey started with a vague idea of a layered leaf animation that covered the pages from the edges. Kind of like brushing away leaves to discover something hidden underneath.

I ended up stumbling upon a marijuana leaf during some exploration online, which led down the path of making a simple shopping app for marijuana products. I used Sketch for the initial user interface design and InVision Studio for bringing the static interface into the physical realm of motion and space.

By fleshing out and solidifying some basic interactions in InVision I was able to confidently move into development with ideas on how to bring these ideas to life. For development, I used SwiftUI, a new declarative programming framework from Apple. It is by far the easiest and most flexible dev framework I’ve seen that is friendly towards designers, extremely concise, and powerful in the interactions you can build. It is a complete package that ties together a powerful animation system, a live visual preview, exceptional flexibility and depth if and when you want to dig deeper. While still in its infancy, it is one of the most promising mobile dev frameworks I’ve seen and blows the socks off of all the reactive based web solutions that exist today, when it comes to ease of use mixed with the breadth of expression.

This experience of going from nothing to an idea and design to then a nearly functional product in less than two weeks is proof that as we gain access to these new tools and have the knowledge, we can evolve into a new phase of exploration. Not just exploration that gets lost in the dark but exploration that sheds light on practical ways to bring digital products closer to the human experience.