I agree with much of the content written here, especially regarding the proliferation of good mobile design tools. But one of his main points feels off:
“I keep questioning myself, why don’t more designers learn code? The obvious reason is that there are not enough coding resources tailor-made for designers.”
This smacks a bit of someone unwilling to leave their comfort zone. Part of development is just getting your hands dirty, writing code, checking to see if it breaks. On the web front end, you usually get “results” almost immediately, which makes it a great development entry point for designers. And in terms of “UI”, if anything among developers I know it's a move towards minimalism, the focus on just the code without a distracting UI. I don’t see most code editors changing their UIs anytime soon to mesh more with a designer friendly mindset.
I don't think unwillingness is the main reason why. It's in our nature to be scared to try something completely foreign. Most of the developers I've talked to dread at the idea of learning Photoshop, yet they welcome Sketch with open arms. It's so directly related to the way they work.
"I don’t see most code editors changing their UIs anytime soon to mesh more with a designer friendly mindset."
They already are. I believe that what designers want usually is pretty aligned with what everyone wants. Empathy is something that we strive for. Tools like Playground, Pixate and Framer are results of this mindset, regardless if they're for designers or not. It's a beginner's mindset. And everyone's a beginner at some point.
For a long time, I've wanted to write a post that's the exact opposite of this -- the way that coders design. I started out as a designer, then transitioned into being a full time developer, and now I'm a stronger dev than I am designer if we're being honest. The way I do design work has shifted so radically though, that it's insane.
It's especially evident when doing web work rather than native app work like Meng does here. While native apps are constrained to one specific size, the absolutely vast responsiveness that you need when designing for the web is such a huge consideration that it changes the way design has to happen in every way.
A lot of the time, the design deliveries I get when working at my company have not considered responsiveness at all. They will just make 2, maybe 3 mocks for desktop and mobile, maybe one for tablet, then call it a day. Every size in between is ignored. Large monitor size is ignored. And on top of that, the way that elements are treated as they scale down between desktop and mobile is often incorrect. If you are familiar with writing responsive code, which I assume at least some of you are, you'll know that while you can easily change the css, changing the html is near impossible without getting really hacky. So there are certain ways you can change the look and position of elements that you can do in a straightforward manner with css, and other things that you can't or that require outrageously dirty css hacks to accomplish. But once the design is delivered to the client and approved, there's not really any going back. There are tons of other tiny considerations too, like how many raster images make appearances etc. that I'm always thinking about as I design.
People are consistently making a huge deal of mobile this and mobile that and responsive etc. But I don't think I've seen anyone break down how to actually technically design in an efficient manner such that it can be coded responsively without hacks. It's possible, but it requires either deep knowledge of how the underlying code will be written or very close collaboration with a developer throughout the process. Design and code can't really happen on separate planes anymore in the responsive era. That being said, I still think the idea of "using the dom for design" is awful. I have tried it a couple times and it has never ever worked. I always do full visual mocks before I start coding anything.
This is a very insightful post! I'm a junior designer who wants to learn more about coding but find it very difficult. Could you share more about your experience on how you made the transition? Thanks!
Sure -- it is difficult. So is learning anything and becoming good at it. You just have to put in a lot of work like you do with anything else you are trying to learn and you'll get there. Here are all the tips I can come up with:
Make sure that you are enjoying it. Everyone likes different things, some people enjoy programming and others don't. This is why every article arguing about whether designers should dev or vice versa is stupid. You should write code if you enjoy writing code. If you don't, you should spend your time doing things you enjoy. I enjoy both design and code, so I do both. I'm not the same as everyone though, and there are tons of things I don't like and don't do.
Don't be afraid of errors. Getting boatloads of errors and messing up all the time is part of coding. Even when you are a professional, the amount of errors you get doesn't go down much. The only thing that changes is how quickly you can fix them. What makes me a good developer is the speed and accuracy with which I can debug code, not how accurately I can write code in the first place.
Learn by doing. You can read as many books and take as many tutorials as you want but they will teach you nothing without context. You need to actually write code and make stuff and mess up and fix your messups to learn. Code academy and shit like that does not count. I'm talking about blank text editor, raw html, empty page development. Intimiadating? Sure. But it's the only way to learn right. After you have tried to make stuff and messed up, then read and understand. With the context already laid down, reading and learning about what you have been doing will feel so good, and things will click into place like "oh, that's why that went wrong!"
Understand things you are working on fully. This is what makes you able to quickly fix errors, when you understand what you are doing exactly and can spot what's going wrong and understand why. Don't use shit like bootstrap or ruby on rails that generates code for you and pushes important things under the hood. Learn by thorough, explicit understanding of every part of what you are working on.
Don't spin your wheels. If you are stuck on something, think about why it might have gone wrong and try a couple things. Don't look it up on stack overflow, then paste some code you found there and hope it works, or just try changing numbers or writing in random methods. This is what I call "paste and pray". If you ever find yourself pasting and praying, STOP. While it might end up solving the problem if you are super lucky, it will probably be solving it the wrong way, but what's worse is that you are learning nothing from it since you were just guessing randomly. If you are spinning your wheels and don't understand an error, it's because you don't understand the system you are working with fully. Figure out what the underlying issue is and use that knowledge to solve the problem. Often times that means asking someone more experienced than yourself to explain it to you. Thinkful is a good program to get you a mentor, so is Airpair if you have some cash you're willing to spend.
Try to get paid for work as quickly as possible. It doesn't matter how little it is. Get $100 to make a website for your Uncle's small business. The sooner you can get paid work the better. Not because you will be making tons of money but because you have to complete it, and it's for serious. For perspective, I won't make even a basic website for less than $2500, there is a huge market of people who don't want super high end work and are willing to pay you a little to get something decent while you learn.
Don't ever use angular. Always stay away from it. People will tell you it's great and popular and you will be tempted to check it out. Do not do this. Ingrain it into the back of your brain that you should not use angular or it will be your doom, and never give that up. There are many tools you can use that accomplish the same goals as angular that are not bullshit. It will be a very long time before you are ready to start thinking about these tools, when you do feel ready let me know and I'll guide you right, promise.
Thanks so much for spending time to reply! Yeah I realize I was doing exactly what you called "pasting and praying". I was told by a lot of people that this is the way to learn coding by yourself. Guess they are all wrong. I wasn't even thinking about going to back end. I was just hoping I can master html/css and maybe some swift, or even using tools like Framer.js or Origami (yes these are still pretty hard for me).
A brilliant read and a must for any designer.
Finally a sensible answer to this question
I'm a designer, I know how to code and I actually develop websites etc now and then, and I enjoy the process, so I'm not talking from a place of disliking how to code.
But I would never expect that there's only one way to do things nor do I think that a designer who "just dumps the PSD" (and I'm not sure what that means) should be fired, there are so many skills and talents that a designer can have that thinking that code MUST be one of them seems too narrow minded.
I have worked with designers, and sometimes I'd prefer to have someone who knows less about code and more about animation, or someone who knows more about typography and less about code.
This pretense that there is one way to be a designer is actually not very helpful, somehow it's missing the point that coding is one more skill, it's true that currently it's ind demand, but that doesn't mean all of a sudden everyone needs to know how to code.
I hear scientists say everyone should know how to do research, philosophers say everyone should know how to think and financial analysts think everyone should know statistics.
Maybe everyone is right but I don't think any one human being could be good at everything, and I'd hate losing people with other talents.
Should designers code? No, unless they want to.
As a few others here have noted, development also effects the way we design.