You're a web designer, you know CSS. Do you need to learn JS too?

If you're wondering how JS can be useful for you as a web designer or if you're convinced that HTML and CSS is all you need, then I have a few things to show you that might change your mind.

I could just end this by saying something along the lines of:

"Yes, because you'll be the shit."

But I actually want to try and convince you that JavaScript can be a pretty useful tool for your design work. You might find that there are people on the Internet who think that designers should stick with Photoshop or Sketch. That's bullshit. Sometimes HTML and CSS are just the things that you need to get the job done quickly. But right now, I'm here to talk about the benefits of using JS in your work.

  1. Go beyond pseudo-classes.

    If you're using transitions, you need some way of triggering the transitions in the first place. That is, you need to change some CSS properties to see the animation happen.

    Now the most common way to do this is by using pseudo-classes like :hover. Here's an example of that (hover over the button to animate the shadow):

    But that only gets us so far. There are times when we want to programmatically add and remove classes. For example, say I wanted something to happen after I clicked on a button. Slide in a menu. Show a modal. Anything, really. Here's an example:

    So here we used JS to add a class to the background element. Adding the class changed the property that we wanted to animate and voilà! Here's another example but this time using CSS Animations. Click on the ❤️ below:

    Here we added a class that applied the animation property to the element. Learn more about adding and removing classes for transitions in here.

  2. Become omnipotent.

    With JavaScript, you'll get a new superpower: The power to know what is happening on the webpage.

    Say I wanted to know when an animation stopped playing. And say that I wanted confetti everywhere right after the animation. One way to do it is to set the confetti to display right after the animation using a delay. But what if the animation is only triggered by the user? I wouldn't know when to trigger the confetti then, right?

    Enter events in JS. I can add something like $(".HeartAnimation").one('animationend', ...) which would tell me when an animation ended. Here, try clicking on the heart again:

    As you can see, the confetti came out right after the heart animation finished.

  3. Take advantage of animation, visualization, and prototyping tools.

    There are libraries out there that you can take advantage of such as GSAP, Popmotion, and mo.js that can help you make really mind-blowing UI, and even help you transform and animate SVGs that you made. Some libraries like D3 and Mapbox can help you add visualizations with interactivity in it.

    JavaScript isn't only limited to the browser. Tools like FramerJS allow you to prototype using JS (well, Coffeescript to be exact).

  4. Because you'll be awesome.

    This is more abstract, but the truth is that learning is downright empowering. Here's a slide from Rachel Nabors:

And that's it

I hope that got you thinking and I hope you consider learning JS in the near future. Here are some links that you might want to check out:

Did I miss something? Email me!

Did you enjoy this article? Don't miss my next post!

Comments