How to become a “designer who codes” (2019)

That's a lot of words. I'll counter with my own shorter list for those without the stamina.

1. Become very strong at raw CSS.

2. Learn how to use your terminal.

3. Start making "polish" PRs in whatever site / app you work on.

4. Pick up skills from engineers organically around you as you clean up the front of the frontend.

5. Learn that design is meant to move, and pick up animation!

If you really learn CSS, like becoming the best person at your company in it, you will become immensely valuable to your team. Every great coding designer I've known got there because they were frustrated their engineering team would miss details from their designs. They learned how to clean up behind them, and then next thing they knew they were delivering coded prototypes, and not designs to their feature teams. They knew static designs would fall apart, and had the stamina to work on the three issues that come up most in web design: text truncation, focus issues and media query issues.

Source. Coding designer that's been at it for 25 years. I've worked at every level of design: from grunt, to open source system-designer, to Head of Design at a public company for a 45 person design team. Gave it all up to get back in the code and hack!

Coding designers are the best! Pair them with a strong visual designer and a patient engineer and you will have an awesome product.

Side note. I've worked in dozens of front-ends over a long career. CSS is the only constant.

As a "designer + developer" it's surprisingly hard to land roles where you'd be the most impactful. Hiring managers struggle to comprehend to diversity of what I can do (https://zchry.org/), and I really don't want to simplify it more than I already have.

Agencies love me, but they're usually not technical enough to know any different. Early stage startups seem reluctant, and large corporations don't even give me the time of day. Very confusing position.

In the theme of other comments, I struggle to identify what I am.

Am I a designer who codes, or a coder who designs?

Am I a product designer? I did an "Industrial Design" degree, so formally yes, but most people here think of product design in the digital not physical sense.

Am I an engineer? Well I don't have a "formal" engineering degree but I have worked professionally as a "Design Engineer" (in the physical product sense), and a "Software Engineer", so I would say yes.

Am I an "inventor" who can build stuff, probably.

I dislike labelling people, it puts you in a silo that can be difficult to span out of. I just wish job ads were not so prescriptive, putting up walls of what a role is.

Just do you, do what you love, what interests you, and find people you enjoy working with.

Anyone resources for the opposite, how to become a "coder who designs"?

Edit: I don't mean generic "learn design" resources for people who don't know design but specifically resources meant for programmers to pick up design. Like the book "Math for Programmers" but for design. Although thanks for all the links, surely there is something good there too.

My path:

1. Get an English Lit degree

2. Decide you want to own a home someday

3. Learn to code

4. Get a job for a small company

5. "Somebody has to do design around here, and you seem the creative type"

6. Learn to design

It's cool being a "designer who codes" when you work for a small company that needs people who can do multiple things. Always lots to do, and you get a lot of control over how your design is implemented, since you're doing a lot of it.

When I started working for larger companies, they did not know what to do with me. I kind of had to pick a well-understood path so they could fit me into the org chart. I decided to go with design, as I got sick of learning a new way to manage state every two weeks.

The only superpower it gives me is being able to translate what engineers say. Even if I know how web apps are built, I don't know how ours is built at a level where I can start wading in to arguments about it. I wouldn't do that anyway, because it's presumptuous.

(As you know, the opposite is not true: any engineer, manager, executive, or other employee feels empowered to teach a designer how to do their job better, I've noticed.)

I like to code, but I'm happy I don't have to do it for a living anymore.

My hot take has always been that the emergence of the Front-End Developer role came about backwards and that the correct expectation was that designers learn to code.

HTML & CSS seem a world apart from traditional programming (and computer science, etc.) and were initially much more about things that were the designer's realm--another tool for layout, format, hierarchy, etc. I remember so many frustrated PHP et al. devs who really didn't love writing HTML being thrilled when I would ask to contribute to the UI layer of a given CRUD app. I was happier doing it that way too (still am).

Javascript--especially before being engineered into its current oblivion--was fuzzier territory, but I'd advocate that it should be a shared responsibility between the designer and [back-end?] developer, meeting somewhere around accessing the API.

The ability to both design and implement the interaction layer of a website or application is a superpower and, on average, results in a higher-quality product. The current division of labor makes for weird silos and loading spinners everywhere that one layer of responsibility ends and the next begins.

Note that this is the path I took and prefer (dev who designs; designer who devs), which I suppose makes me both less-common and very biased towards it. :)

> My absolute favorite thing about writing code — and the reason I stuck with it through the initial learning curve— is that there is pretty much always a right answer when it comes to code. Your code either works or it doesn’t. This is not the case with almost anything else in life. When you write an essay, paint a picture, or design a website, you never really know if you did it “right.”

I grew up in a wilderness of mirrors, constantly lied to about so many things it took years to adjust after leaving home at 17. This aspect of programming brought stability and prosperity into my life. It remains that way 40+ years later.

If you’re a designer (or business person, or just a human) and you’re thinking about learning code…pay a LOT of attention to this sentence from the article:

> “I code because I love to code.”

In my experience, that’s all that matters. If you can try a coding tutorial and find the _process_ fun, if a little irritating, you can learn to code.

Too many people suffer for a long time trying to code because “it’s cool” even though they hate it. There’s nothing better about code than any other skill, and a lot of people really struggle with it. You can probably get a pretty good sense of if coding is a good fit for you in ~4 hours on a couple udemy tutorials.

I'm someone who is naturally strong at design, but studied CS/software engineering because I ultimately wanted to be able to build my own things. For years I tried to find careers hiring those unicorns -- people who could design and code -- but they were few and far between. My last gig that required both was at a hedge fund here in NYC, where they don't explicitly hire designers. These days I work exclusively as a software engineer, and I definitely miss those times when I worked as a designer. Among other things, the hours are easier and the amount of praise you get way higher :-)

