The era of web designers working only with Photoshop or Illustrator is gone. I am sorry, but it’s true. And the sooner you accept it, the sooner you’ll be ready to step into the modern era of web design. If you haven’t started already, now is the best time to learn something new: code.
You can argue that up until now you have been okay with drawing all your designs in your favourite vector/bitmap tool only, not touching one bit of code. You’re probably okay with that, but I hate to break it to you… times are changing. If there were one thing that is rapidly changing than other industries, it would be web design. Regardless of what we — web designers — want, we need to follow the modern trends in order to survive.
Any design that should someday be live on the web, every mockup we produce: will all eventually be transformed to code. Even your banner with the nice GIF animation (don’t do that, it’s not cool anymore), or Flash animation (Flash is dead! Just deal with that), your app UI, layout design… Everything will be smashed into zeros and ones before it will be served to the final user. And if you want to be a better web designer, you need to understand what is behind your work and what will happen next after your AI file or PNG mockup has been sent to your developer or project manager. If you want to gain full control over your design, learn how to code your design. You don’t need to learn C# or any other high-level programming language. Just learn all basic front-end technologies.
Now, how to begin? Start with HTML and CSS, that is absolutely necessary. Wanna know more? Learn Less. I prefer Sass more, but I wouldn’t be able do this nice word play with that, right?
Then, have a small but intense rendezvous with JavaScript. I know, that smells like programming already, but there is no single modern web page that is not somehow working with JavaScript. Not a single one!
If you’re a newbie to coding, take online classes. It was never easier than nowadays to learn something new online. We have CodeSchool.com, we have Codecademy.com, we have Lynda.com and last but not least, we have Google!
If you a have front-end developer friend, learn from him (or her). Coding is easier than it looks. Both, HTML and CSS have been written by humans for humans, especially CSS — a language created for developers to be able to control the design (!!!)
I encourage you to just dive into it. Don’t be scared, you’ll still be using you favourite design tools. Don’t be scared, you’ll still be a designer. Just stop making excuses why not to start and START!
To make things more clear, I need to say that the main goal of coding is not to get rid of Sketch, Illustrator or Photoshop (or Corel Draw! Is there anyone who’s still using this thing?) You will definitely need to use them. But while you’ll be using them next to the code, you will see that your designs are more understandable, more to the point. Your knowledge of code will help you already during PSD/AI mockup preparation.
The point of this article is not to say that web designers without coding skills are useless. They are not! Their ideas are still valuable and they are still one of the most crucial parts in the development process. I just want to inspire all designers that are afraid of code, not to be. The main goal of coding is not to kill creative people and their great ideas. It is the opposite. Only when you have the ability to see the code behind what you’re drawing and know at what cost it takes for your nice button to be rendered in a browser, only then can you call yourself a great web designer.
If coding has taught me something, it’s this: When you know what capabilities code have and what you can do with it, only then will you be able to think out of the box and do things you would never be able to do just with your PSD file.
We are web designers and our goal has always been the same: To make the web a better place. So fellow web designers: Code!
This article was inspired by an article of my colleague Olga Baryshnikova who wrote reflection of contemporary Russian web design.
