Hello, My name is Mandy! I’m a Canadian UX/UI Designer currently working at UUUM in the System Unit team.
For this post, I would like to talk about neglecting code as a UX/UI Designer. Although my history as a designer may not be as long as many others, I would still like to share several opinions I have regarding this topic through my experiences so far. This is just my way of thinking, I am not saying that people who disagree with me are wrong, but our opinions just don’t match. That’s all. Everyone has their own way of doing things, and this is just the way I’ve been and it’s been working well!
Most designers dislike code. I’ll admit it, I dislike it. I dislike it because I’m not good at it. It’s a natural feeling to have when you’re not good at something. And yes, I have neglected it. I refused to learn more than I needed and never saw the reason to why I needed to learn so much.
- “I know my HTML classes, IDs and CSS, what more do I need?“
- “Being able to make a button is already a luxury. “
- “I want MORE design tasks, I’m not a coder! Ask the engineers to do it!“
Technically, there is nothing wrong with what has just been said.
- Yes, knowing the basic HTML and CSS should be enough…
- Being able to make a button is a luxury, just like a bonus!
- What designer doesn’t want more design tasks? I’m still begging for more even as you're reading this!
But let me tell you, I’ve come to accept code. I decided to sign a peace treaty with it and become friends with it. As time passed, I have learned that there are many benefits to having more knowledge in coding as a designer.
You will make better judgements with design renewals
It’s renewal time! Nothing is more exciting than a design renewal for an outdated design from 10 years ago. You’re excited, passionate and your eyes are sparkling. You create a new hip design and confidently present it to your teammates.
Your project manager blanks out and your engineer teammates freeze.
“This looks great, but all those new features…”
“How long is this going to take?”
Then you’re like, “Wait, what? You mean… we can’t do this?… But its a renewal right?...”
Okay, maybe you aren’t that stupid to change the entire design in a blink of an eye without thinking. But having some knowledge in coding can really help with deciding what can be changed entirely, and what can’t. Knowing the limits and details of the development can really help pinpoint what should be changed next and prioritized.
For example, you want to change an ugly bar graph thats in the application you’re working on, you can’t just change it on a whim. First you need to look at the code.
- Is it made with the default plugin with the template?
- Or is it a plugin from another library?…
Once that is figured out, you find the plugin and then look at the limitations of it. Check whether or not it meets with your ideal in terms of customization. Not really? Well, talk with the engineer. Ask them what they can do, how far they’re willing to go and how much time they’ll be willing to spend on it. And from that, you can make your judgement with the design and how much you will be able to change it.
No point in showing off a blueprint for a castle if in the end you only have the materials to build a house. Nothing is worse than wasting time on doing more than you really needed to, only to be shot down entirely for something you worked very hard on.
So before you get shot down and your motivation crumbles, let's do our research and read some code!
Atomic design is based off of engineering methods. The flexibility and maintenance is praised for this method.
Anyway, I’m not going to go into too much depth regarding this, but knowing how to code, and being able to understand good CSS/Sass structures can really make atomic designing a lot easier to understand.
Actually, I found that understanding BEM has also helped me a lot too, like being able to differentiate blocks and elements. Blocks are like the reusable components (buttons).If you have learned proper code, you will immediately understand the importance of Atomic design and appreciate it.
Engineers will Love You
You will be their savior, god, anyone else you can name that is considered the existence from above, you will be that existence in the eyes of an engineer. They will love you. I know what you’re going to say. Yes, there are tools like Zeplin that make passing the design to engineers a lot easier and understandable, but you know what makes things even easier than having back and forth conversations and a billion small fixes?
YOU! Yes, YOU! The person who made the design!
No one other than yourself would understand the design more than you do.
“But I’m not an engineer”, you say?
But is there a harm in coding the design yourself? Absolutely not. Your coding skills will only get better, and the engineers will only love you more. You will be the most dependable designer on the team. Even the project manger would love you. By coding the design, you’ve shortened the amount of time needed for the development stage and you've created a smoother workflow for a smooth baton pass to the engineers.
As you learn to code the designs you make, you also learn the faults of your design and can slowly improve your design systems and workflow.
There’s nothing but positive results when it comes to knowing code as a designer. I can’t say I love, because I don’t love it like engineers do, but it is now my friend.
You should never neglect code. UX/UI designers design interactions for the digital mediums. Digital mediums are created through code. I believe that coding comes in a package with UX/UI design. Designers who don’t know how to code, will always fall short on their designs compared to those who do.
If you’re still neglecting code, get studying!