Many designers think each discipline should mind their own business, while others see no problem in professionals wearing multiple hats. Many developers see designers who code as a threat, while others see it as a facilitator. This is a hotly debated subject, and although I think some great designers are also superb at coding, I will always defend that the more you focus on a particular area the best you will be at it. But this shouldn’t be a reason for you to miss out on the benefits of having another skill under your belt.

designers coding

Learn how to code and make yourself a great asset to any multi-disciplinary team.

As a designer who has gone as far to set up Linux servers and program back-end, I see no question that understanding ‘the basics’ of coding would benefit any designer. The question really is, how much coding should designers learn? At what point might designers be wasting their time, or really stepping over the line into the territory of developers?

In order to provide some insight into the potential benefits of learning to code, I’ve broken the different levels of coding knowledge down into degrees of usefulness.

Step 1: Know the basics of HTML and CSS

Any designer would greatly benefit from knowing the foundations of HTML and CSS and would be surprised by how easy it can be. Stop being lazy and just learn this, it will make you a better designer, guaranteed.

When is front-end just coding, not programming?

Is front-end coding? Yes! Is it programming? Only after a certain point.

HTML and CSS don’t involve programming logics. You can see that in HTML - HyperText Markup Language the letter M stands for Markup, what means that it’s nothing more than a coded structure of the page/screen elements. It works like a puzzle, but it doesn’t require a lot of mathematical thinking.

In laymen’s terms, HTML is an architectural map that tells the browser what to display. The HTML map will influence how search engine crawlers will interpret the site. So, the concern here is to make sure the code is very well structured and that those systems can understand it and rank it well.

CSS, or Cascading Style Sheets, is the code that tells the browser how to display things. Metaphorically, if HTML is the skeleton of a page or screen, CSS would be the skin and eyes colors, hairstyle, body shape, limbs sizes, etc. The language has a very simple code structure that determines typography, colors, positions and dimensions. The concern with HTML is to keep it very organized for maintenance and optimized for good performance.

Understanding code means understanding your pixels

Learning how to code gives you the opportunity to know how things work. Why do we need to worry about pixel-perfection, is it only for the sake of symmetry?

If you play with HTML and CSS, you’ll notice that everything is measured in pixels (there are other measurement units - not relevant here - but they will ultimately be converted to pixels). Understanding these mechanics will change your mindset and will care for design in a more efficient way for the development process. As a consequence, not only your projects will be easier to program as your projects may look much more structured.

Step 2: Front-end JavaScript and AJAX could make you a unique asset

This is where things can start to get complicated, but it’s also where a lot of fun happens. If you’re an analytical thinker, or specially motivated, you’ll get a lot out of learning JavaScript and AJAX. As well, your design perspective will improve in knowing exactly how far technology can take you and how far you can push it to be innovative. I don’t think going this deep is necessary though, because if you know the basics of HTML and CSS you’ll already be ahead of most competitors. However, you may find some fun in making things coming to life with the knowledge.

When does front-end become programming?

Although we could stop here and have the back-end implemented, we can make our project more dynamic by adding some scripting, like if we could give a few acrobatic abilities to the beautifully structured and painted body we created with HTML / CSS.

For that, we have our dear JavaScript, which is an actual logical programming language. JavaScript can be used to display dynamic interactions, animate elements, create a very responsive communication with the back-end or server, as well as other things. As there aren’t many limits to what can be accomplished with Javascript in front-end development, now we are talking about a programming language: functions, objects, logics, conditionals, math, math and more math so that it may be a little challenging. But it’s not that hard to learn, especially considering what most clients will require.

In my opinion if you want to say you’re a front-end developer, knowing (at least the basics of) JavaScript is mandatory. You should understand how AJAX works (which is used by nearly any modern website). You should test your interactions in real time, and if you’re a motion designer, like me, you can do some animations yourself rather than having to explain it to a programmer, which may not have the same eye for the kind of detail that you see as a designer.

As well, there are the pre-processors for HTML (Haml, Jade, etc.) and CSS (SCSS, LESS, etc.), which are languages that aim to facilitate and streamline the coding process using programming concepts (such as logics, modulation, among others). The code, as it states, is then pre-processed, generating the pure HTML and CSS (also called vanilla). Even if you know only the basics of programming, these could be real time-savers.

Knowing how to program informs the limitations of devices

If you, a designer, learn front-end you will clearly see various advantages for knowing it, such as knowing how things work and see the limitations of each device.

Even browsers behave differently - let alone separate devices - so knowing this when you are creating gives you a sense of making something solid, lowering the chances of future complications in projects. Every programmer I know got a layout that was impossible to reproduce at some point in their lives.

Knowing the mechanics behind a digital project will not only give you an idea of what limits your work, but also what boundaries of technology you can push. I remember when several agencies, such as Fantasy and Firstborn, made a reputation in the early 2000’s for using Javascript in a different and very creative way.

Step 3: Back-end JavaScript might be overkill

