Learn To Code And Take Your Designs One Step Further
Customer-Centricity | Industry Savvy

Learn To Code And Take Your Designs One Step Further

on / by Richard de Vries

I can remember a presentation in 2007 from Jonathan Arnowitz with the title Innovation and Design in a World of Engineering. In his presentation Jonathan warns us about the quality of a design process within an engineering environment. He also points out the differences between developers and designers. When I saw this presentation I couldn’t agree more. I think this was because I noticed that a lot of professionals with a developers mindset were calling themselves designers. Or even worse, a devigner, which often meant that they were neither good at programming nor at designing.

Source: http://sixrevisions.com/infographs/web-designers-vs-web-developers/

However, this year at interaction12 a lot of presentations mentioned that designers should be able to code. My absolute favourite presentation was Concept to code: The importance of code literacy in Interaction design by Ryan Betts. But also Demystifying Design: Fewer secrets, bigger impacts by Jeff Gothelf was all about working closer together with developers and inviting other professionals (like marketeers or analysts) to participate in our design processes. 5 years ago, I wouldn’t have agreed, but now, I couldn’t agree more. The world has become a better place since then, both for developers and designers.

Now, more than ever, coding has become accessible to designers. Being able to code gives you an enormous freedom in your ways to design, but also what you design; your design is no longer limited to what you can draw (how do you draw an animation on hover?) and actually, doing some code can be an incredible amount of fun. With some coding skills you can build small prototypes to test and prove your ideas much quicker and much easier. But also knowing what is possible makes you more creative in designing the perfect solution to any problem.

I know an architect who decided to virtually rebuild a classic building. This meant building walls, tiling, roofing and laying out floors, but also hiring specialists to do the electric wiring. This makes complete sense to me! If you are an architect you love buildings. Yet you know you are not an electrician and the electricity is critical to the success and safety of your house.

What he does as an architect, is what I do as a UX professional. Every week I design, build and launch a new concept that I feel is worth trying out during my commuting time between work and home. So far I built oneclickbookshop.com, dontsleep.in and lastminutesouvenir.com. These websites are built to a level I can do (and I can do within 400 minutes). They are not at all browser friendly (basically they only work in chrome and firefox), not modular, not very maintainable and I am sure not incredibly safe either. Yet they are safe, modular, and maintainable enough to see if a concept will work.

Like my acquaintance who loves buildings, I love interactive concepts. And because I know a little code, I can launch my concepts while sitting in the train without having to rely on anyone else. When any of these concepts actually work, I will need experts to sort out the technical challenges, just like the architect needs the wiring to work when he moves in his house.

Does this mean every designer needs to code too now? – Absolutely not, but I think every designer should have a little code love. I heard the quote once “For a UX designer code is what bricks and mortar are to an Architect”. You better know your materials before you can design what you are building.

Sometimes I sit next to a hardcore java developer and ask things like “What is this stuff you are actually writing?” My experience is that most developers love explaining what they do, and this is generally very interesting to listen to. If it isn’t interesting or a developer hates explaining, I am willing to bet that the end product will not be as user friendly as you thought it was going to be.

By the way, this works two ways, if you can’t explain your design to a developer, he should be very worried about the quality of your designs. In fact you might say that communication could be one of the most critical points when designers and developers work together on a project. To have proper communication you need a shared language, in software that language is code.

Where to start?

Learning to code is very much like learning a new language. In the beginning you feel very stupid and it seems as if you are never going to learn it. This combined with the sometimes blunt way of communicating a lot of developers have (both in writing and in person) might make learning code a little bit intimidating. I think as a UX designer the best way to go about learning code is by building prototypes.

Tools, such as Axure RP, are a great way to produce a lot of code without writing any of it. However, your prototypes will become much more rich when you add some basic variables and javascript to it. You can also build your own prototypes without any prototyping tool. All you need is a good text editor (I <3 Panic Coda!) and use the included reference books. However, the best way to start, is to get the help you need from your developer friends. Either by getting your colleagues or friends to give you advice or by finding the right websites (www.w3schools.com is awesome).

It might seem like a lot of work to learn but it really isn’t. Especially if you consider that you will be able to use this new knowledge right away.

Happy designing! Happy coding!

| | | |
Article by

Richard de Vries

Richard de Vries works as a freelance UX designer at architecto.nl and makes an idea into a website every week with 400minutes.com

Share your thoughts

  • This is a great article – thanks! There is just one minor point that I want to address, and it’s something that you’re probably going to see a few people come out of the woodwork to talk about. W3Schools isn’t cool, and it’s not something that I would generally tell people to learn from. There are a variety of reasons, but the two that always seem most important to me are these:

    1) When people point out things that are incorrect, W3Schools is not quick to make changes to their website to address these mistakes. This is egregious, especially since they position themselves as a teaching website.

    2) W3Schools acts as if they are affiliated with the W3C, but they are not. They offer accreditation, even though they have no particular right to do so. They are not necessarily lying to everyone, but it’s certainly not a white-hat, cards on the table kind of learning place.

    I always recommend that people go to SitePoint.com – there are only two drawbacks. First, it sounds uncomfortably like Sharepoint, that monolithic beast that slumbers in its house of the damned and should never be disturbed, so it can be a bit of a turnoff for people. Second, the navigation isn’t *immediately* obvious like it is with W3Schools.com – you want Resources -> References.

    • Hi Andrew. Thanks a lot for your remark, to be completely honest I havn’t really dug into the organisation behind w3c. All I know is that every time I look for something I find w3c to have the answer I can comprehend. Thats probably because I look up the basics (how do I post a form, how do I set a cookie in javascript). Taking a look at sitepoint, with your navigation help, it seems very useful, I am sure I will use it a lot. Thanks for adding this!

      Ps I love your description of SharePoint!

Pin It on Pinterest