How learning to code made me a better Product Designer

Last fall, I took a part-time course in Front-End Web Development with General Assembly in New York. It was my first time going back to school since college — a sensation first exciting…

feeling-accomplished-yay-412b8

…then a little frustrating…

…and finally triumphant with the completion of my website project (which, btw, I admittedly have not worked on since :\ ).

SwingQuote

Ultimately, my experience was well worth the investment of time and money. I didn’t become a front-end developer, and I didn’t expect to do so. I also didn’t quite level up to the next level of UX Unicorn: I would not trust myself with production code for serious projects right now! And contrary to what I thought I’d start doing after this course, I don’t typically prototype in code either.

From a Product Designer perspective, though, I’ve now had several months of applying this new knowledge set in a design role, and here’s what I’ve experienced as major benefits from learning to code:

  1. My visual specs and styling instructions are more realistic. With a better understanding of CSS, my visual guidelines for developers can be produced more systematically. I now know how to translate mockups in ways more compatible for actually implementing the code.
  2. My designs are more consistent. Along the theme of the previous point, the conceptual foundation of HTML templates and CSS have shaped my visual design approach to be more consistent and reusable.
  3. UX-dev collaboration is stronger. We can (more-or-less) speak the same language now. My eyeballs no longer glaze over as soon as the techy-talk busts out in a meeting.
  4. I can take advantage of new design software features. Adobe Suite, Sketch, and all the other top tools are loading in new features that help seamlessly marry visual designs with code. So now I can actually use them!
  5. I’m more considerate of technical constraints. Learning JavaScript and other technologies have really opened my eyes to developers’ perspectives. I have a better understanding of technical limitations, and why asking for things like form customization is such a bitch to deal with.
  6. I ask better questions. Along with the previous point, I know to ensure that the developers on our team are brought into conversations and involved in the decisions about our technology early enough. I find myself more capable of researching frameworks, libraries and support matrices (caniuse.com is my best friend), and with that I’m more prepared to ask the right questions.
  7. My QA testing is more useful. Instead of just reporting issues, now I can easily go into the DOM and inspect bugs for myself. I can provide better information, figure out which issues probably relate to one another, and even specify exact styling changes right there in the browser.
  8. Responsive design finally makes sense. There’s so much more to designing responsively than simply working with a grid. It’s been so helpful to really understand how breakpoints and media queries work.
  9. I appreciate engineers even more! …which basically puts them at the top of the castle.

hyjqy

Shout-out to our awesome instructor, Hart, for making the class such a productive experience and making those 3-hour night classes something to look forward to even after a full day of work!

So, for any other UX/UI Designers, Product Designers or Creative Directors out there who are on the fence about learning code — it’s not just another unicorn skill where you’d need to take on the developer role as well! Taking the time to really learn HTML, CSS, JS and their surrounding technologies will help any product/design role for web experiences. Your products and your teams will benefit!

giphy

Advertisements

One thought on “How learning to code made me a better Product Designer

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s