Learning to code as a designer
Learning to code as a designer is crucial if you want to be successful in today’s digital world. With the internet running the world and the endless number of websites and apps growing, a basic understanding of programming languages like HTML, CSS, and Javascript and web developer-friendly concepts like “The Box Model” can give you a massive advantage in your design career.
I am a Senior UI Designer with over five years of experience. First hand, my thorough understanding of the entire web development process has made me a more competent, profitable, efficient, and skillful designer. In my tech career, I have worked as a QA Tester, a Web Developer, and now UI Designer specializing in user-friendly, accessible digital interfaces and design systems. Learn more about my journey of becoming a Web Developer to a Designer who can code.
Better Communication
Learning to code, specifically web programming languages, will help you communicate more efficiently with developers and other project team members. Better communication makes the design process smoother and more effective since you and the developers can work together to create a realistic final product that meets the client’s or end user’s needs.
As a bonus, developers love when a designer understands the code’s or software’s limitations. When a developer knows they can count on the designs you produce to be practical, scalable, and easier to build, they will appreciate you and look forward to working with you in the future.
Better Designs
Learning to code as a designer can also help you create more interactive and dynamic designs. By understanding the capabilities and limitations of different programming languages, frameworks, or libraries, you can add more advanced features to your mockups, like animation, custom user interactions, and data visualizations, making your work stand out and more engaging for the user.
My #1 tip for every designer working on a product team is to learn what frameworks and libraries your developers use. Most of the time, you will find there are design equivalent libraries. Take Material UI, for example; the same team that manages the code framework also offers a low-cost Figma library that provides you with pre-made components and styles that match what developers can use in the code. Utilize the resources available because taking advantage of libraries like this will make you and your fellow developers work more efficiently.
Better “I can do this myself”
A basic understanding of web programming will allow you to become more self-sufficient and independent. Instead of relying on developers to implement every aspect of your design, you can take on more responsibility and ownership of your work. There is nothing quite like having the freedom to convert your mockups into semi-functioning prototypes to test design ideas.
A massive bonus (and my favorite overall) is ensuring a 100% match of design to code. Every designer has been through the frustration of spending weeks researching, designing, and getting approval for a new design, only to have it implemented in code like a poorly collaged version of what you made. It sucks, but it happens a lot, and unfortunately, it’s just the nature of the beast while working in product design. However, if you could write CSS yourself, you could dive in and clean up your developer’s misdeeds to remedy that screaming voice inside your head ????. But in all seriousness, having a little frontend knowledge will make you a valuable asset, help developers, and improve the end product.
Wrapping up
In short, learning to code as a designer and understanding the basics of programming and web development can do wonders for your career as a designer. It improves communication and collaboration with developers, enhances your designs’ interactive and dynamic nature, and increases your independence and self-sufficiency in your work. Learning to code is worth your time and effort.
If you found this article helpful and I’ve successfully convinced you to give coding a try. Read my post 10 web dev tips for new programmers.