Talk Like you Code

By Gisella Fama

Recently there has been quite a lot of debate about wether it is important for a UXer to learn coding or not. My point of view on this is simple, if you work with a certain technology you must know that technology. You don’t have to become an expert at it if you don’t want to, but you cannot move around it without really knowing how it works.

Furthermore, if you consider yourself a true UXer you should aim to keep evolving yourself and accommodating the needs of all your users, including the teams involved in your project or product.

If you work with developers you should not only try to understand better what they do but also be the one pushing to find a better solution together. Surely you wouldn’t like to see your designs completely rejected because it seemed fine on paper but no one could make it happen in the real world.

Perhaps the strongest argument to make you want to start coding now (not tomorrow, or the day after) is that if you don’t start soon there will be a new generation of designers with embedded coding skills and a more interactive mind than ours ready to take over, and you don’t want to be left out, do you?

Where should you start?

1. Find your motivation
What really made me want to start (and continue) coding was feedback on my wireframes and designs. When presenting my designs to the developers I would often hear them say “That is too difficult to implement”, “We cannot do that” and so on.

I’m quite determined so when I get told that something cannot be done I want prove everyone wrong. I decided there was only a way for me to be able to have that kind of conversation with the developers and I started looking online for tutorials and eventually wrote my first lines of code.

2. Keep coding
Every day for a month I used different online tutorials to learn the basics of HTML and CSS. I dedicated around 15-30 minutes per day to it until writing tags became to norm. I continued learning by myself, googling any feature I wanted to do and reading regularly posts on StackOverflow.

3. Copy others code and see what happens (or doesn’t)
I know that usually people are against copying others, but if you are learning and especially if you are doing it by yourself, you may want to start from what others have done and then make it yours. I personally use a lot the “Developers Tools” on my browser to check the source code of my favourite websites. I use them to learn from and play around with them (changing colours in CSS, or content of a webpage can be also quite entertaining and useful if you need a quick mockup).

If you like some aspects of a website identify them in the source code and you’ll find all the embedded CSS and Javascript you need to make it work; customize the code as much as you need or want to.

4. Download Bootstrap
When you feel a little bit more confident, I definitely recommend playing with Bootstrap, or any other front end framework available out there. I personally love Bootstrap because it’s good for making prototypes and its columns are easily understood when working with responsive websites and assets.

When I first started I had no idea on how to use it, but I started playing with their examples and components and eventually got to the point where I can easily recognize its classes in the web; you’ll soon realise that there are a lot of companies out there using Bootstrap.

5. Create your own portfolio website (or a friend’s website)
The key thing once you have the basic knowledge is to prove to yourself you can actually use it to develop your own on real projects. I think this is the best part and you should aspire to it as any architect aspires to build his or her own house. In my case, I decided I wanted not only to design my online portfolio but also to develop it from scratch, without having to use those pre-built templates where your only effort is loading your images and writing your content. At the beginning it was definitely a struggle and I spent lots of weekends glued to the screen without interacting with anyone (OK, this may not look like the dream weekend for you now, but I promise that it can be really fun). But then it got better and things started to work exactly as I had imagined them to display. You will learn much more by trying to do something you are interested in then just writing assignments or following a tutorial.

6. Use your HTML/CSS skills at work
Using your new skills in your spare time is great, but I think your long-term objective should be to ensure HTML and CSS become part of your day at work. I personally try to integrate coding as much as possible in my work life, no matter what company I work for. In the past I offered my service to a client to develop in a couple of days a responsive online style guide for a project I was working on. In my current position I use HTML mockups to speed up decisions or get my point across with product owners or developers.

Good Luck

Good luck with finding your own 6 steps to success in coding, and if you still need some motivation, these are the resources that helped me starting to code (and maybe will help you too):
Tuts Plus: 30 Days to learn HTML and CSS
Smashing Magazine: Useful learning resources for web designers

About Gisella

Gisella is a UX architect currently working on EFSET, a special project promoted by EF Education First. She previously worked for many different industries, including healthcare, on demand, TV and music production. You can get in touch with her via LinkedIn.

Discover More

Learn a New Skill

Is it necessary for UXer to know how to code?

Notes on Creativity and Originality in Digital Product Design

Categories: London