Tiny Tactics

How to Understand Code Like a Designer

Learn just enough to not embarrass yourself

--

Let’s cut to the chase with my provocative statement so we can weed out the people just wanting to jump to the comments and start firing:

Designers need to understand code

There. I said it.

But why? Most articles you’ll read around this topic hinge on one of the following arguments:

  • Coding makes you more valuable
  • Employers are demanding it
  • You can’t possibly understand how to design without learning code
  • Pretty soon, all design will be in code (my personal favorite, since this has been repeated for over a decade)

Luckily for you designers out there, none of these things are [wholly] true!

Take a deep breath. Relax. Instead, here’s what designers ultimately need to learn from code:

1. Learn what frameworks are popular

I’ve mentioned this previously and I continuously tell this to junior designers: make all the custom design components you want, but be prepared to defend them when you try to persuade developers to customize a perfectly fine toolset or framework.

Yes, many use this as an argument to learn code themselves. But if a senior developer thinks your table-sorting interaction is not worth the customization then how smart is it to waste your own time learning it yourself?

But I digress.

Frameworks are great because they save people time. This means more things can get done, and product can get shipped faster. All good things. You can make this even better by immersing yourself in the popular frameworks so you don’t go [completely] off the rails in your design.

Take a look at UI frameworks like Bootstrap, or Javascript frameworks like Angular, Vue, or Meteor. The space evolves quickly so you may also just take a look at GitHub’s trends to see what’s worth keeping an eye on: https://github.com/trending/javascript?since=monthly

You have to code at least one terrible site using Bootstrap in your career.

2. Try out code-oriented design tools

When I started, this was Flash. I loved it! I learned ActionScript 2.0 well enough to code an app from scratch.

But then it died.

And so then I picked of XAML, and a bit of WPF when I worked on a Windows-based app.

Then that died.

And so did my love for ever coding something again.

While my efforts to become a coder failed, the experiences helped me understand the interplay of design and code. Today, Framer is a great choice, and so is Origami. Neither will teach you to code, but both will teach you enough to learn basic concepts.

Remember: Your goal isn’t to learn enough to code your own app, but to be able to empathize and understand how designs come to life.

I’ve also used Codepen extensively to find UI ideas to share with developers. (https://codepen.io/collection/nwgQRw/)

3. Learn about AI/ML/Bots

You certainly don’t need to understand data science and machine learning to design for it, but this field is emerging rapidly and you’ll want to at least understand how it works so you can design for it.

Their playground is a great place to start: https://playground.pandorabots.com/en/quickstart/

I’ve used Pandorabots to understand how Natural Language works. I certainly didn’t have the patience to spend much time coding an entire bot, but I did enough to get a gist for how it would be done by experts.

Lastly, MIT also has a few newsletters that give a nice overview of AI:

4. Learn about data schemas

I had to learn this in school, but for those that haven’t, understanding basic SQL or JSON helps you understand how data will be handled in your design.

You won’t take lazy loading and data grids for granted any longer. Try playing with tools like import.io, or learn about JSON as a primer.

Import.io gives you practical experience seeing how data connects to UI.

5. Follow UI dev-oriented newsletters

Admittedly, I don’t dive in to code in any meaningful way these days. Instead I find a lot of value in newsletters. Well-curated newsletters will help you keep your eye on what’s trending and, every once in a while, a sympathetic developer will write a beautiful article that breaks down development in a way your tiny designer brain can handle. I, for one, embrace my tiny designer brain ☺️

I’ve subscribed to very dev-heavy sources in the past, but find that you can still get a lot from the hybrid UI and UX newsletters. Some good roundups are:

And that’s it. You don’t need to learn how to code to do your job as a designer. But you should absorb and immerse yourself just enough to have better conversations, get along with developers, and make better design decisions.

The next time you feel the need to stay up late and finally code that weather app the whole world has been waiting for, pick up Framer instead.

When I’m not writing the 1,345,625th article on whether designers should code, I’m working on Sketch design tools at UX Power Tools to make you a better, more efficient designer.

Follow UX Power Tools on Twitter
Contact me directly

--

--

Christian Beck
UX Power Tools

By day, executive designer at Innovatemap where I help tech companies design marketable products. By night, co-founder of UX Power Tools.