Photo courtesy of Markus Tacker
My friend Bryan recently asked me for career advice. He’s a full-time user experience (UX) designer who works for a large, well-funded startup.
Bryan said he sometimes struggles at work because he doesn’t have front-end development skills. He experiences challenges like these:
- Because he doesn’t know how to code, Bryan doesn’t always use the same language that developers use when discussing design.
- Bryan can’t make simple code changes to a website. He has to ask a developer to make those changes. If Bryan knew basic HTML and CSS, he could make changes by himself in minutes.
- If he needs to create a prototype (a functional draft of a design), Bryan can’t build one in the browser using hand-coded HTML and CSS. Even if a hand-coded prototype is the best approach for the project, he has to rely on prototyping tools instead.
Although Bryan experiences these challenges, he’s a talented and successful UX designer. He has about 20 years of experience building websites, mobile apps, and other software. He’s worked for multiple organizations in different cities across the United States. He has no trouble getting hired as a UX designer.
You don’t need to learn front-end development to be a successful UX designer like Bryan. But after speaking with Bryan, I realized how many advantages I have as a UX designer who knows how to code.
What is Front-End Development?
The basics of front-end web development are HTML, CSS, and JavaScript code. This code controls what a user sees and interacts with on a website.
The definition of front-end development varies depending upon who you talk to. Front-end development includes more than HTML, CSS and JavaScript. It includes things like preprocessors, frameworks, and libraries. Two people can have the title front-end developer while doing very different things at their jobs.
Throughout this article, when I say front-end development, I mean coding by hand with HTML and CSS. If you’re a UX designer, I believe you can benefit by learning HTML and CSS.
The Advantages I Have as a UX Designer Who Codes
After speaking with my friend Bryan, I realized how often I use my front-end development skills as a UX designer.
I Can Code Basic Things on My Own
I can write basic HTML and CSS on my own without requiring much help from other people. I can create a functional prototype for the browser. I can make simple edits to a website. I can debug most HTML and CSS issues on the website you’re reading right now.
I don’t use my coding skills every day. But when I need those coding skills, they make my life much easier.
I Can Communicate with My Team
Because I know how to code, I can communicate about front-end development with my colleagues at Center Centre. When we discuss code at Center Centre, I can contribute to the conversation. After the conversation, I understand what we discussed and what changes, if any, we’ll make to our website.
If I find a bug on Center Centre’s website, I have a general idea of what’s wrong. I can ask my team thoughtful questions like these:
- “Does our CMS support audio uploads to our blog? Do we have the proper HTML tags and CSS styles in place, or do we need to add to the code that’s there?”
- “This photo isn’t lining up properly with the text. Is there a CSS issue on this section of the site?”
- “This link isn’t revealing more content like it’s supposed to. Is there an issue with the JavaScript?”
When you learn to code, you gain a shared language when speaking about code. On a broader level, when you learn to code, you understand what the web is capable of. You can determine if your design ideas are feasible or not feasible.
I’m Equipped to Learn Programming Languages
In 2005, I took a Java course to learn about back-end development. I did well in the course, partly because I already understood HTML and CSS. My front-end development skills gave me a foundation for learning back-end development skills.
At some point in your career, you may want to learn to program, or you may need to learn to program. Maybe you’ll want to learn how to code native apps like iOS apps or Android apps. Or perhaps you’ll need to code with a back-end development language like Python or Ruby.
Most UX designers don’t need to use programming languages, though some UX designers may need to learn JavaScript to prototype. If you do need to learn programming, a foundation in front-end development will give you a significant advantage.
Learning to Code Takes Time, and it’s Worthwhile
To remember the coding skills you learn, you’ll probably need to spend a significant amount of time coding. I remember a lot about HTML and CSS because I coded for about five years early on in my career. (I began my career as a front-end developer before becoming a full-time UX designer.)
You don’t have to spend five years coding HTML and CSS like I did. But it’s best if you can spend enough time coding so that you retain what you learn.
Do You Have to Learn How to Code?
Some people argue that UX designers don’t need to code. Try Googling the phrase, “Should UX designers learn to code?” You’ll see many strong opinions on this topic.
You don’t need to code to be a successful UX designer. My friend Bryan, the UX designer I mentioned earlier, doesn’t know how to code. He’s had a fantastic career. But he experiences challenges on the job because he doesn’t have front-end development skills.
I firmly believe that UX designers benefit from learning front-end development. If you learn to code, you’ll probably have the same advantages that I’ve had throughout my career. And you’ll probably avoid the challenges that my friend Bryan faces today.
Go Forth and Code
I hope I’ve convinced you to learn HTML and CSS by now. The knowledge you gain will get you out of the theoretical and into the practice. You’ll experience, for yourself, how the web works. You’ll learn how to communicate with other members of your design team.
Jared Spool says that learning to code will help you design better experiences:
Designers don’t need to learn to code. However, designers that learn to code will be the ones leading us to better user experiences.
If you know how to write HTML and CSS, and if you know UX design, that’s a powerful combination. When you add other skills like front-end development to your UX design skills, that combination is usually better than UX skills alone.
Sources for Learning Front-End Development
Free Sources
There are many free or inexpensive resources for learning front-end development. I recommend taking the free HTML and CSS course on Codecademy or the free Coding for Designers course on Aquent Gymnasium.
Affordable Sources You Can Purchase
You can purchase a Treehouse membership to take their Introduction to HTML and CSS course. Or you can purchase a Lynda.com membership to take their HTML and CSS courses. Treehouse and Lynda.com both offer free trials for their services.
There are other ways to learn front-end development. You can purchase books, take in-person classes, and read articles and blogs. If you use other sources to learn front-end development, make sure those sources are up-to-date and reputable.
More On the Benefits of Learning How to Code
UIE published these thoughtful resources on learning to code as a UX designer. Each source explains why learning to code helps you become more effective at UX design.
- 3 Reasons Why Learning To Code Makes You A Better Designer
- Websockets and Why Designers Should Learn To Code
- Why The Valley Wants Designers That Can Code
- Developing a Living Style Guide with CSS
The point made here is sound and totally agree with it, but it is, in my humble opinion as a UI/Frontend developer, poorly supported.
Basic HTML and CSS can help but it’s not enough – the minimum would include, but not limited to, an understanding of DOM flow, grid layouts, breakpoints, devices, accessibility/assistive technologies and what can/cannot be realistically achieved with all these – this is what will make any developers love to work with you.
Perhaps I will sound pedantic now, but the analogy “In 2005, I took a Java course to learn about back-end development. I did well in the course, partly because I already understood HTML and CSS” is what really spurred me to leave a comment, as it’s quite misleading – HTML and CSS relate to backend/Java development, as much as the paint colour you picked relates to the way the walls you want to paint are built.
Thanks for your input, Luca!
“Designers don’t need to learn to code. However, designers that learn to code will be the ones leading us to better user experiences.”
Ditto.
Also, pretty shocked that Bryan, within 20 years of experience, didn’t have the curiosity in learning how to code.
Couldn’the agree more!
These discussions remind me of why the loss of art as a common background for UX designers is a liability to the quality of the design. Artists have known for centuries that the best work comes from a mastery of the medium in which one works. And our medium is code.
Thanks for posting, Stephen. I agree it’s important to understand the medium you’re designing for. I’m thankful for my background as a front-end developer. It’s helped me tremendously as a UX designer.
That said, the next question is – when are you supposed to take the time to learn? Would Bryan’s workplace expect him to study up on this in his own time? Maybe his previous workplace had used Axure for prototyping (which mine does – and that’s a learning curve in itself!)
It’s fine to say that UXers should learn. But more importantly, workplaces should see that this training should be able to happen in work time rather than as ‘homework’.
Vicky, have you tried finding opportunities to learn code at work? If so, what were the results?
The other question is how much coding skill does a UX designer should have? for example, a normal front end developer now should know a lot about JS framework like Angular JS or React. Does a UX designer have to go that far too? if just stick to HTML, CSS, Jquery?
Great question, Ernest. The sky is the limit when learning front-end development these days. 🙂 I recommend learning enough code so you can prototype an idea by hand.
I’m a faculty member at Center Centre, the UX design school. Our students learn enough front-end development skills for prototyping. They learn HTML, CSS, and a bit of JavaScript. They learn these skills so they can convey a design idea through code, without having to rely on prototyping tools.
These skills also help students understand how front-end development code works. A working knowledge of HTML, CSS, and JavaScript helps students understand the medium they’re designing for.
jessica, how do you feel about coding back-end or something more advanced, like Java?
Bruno, in my experience, it’s more helpful to learn HTML and CSS. That said, learning any aspect of development makes you a more well-rounded designer.
I would have to say that this really depends on what your role as a UXer is. In my type of role (UX designer within a large enterprise organisation focusing on discovery rather than delivery), I would say having front end development knowledge makes no difference. Rather, what is more helpful in a role like mine is having an understanding and appreciation of system architecture. Much of what I do is more influenced by the backend solution and the front end aspect is very straightforward. A lot of designers get intimidated by the thought of having to learn coding. I would say, identify what skills would actually give you the most benefit in your job (and what you enjoy) and prioritise your learning efforts accordingly. For many of us, we’re better off spending our time learning about business, psychology and behavioural economics, with coding being very low down on the list of priorities and interests.
Thank you for sharing this, Gloria!