Well, maybe we’re going too far here. Knowing the basics of back-end JavaScript can be useful depending on the stack your team uses (like MEAN stack, for example). But, you don’t have to go too far if all you need to know is how to run a project. However, if you dream of leading product teams, this may be helpful. But, if you call yourself a designer, not developer, your returns are seriously diminishing at this point, so you’d be better off expanding your creative skills.

Learn to code and collaborate better with developers

Would romantic relationships be easier if men could read the minds of women? Many would think so. I wonder the same thing about designers and developers.

Knowing how developers think and what they need to be able to do their job may sound like stepping on their territory, but it will make you a great asset to any multi-disciplinary team.

This can be very useful both for internal communications, as well as in idea pitches, because you know what to expect from the other members of the team. If you can do this, know your limitations (and how to push them), then you will be able to propose much more robust solutions to clients.

A designer who can code will see more job opportunities

One of the reasons why I closed my small company (RIP!), was the fact that I started international relationships that became increasingly more attractive than local businesses. For these contacts, today I work exclusively for this the global market, so 99% of my network is foreign. The opportunity that opened up this market for me was a scenario that required an individual who could do it all, including front-end. And I fit the bill; I could even program back-end. By then I ended up getting involved more and more with the dark side of the force, even to the point of setting up and managing Linux servers.

In every opportunity I had since then, knowing how to program made a big difference both in the screening processes and the day to day work. At Toptal we see a bunch of opportunities for professionals with this hybrid profile, and startups out there are eager to find people that can take over both the design and front-end of their early-stage applications.

designers coding

Learning how to code might lead to some unexpected opportunities.

Still, there are some designers and programmers who dislike one another snooping into each other’s businesses. Why might this be? Some may be afraid of losing work, and some may be lazy to learn something new. But the truth is that you should analyze your options, and focus on what will increase your chances of success. You may not have enough time now to learn everything, but maybe knowing vanilla HTML and CSS should be sufficient to add a significant differential to your career. It should be quick and easy for you to take the first steps. The more you know, the more you expand your opportunities. So, by experience, I would never discourage any opportunity to learn new skills.

Step 4: Database Architecture and Software Engineering Won’t Get Designers Anywhere

Unless algebra and complex computing are your thing, I would say “Dear God, no!”. There are other useful side skills you could learn instead (like knitting). People are just as likely to want to hire a designer who knows how to knit as one who knows how to architect databases. Besides, you don’t want to be in a place where you need to take care of everything, believe me.

So, should designers program?

I would say no. You don’t need to. But more and more the work opportunities in the design field add web-development, or at least front-end notions, as a requirement or a differential. So you don’t need to, but maybe you should if you want to have something else to offer, especially if you’re having trouble finding work. Sometimes we can’t find an opportunity that fits our profile, and that’s when we need to adapt to what is out there.

Conclusion

All of this said, we all know that it is not mandatory for a designer to know how to program. I know a lot of designers that don’t, excellent ones in fact.

However, in some cases, I notice deficiencies from a development point-of-view, in details that could even harm a project’s productivity.

You don’t need to be a designer who is also an expert in front-end development to have these differential skills added to your CV or applied to your projects, and you have a lot of online resources to start walking down this road. Simple skills can impact your potential for success in a very positive way.

Do some research, look at what job offers are requesting, see the profile of designers startups are looking for, and maybe you can agree with me when I say you don’t need to learn how to code, but you should.

Think about it!

About the author

Jônatas Vieira, Brazil
member since October 23, 2015
Jônatas is a Brazilian designer and digital art director with a focus on UI, UX, visual, and motion design. His passion is to design digital projects and interfaces that make technology simple for everybody. For the past 6 years, Jônatas has worked on a diverse range of projects and with teams of all sizes. He lives for colors and forms, is obsessed with every tiny detail, and never stops working until the pixels are perfect. [click to continue...]
Hiring? Meet the Top 10 Freelance Digital Designers for Hire in December 2016

Comments

