How becoming a UX/UI designer largely improved my coding skills
Looking at things from a new perspective
It is often told that the best way to improve in something, is to practice it over and over again. Obviously, practicing without a plan could be more dangerous rather beneficial for both your skills and mental health, but sometimes you just feel stagnating even with the best of plans.
How many times have you felt unable to do anything? Well, that happens to me on a daily basis: I try something new and fail, so I go back on my pièce de résistance, and fail anyway. But is there an alternative approach to improvement?
Looking at things from a new perspective
I started coding in 2014, but I didn’t feel it good for me: I always sucked at math in high school, and when college lessons started, the worst of math just appeared again in my life. In the end, I passed all my exams and got my degree in web technologies, but I felt that coding was not going to be my future.
This feeling of disinterest fueled my lazy approach to coding, and this led to a steep and frustrating learning curve. I developed some simple websites, tried to do some basic procedural animation in Processing, even small games…but everything was just sloppy and soulless.
A small universe simulation I coded with gravitation physics.
Becoming a designer relieved that accumulated stress for over a year, in which I improved my graphic design skills, my artistic side, and my knowledge of aesthetics and usability in general. The year passed, and I found myself dealing with code again, but this time things went different. A lot.
I can bring to mind four different reasons my perspective changed so much.
4) Job offers terrorized me.
The first new perspective was to learn things based off on job requirements. This happened because looking at UX/UI job offers, I found out dozens of companies looking for developers.
I started believing that I had to improve my skills with coding frameworks if I wanted to afford some food someday, since every designer job offer asked for at least a coding framework.
So, I forced myself to learn the basics of React.JS, since it seemed one of the easiest and most appreciated things in these years. This already improved my coding skills a lot, since for the first time I had to deal with state management.
3) Becoming a designer forced me to look at art.
How to get better at art? look at art. You need to develop your eye, and daily flooding my mind with art and design made me understand better WHAT should be developed, in addition to HOW (React, for example).
I discovered Awwwards and started feeling jealous. Those websites were just amazing. So I started copying them in my prototypes, trying to discover the “patterns of aesthetics”. This is still a long and hard quest, but my brain is starting to automatically imagine better interfaces.
Design taught me minimalism, and often it’s enough to get good results.
2) Usability “tricked” me into learning performance techniques.
One of the main properties of good interfaces is being smooth and fast. The usability perspective became stronger in me. I started giving myself strong constraints on performance, and I started studying how to code smooth interfaces with pure enthusiasm.
This helped me improve my workflow and discover a lot of tricks, like creating different sets of images and arrays to dynamically interchange them. Even obvious things like importing JPG images, instead of heavy useless PNG ones, wasn’t a thing for me at the time.
Imagine if this ran at 10FPS. It would be bad. Incredible artwork by Kevin Pham
1) The impelling need of concretizing abstract ideas
The most important reason why becoming a designer improved my coding, is that now I had the urge to bring to life my concepts. And my concepts became a lot more complex too.
When you have no ideas, it’s hard to find the right motivation. By filling your mind with infinite possibilities, you start feeling the need to give life to at least some of them.
I am pretty sure that at least once in your life you’ve invented a fictional videogame or movie character, and you just loved to see it for real: that’s why videogames let you custom characters in the first place.
Sure, you don’t start drawing or 3D modeling the first time you think of a nice fantasy hero, but imagine thinking about that character 8 hours a day. Believe me, you’ll feel the urge to create it.
The same goes for websites et cetera: you think of a wonderful motion design, and then you need to develop it. This is exactly what happened to me. Once I had thought of “advanced” dynamic websites, I started looking at how to bring them to life, and this improved coding in two different ways.
- I had to learn to code them
- I had to learn how to use packages
In fact, since I am not a great developer, I forcibly had to look and use scripts or libraries made by others. This taught me how to use the basics of NPM and exploring Github, while also integrating all these libraries with my code.
Work in progress
Right now, thanks to all these new skills, I am finally developing my online portfolio website all by myself using React.js, Framer Motion, and a lot of other small libraries, like smooth scroll and GSAP. Sure it isn’t going to look as good as portfolios designed by designers and developed by developers, but…
the added value of being a self-made and self-taught product is immense.
A Jack of all trades UX guy. Mainly interested in human-computer interaction, contemporary sociology and art.