I have seen good works from the author, Meagan Fisher. She is a fantastic designer.

If you are good at coding your design work, you should say you are "a designer" rather than a "designer that code." You are an excellent designer, where your final work is the design -- the coding part is the means to your design end. People, clients, customers, and bosses will eventually realize that -- which is the icing on the cake.

Once upon a time, when I talked to potential clients or even new companies, I tended to outline what I could do all the way; some of the ideas were disruptive, putting the other person in a defensive mode.

A CEO (my boss who invested in my Startup) gave me some advice, one of the many best advice I got in life.

Instead of saying you can do all, pick the one with the highest impact and get in. Once you are in (either a new company, new client, or new group), start executing beyond what you said you do. Now that you are in, it is much easier for others to appreciate your extra abilities than when you were outside.

Yes, it is way better to mockup prototypes directly in HTML/CSS/JavaScript, but the output is the "design work." Be an excellent designer; you just happen to know how to code that.

In my experiences of working with quite a few brilliant design-coders, who are way better than me, it is easier for coders to become designers -- understand the concepts, recognize the patterns, etc. without being anywhere near artistic.

I think there's a simpler, but slower path that is much more successful. It seems that all the best web devs I've known took this path.

First get a CS degree and then do whatever dev work you're most passionate about to start your career. It may or may not be web dev. It's probably not, but for sure at this phase you've learned or are pretty far into learning linux and a handful of general languages like c++, java, python, etc.

After a while you end up trying out web dev because you have projects on your plate that demand it, but it's not just frontend. You will learn to at least spaghetti your way through html/css/js, lots of web server configuration, implementation details about web browsers, and pick up nodejs or even ruby.

Then you dive into frontend where hopefully there's a designer or design team sending you figma files at least. It's at this point where you have probably already learned or are very familiar with frontend libraries like vue or react anyway but now you get to master those and maybe not just use them for complicated web apps.

The final step is learning design, which is comparatively less strict and kind of fun.

It's at this point where you can take a project all by yourself without much fuss or any surprises which is exactly what your boss and coworkers wanted all along. I'd more gladly work with a dev who knows design, than a designer who codes. The code is simply not as forgiving. Implementation details must always be first. This isn't really up to opinion. Web is hard to do correctly and the bar for the quality of work is only getting higher.

I’m a designer who codes, and for those who have had trouble expressing the value and finding a role that enables both, here is how I’ve positioned it:

As the primary designer for a product, who can also implement the design - the amount of communication needed between design and engineering literally evaporates.

I tell my devs they can build an ugly v1 of any feature simply for the sake of speed, and I’ll go in after to clean it up and make it look consistent. they don’t need to waste time with CSS.

Design changes so often after implementation, that I don’t even keep a living design file, most changes happen directly in code. If I do need to design something as part of a pitch or meeting material I take a screen shot of the product and just modify that.

Having worked as only a designer, and then only as an engineer, I can’t express how much faster my team is when design is part of engineering.

Speed is most critical to startups, I’ve always found interviewing with startups and presenting this skill set is highly sought after when expressed properly.

Is there a name for designers who know CSS? I guess not. It would make it easier for to search for and hire them if I could identify them better.

Designers who only design with no regard for what is possible, simple, etc have been the bane of my existence at previous employers.

I feel there is a VERY small set of shops where someone who just dumps a figma in your lap is useful.

The places I’ve seen that employ figma-is-my-only-output designers have just not been the right places for that skill set… but they always wish they were.

Then I could say I am a designer who codes. I learned by myself HTML and CSS, and eventually JavaScript, PHP and some Python (when Python 2 was still a thing!) even before beginning to study graphic design.

I guess it's great in the sense of being able to "speak" designer language and developer language. I have learned from people who codes like breathing and I do hope they have learned one thing or two from me about design.