Elenízio Oliveira
I'm a lawyer Switching careers; I'm getting into tech. I like Design and also like Development, although I'm more into Design. There are so many things to learn, and sometimes I get lost. This article helped clarify the path. Thank you, Jônatas! :)
Naveed Khan
Love the article!
Robert
Every once in a great while you come across somebody like an IT-Prince, who can do it all better than anybody. That's as rare in software as it is in music though, and they stick out -- it's obvious they're "special" and there's no reason to make a fuss about it. Let them do both. For the rest of us, do what you do best and stick to it.
John Ciacci, Esq.
I generally create a style guide PDF with a screenshot of the page and callouts should the color of PX size. You can see in this example: http://www.mod.cr/project/belkin/ (see the last four dots). From what I know developers do not want to be designers and designers do not want to be developers. I would say the opposite for this article that developers should learn more about design and the details that WE the designers put into it. Many developers overlook the finest details that frustrates me that I have to create such style guides so they will asking me what HEX color is that or even finer details like a 1 pixel drop shadow. HTML and CSS are easy to edit personally but to create a new document and code from scratch is impossible as a designer. It's like giving a developer a blank photoshop document and saying create the design for me.
Csongor Fagyal
In the world of Anguar, React.js, JQuery and such... I would consider a designer without programming skills almost useless.
curiel
Interesting, but in a respectful work environment we need to respect each area and If the developer can't interpret the designer kick him out! :p
Anton Chernyshev
I combined roles of front-end developer and web designer for 5 years working in it companies. What can i say, you won't become a top price designer if you spend 90% working day on coding and just 10% on design. Yes, some clients would like to get all services from 1 person because of budgets. But it doesn't mean that everybody have to accept them. If you decided to grow as designer, e.g. UX Designer, you need full time practice in this field. Same for front-end devs and back-end devs.
Jeff Shaw
I'm going to respectfully disagree about (1) database architecture and (2) math/algo's being useless for designers. (1) - Information architecture - this encompasses having a solid understanding about structures, relationships, the flow of data and how to display and organize it clearly (2) - Creative coding - many design programs teach Processing (visual lang) to their students because loops/patterns/objects are some of the fundamental concepts that separate computational design from graphical design.
Jônatas Vieira
Thanks for commenting! The point is having those skills will improve you as a designer / your designers skills, as you may know for being a developer too. But I strongly agree that a designer spending too much time coding could be terrible, I guess it's more of a matter of being well positioned and knowing how to handle focus.
Jônatas Vieira
Good perspective, thanks for posting! I wouldn't particularly encourage beginners to go this deep unless they know what they're getting into, but it clearly has its benefits.
Jônatas Vieira
I agree that there are some rare people who are ahead and special, but there are more people out there with the ability to know at least the basics of an additional skill than we can imagine though. Thanks for commenting!
Jônatas Vieira
Thanks for commenting!
monkeyboy
You've thrown some jargon at your audience without any explanation of what the terms mean, eg Ajax, MEAN stack, 'back-end', if the theme of the article is to encourage designers to get more technical then help them rather than scare them :) On the question itself, I think it's healthy for designers to learn to code, even if it isn't production quality it's useful to inform their designs about responsive issues, performance etc and more realistic to prototype in the browser than use Photoshop, Axure etc.
nemrut
As with any profession, anyone can benefit from expanding their 'toolbox.' Where it helps designers/developers is having a basic understanding of challenges and constraints so as to not waste time proposing solutions that aren't feasible or optimal. That said, imo, design unlike development has a lot more ambiguity and challenges in terms of meeting client expectations, creative direction and human unpredictability. The actual 'creative' part of design is really only 10-15% of any project engagement with the remainder consisting of the aforementioned challenges. So unless designers want to get into development and vice versa, agree with the general tone of the article that both can benefit by learning more about the other.
Angga Risky Setiawan
I'm UI UX designer and I code about php
cathyfangmeier
Woww Nice Post i like it visit Conquerors Tech For Cheap and Best Website and Software Development Company in Hyderabad - http://conquerorstech.net/index.php/services/web-development.html
Alejandro
Great article, completely agree. (Y)
Bianca Sherawat
Every person have their own talent in designing field so they just need to stick with it. Some are great ones which can do programming as well so be in the flow and just continue whatever you are doing..
Richard Koch
Hello !!! My name is Mrs Richy from USA . I want to share my testimony on how i got the blank ATM card. I was so wrecked that my company fired me simply because i did not obliged to their terms, so they hacked into my system and phone and makes it so difficult to get any other job, i did all i could but things kept getting worse by the day that i couldn't afford my 3 kids fees and pay light bills. I owe so many people trying to borrow money to survive because my old company couldn't allow me get another job and they did all they could to destroy my life just for declining to among their evil deeds. haven't given up i kept searching for job online when i came across the testimony of a lady called Emily from UK regarding how she got the blank ATM card. Due to my present state, i had to get in touch with Hacking organization and i was told the procedures and along with their terms which i agreed to abide and i was told that the Blank card will be deliver to me without any further delay and i hold on to their words and to my greatest surprise, i received an ATM card worth $1.1million USD with $8000 daily withdrawal. If you are out there looking for way to survive up you can also contact them via email and get yours OFFICIALBLANK9@GMAIL.COM
Kapil Gorve
I can do design,front end,backend. I am in early stage of of my career.I am finding it hard to get a good job because , I am not master at anything. If you look at average job posting ,HR's mention every possible tech stack in description, I dont know where these people live who knows HTML,CSS,Photoshop,AngularJS,ReactJs,php,nodejs in one year. I kind of laugh when I see such job postings for junior web developer roles.
comments powered by Disqus
Subscribe
Free email updates
Get the latest content first.
No spam. Just great engineering and design posts.
Free email updates
Get the latest content first.
Thank you for subscribing!
You can edit your subscription preferences here.
Trending articles
Relevant technologies
About the author
Jônatas Vieira
Designer
Jônatas is a Brazilian designer and digital art director with a focus on UI, UX, visual, and motion design. His passion is to design digital projects and interfaces that make technology simple for everybody. For the past 6 years, Jônatas has worked on a diverse range of projects and with teams of all sizes. He lives for colors and forms, is obsessed with every tiny detail, and never stops working until the pixels are perfect.