How Programming Knowledge Can Help UX/UI Designers
I’m not a coder. I know that my skills lay firmly on the design side of things, not engineering. But I’ve still taken the time to understand basic HTML and CSS and I’m learning about JavaScript. I’m sure they’ll be another language at some point I’m interested in too. Why? Well, while it’s not a direct necessity to have this knowledge in order to create a good, usable design, understanding the medium used to bring your ideas to life can still be beneficial for UX and UI designers’ work.
It helps you think of user interfaces differently
If you understand the basic principles and structure of any programming language you quickly learn to see how many details and decisions go into creating each element of a design and how interconnected they are.
For example, the basic idea in HTML is that content is organized in a system of boxes within boxes within boxes like Russian dolls. Some designers use Atomic Design methodology to help them think in a similar way. Atomic Design encourages designers to look at interfaces by starting small and working their way up using a system similar to how chemistry orders the physical world: atoms, then molecules, then organisms, etc.
The benefit of Atomic Design or programming knowledge is that it teaches you to look at interfaces and how they’re constructed from a different perspective. Often that’s the best way of finding an innovative solution to a design problem or finally breaking out of that rut to figure out a new, better way of doing things.
It’s another prototyping tool
So, pen and paper are great for things like sketching ideas and rapid prototyping, and we all love building our high-fidelity screens, but being able to create a coded prototype adds a different tool to your arsenal. Coding a prototype can be a more time-consuming process, but it’s an advantage when you have a very specific idea, such as a custom animation, that’s hard to mock up well using other tools.
If you’re trying to get approval for your idea or get it built quickly, a more fleshed out, coded prototype could help communicate it better. In certain cases, usability testing with a prototype as close to the real thing as possible can also be an advantage. Plus, depending on your project, the code from your prototype could actually be used in the product and speed up the build.
It helps you better collaborate with engineers
Speaking the same language is important but designers and engineers, although working on the same product, can face some big language barriers. Giving an engineer a coded prototype to start with could speed up build, but it could also help answer questions they may have about your design in a way that’s more how they think about things.
Even if you don’t build coded prototypes, having programming knowledge can help you understand better why engineers may have certain questions about your design and be able to answer them in clearer, quicker ways. It’s also helpful in knowing what information about your design engineers need to know.
For example, if there’s an element in your design you plan to have change color seasonally, you’ll recognize with some programming knowledge that it’s important to share this with your engineers because that information may dictate how they decide to approach building that element. If you didn’t share that you could find later that requesting a simple color change isn’t as simple of a change as you thought.
It’s upskilling that can make you more professionally valuable
If you’re looking to broaden your opportunities or get in with a particular employer learning one or more coding languages can give you a leg up. Not only does it add to your design skills as the previous points mentioned, but it also enables you to do other types of work, making you what’s referred to as a unicorn.
For example, some smaller companies might want a designer who can also code to help with costs. If you have a genuine interest in programming taking the time to learn could get you in the smaller pool of qualified candidates for these jobs. It’s also beneficial if you’re considering starting your own business and want to be able to offer more services and value to your clients.
Final Thoughts
Learning to code may seem intimidating or outside your wheelhouse, but as you can see it actually fits in with design well. It helps you think differently, makes you a better communicator, a better collaborator, and adds a skill to your resume. It also just gives you a bigger appreciation of the holistic product development process. It takes quite a bit to go from your sketches and prototypes to the real thing and, especially if you’re an experience designer, that insight may be interesting to have in terms of better understanding how your work fits into a product’s journey.