But right now I am being miserable in trying to get a job focused on coding. As I don't have any real world experience with React (nor Vue, Angular nor Svelte), I haven't landed any gig. And I suspect that the fact I don't have a CS major also doesn't make things better - at least here I feel like employers who see a CV of a graphic designer who says they can code, will say something on the lines of "bullshit! Only CS people can code!"

I sometimes wish I could go back. I was never a designer in a pure sense, but I enjoyed a few roles of web development that had me doing both design, UX, business development ideation and the actual coding. Back when the lines between roles were blurrier, and especially when I was running a few SaaS side projects. Now I specialize in web applications and in specializing I gave up those hats.

I am getting a few more hats back while building a little game though. There is so much going on in a game, bigger games are probably the most complex pieces of software I have encountered and it's amazing any AAA titles get released at all.

I’m currently someone who’s learning to program to get out of the trades, I have a good eye for design and I’m decent at technical engineering (I think anyway) and I’m trying to approach it as a designer first who can code second, I figured this out when learning JavaScript/Python that I won’t ever be able to breathe code like some people but then I witness the design these end-game engineers come up with and I’m absolutely floored at how bad it looks.

This really helped me cement my theory and approach in my learning. I’d argue that adding marketing to your toolkit would flesh you out into a pretty decent employee at most companies.

My journey has been to start with data visualization using d3.js etc and gradually moved into much more complex tech stacks for vis & data processing.

Data visualization is very much user facing and lots of opportunity to let your more designerly intuitions in visual storytelling, communication motivate you along the way.

Then gradually you start to learn more about UI programming, but also data preparation with larger and more complex datasets.

Hi, we at Unikraft are hiring for this role exactly!

We’re a “deep-tech” early-stage startup looking for someone to join our team and lead our frontend efforts.

You can read more about the role at:

https://unikraft.io/docs/jobs/20230403-senior-frontend-dev

I’m a designer who codes! It’s very different today than it was ten years ago. Or even ten months ago.

1) get a good grasp of programming basics by taking a codecademy python course 2) use copilot / chatGPT / codeium 3) build stuff better and faster than I was able to do last year

If you want to go the extra mile, learn enough JSX to build a static version of the page. The developers will love you if you hand them components and CSS that look correct. It's less work than you might think to jump from HTML to JSX.

Markup (CSS/HTML) isn’t programming.

As someone who went from Photoshop -> FrontEnd WebDev -> FullstackWeb -> MobileDev… I feel inclined to say markup isn’t programming.

The engines that injest CSS and display them on screens (aka developing browsers) is programming. Otherwise it’s just intent based markup.

For example, using CSS to say <p> tag content should be green is pretty trivial. Actually programming that to display the text, in the font of choice, in the language, wrapped to the screen width, compiled to work on the device’s hardware - is programming!

Giving me a css statement

p: { text-color: blue; }

Is bul*+* easy. You did not nothing other than just give an intent to the system and be amazed at the results

This is well written and illuminating, and could very well have been written as a guide for backend devs to learn frontend

Keep in mind that designer that codes is probably one of the first jobs to be automated away by AI.

Was interested in reading this until got the Medium banner. We need to stop using Medium.

Nice, I'd like to see info on how to become a coder who designs.

Coding is a must have tool for a designer

Just, don't.

1. Become a designer

2. Code

3. ?????

4. Profit

I have a personal opinion about modern "design" that isn't shared by most designers or coders. You're welcome to disagree and vote me down but I just want to say this is just my opinion and I prefer to hear your disagreement in the form of a civil reply rather then an anonymous down-vote.

First my opinion of modern design is that it is trivially easy. Modern design nowadays is simply about deciding how to layout text, colored polygons and pictures on a page. The next layer of complexity is temporal and around how the page transforms via interaction with it but this is also easy. This is largely because of the trends towards simplicity and minimalism which are very different from the complicated and ornate design styles of the past.

I mean take a look at HN or even the google main page. Both are excellent designs. Clear, clean and informative and straightforward. But, also, those designs are extremely trivial. There's not much detail and there's not much work involved in creating these sites. It's simply a matter of moving certain premade primitives into the correct position.

I mean take a look at the spacex website: https://www.spacex.com/. Looks good right? But it's also just not much work. It's basically a slide show of background images with a link to the relevant page.

It can get more complex then this when you design something like jira or gmail but ultimately even those UIs though more complex doesn't even near the complexity of programming.

That's why I'm not surprised about people like the OP who are better at "design" then coding. Yeah it makes sense because design is waay easier then coding. On the other side of the equation I've seen powerful engineers say they can't "design" and I'm literally in disbelief. Are you saying you can't imagine something like the simplistic spaceX slideshow? I don't believe it. I think a lot of engineers are just under confident about their design skills and a lot of designers are over-confident about their own skills.

At the same time I feel for the OP because front end technology has literally become over complicated over the past 2 decades. It's a mishmash of over-complexity welded together into legacy tech to make it hard for designers to be able to implement their designs. It doesn't have to be this way but that's an entirely different story.