What if a designer learns code?
The ironic life of a designer.
Since I started my UX/UI design career, the biggest challenge I had was that my designs weren’t going to be the final design without a developer’s touch. Ironically, the quality of design was up to a developer’s design skills, not mine. All I could do was to help them by providing descriptive spec guidelines.
Those spec guides! They were so hard to update and often turned out to be incorrect. Even worse, a perfect guide didn’t guarantee a perfect implementation. It was still up to a developer’s interpretation of design.
Observing myself, I found the truth.
This frustration led me to analyse the core problems around me. I started to pay attention to the conversation between me and the developers. I noticed two main mistakes I always make.
The first — I often forgot to design for error cases.
Me: Here, some concepts I made. Let’s start making the app!Dev: Wait, what happens if there is a network error?
Me: Urgh… I… don’t know?!
The second — I didn’t check the actual data before designing concepts.
Me: Like this PSD, I want to use the thumbnails as the article background.Dev: Wait, the photos coming from the API are
100×100pixels!Me: A…API?!
Similar to a developer who keeps making visual design mistakes, I was a designer who kept missing important information for developers to build the UI.
Hang on, art and technology are together!
Even if I started noticing of my lack of software knowledge, somehow no-one raised that as a problem. It’s treated as a trade-off for being artistic and creative person.
I couldn’t agree with that. I always admired people who can combine art and technology together. Indeed, I learnt some creative programming in university, hoping that one day I’d become like them. One crazy thought sparked up in my head.
What if I code instead of design? What if I code everything creative and beautiful, without bothering developers!
Fearlessly, I jumped into learning programming again!
Tried, failed, tried, failed.
HTML, CSS, ActionScript, Processing, jQuery and etc… I’d been introduced to small patches of programming languages from various design classes back in university. All the classes was optimised for art students like me. It wasn’t hard to follow basic programming norms (i.e: if / else and for loop), but the rest was too difficult to understand.
But this time, I bravely chose an online course for learning Objective-C and Swift. Of course, I failed. Even though I could follow the examples, It never felt like that I’m creating something. ‘Being a parrot’ would be the perfect way to describe this feeling — it’s not your knowledge, you’re just mimicking.
There must be an easier path for me!
The only memorable lesson I learnt from the iOS dev course was that there are many programming languages and they are not the same. The diversity of programming languages is similar to real languages in the world!
I studied Japanese and English at high school. At first, I found English was extremely difficult. It had too many weird concepts that don’t exist in my native Korean. On the other hand, Japanese was easier to learn because it was similar. Learning Japanese was more motivating for me. I could chat to a Japanese tourist, and read comic books. It was really fun! After realising the joy of learning a new language, I finally got the courage to learn English as well — and here I am. So I decided to take a similar approach to programming languages.
ActionScript, JavaScript, jQuery… they are script languages. Therefore, if I picked a similar language, it would soften the learning curve. I altered my plan to instead learn Framer (which uses CoffeeScript) for making prototypes. I instantly noticed it was much easier to understand compared the time I struggled with Swift. I changed my path of learning.
Arrays! I finally understand Arrays!
Arrays were the most difficult concept in programming for me to understand. I always made a list by using for loop, and then got stuck because I didn’t know how to animate a layer when you click. I asked for help from the Framer community. A few minutes later, a kind person created a revision for me! It was exciting.
I sat down at my dining table, after drinking some beer, and tried to figure out what was happening inside of this prototype. There seemed to be a step-by-step process.
1. Making an empty array.
2. Creating a for loop with layers.
3. Creating an Event (Click).
4. Specifying which layer will have the animation by using the index of a layer.FYI — I took a pain killer whilst reading the code.
A Function is similar to a Photoshop Action!
In contrast of learning array, I found it was much easier to understand function. It was like Photoshop Actions for designers. You define a work flow, then apply it to an object, many times. Creating functions was fun. I made an upgraded version of the previous prototype to practice this new technique.
Incorporating for loop, array, and function together enabled me to create high-fidelity prototypes.
It solved communication problems!
As soon as I started to create interactive prototypes, it changed my entire design workflow. The biggest benefit I had was that I can show working concepts before fully polishing the design!
This was amazing. Whenever I have some ideas, I make a prototype, kind of like a wireframe. I bring it to the project managers and they plan a user testing session. I bring it to developers and they start making plans, researching any needed technical requirements. Whilst everyone understood how it works, the rest was up to me. Make it beautiful!
Our entire team saved so much time. Clients started giving more valuable feedback, and somehow they’re trusting me more. Now, I start designing everything in code.
Let’s make something silly, and enjoy learning something new everyday.
I’m aware that should a designer code? is a heavily debated and sensitive subject in the design community. The question itself has a point, but I don’t agree with the way it forces or criticises designers to learn programming. Because we can’t learn well when we are already stressed.
Learning is full of failure. There are stressful moments. Making something silly helps you to be relaxed, and it lets you to be creative. We tumble a lot when we learn how to walk, don’t we?
Being silly sometimes lets you to make something clever. Like my slide to unzip prototype. That justifies me to stay silly because I can learn something eventually.
I’m still a beginner, and a very lazy person as well. My developer colleagues told me that the way I learnt coding had opened up a different perspective for them. I found the courage to write up this story as a result. Hope you enjoyed reading it!
If you want to try your hand at Framer, you can download a free trial from their website.
You can follow my twitter (@arle13) to check out all the small silly things I’m doing.
