Why UI Designers Should Learn to Code

If you want to become a professional UI designer your skillset must go beyond the traditional graphic tools. You should learn how to turn your design into functional web elements. That's right: You should learn to code. When I first started my career as a graphic designer I focused my work on trying to achieve pixel perfection. I used to spend 90% of my time in Photoshop designing web interfaces. Not long ago I decided to move forward and started to learn HTML, CSS, and Javascript -- and since doing so my approach to UI design has completely changed. In this article I will share my experience and will try to explain why, in my opinion, learning development skills is a must if you want to become the greatest designer possible.

Why being a Photoshop expert is not enough

There was a time when UI designers aimed at pixel perfection through their favorite tools of trade. There's nothing wrong with that. There still is that moment when the opacity looks great, the gradient seems perfectly subtle, and a two-pixel nudge will make that button perfect. But nowadays, by the time your creation is brutally sliced and put on the web, you will often realize that something is off. What you see on the web is inevitably different from your .psd document.

Why is that? Do developers not care enough about pixel perfection? No, it's just that browsers render your graphics in a different way compared to Photoshop (Get used to that). Also, re-using similar styles in Photoshop has no real benefit: while developers will combine similar styles all the time to make code faster.

When developers start coding what you created they have to follow certain rules; they create classes in HTML, stylize them in CSS and expect some distances and colors to be constant. It's all about consistency: if you create in Photoshop what is supposed to be a Heading 2 tag on the web - like a title of a paragraph - and the distance to the element below is 20 pixels, expect developers to create a rule for that (margin-down: 20px). Let's suppose you create a new Photoshop document for the same web project, with another h2 tag element. You can care or not about making distances the same, but on the web that distance will be the same because the same CSS rule is applied*.

This simple example introduces a case where a detail (distance between the h2 title and the element below) looks a bit different because as a designer you don't care as much about CSS rules.

*Of course you can have different styles for H2 tags, but not for hundreds!

Here is a list of reasons why being a Photoshop guru isn't enough:

• No knowledge of the magic that makes designs work on the webSome PHP code may be destined to be a mystery forever, but what about some simple CSS tricks? Would't it be cool to understand them?
• It's more difficult to deal with developersBeing part of a team means speaking a common language. If you know nothing about coding it's harder to work with people who make code for a living.
• The whole creation process is slowerAdopting consistency in your design and knowing some simple rules can make developers life easier. The creation process of a web project will be faster.
• It makes harder to think out of the boxIf you haven't any clue about the latest javascript trends (think of Parallax for example) or you don't get updated about jQuery plugins and new possibilities, you won't always be designing for the most modern platform.

New skills open new horizons

Learning some development skills changes a lot; from the moment you start getting your hands dirty you will probably never have enough. You understand why it's always better to choosing "Multiply" as your blending mode for shadows in Photoshop, instead of "Color Burn". Multiple new solutions start filling your mind when you are up to solve a usability problem. You can finally suggest some CSS solutions to developers or, even more exciting, you can actively take part in the development process.

Believe it or not, you may even start designing directly inside the browser.

When you realize how easy it is to work with HTML and CSS there is a good chance you will want to be great at this; not just a newbie who can put a couple of lines of code together. There is a huge amount of creatives who run blogs about front-end development. Take a look at Line25 managed by Chris Spooner as a great example.

Here is a list of reasons why learning development skills will make you a better UI designer:

• It's easy!HTML and CSS are easy to learn, for sure you will need some months to be good, but there's nothing alien to understand. Javascript is more tricky, but there are some libraries - like jQuery - that will make your life easier. Also, you don't need to be a JS guru, you need to be aware of new animation trends and keep them in mind while you design.
• It will make you a better designerIt's like having more fuel for your creativity. You know of new possible solutions. Having more tools in your toolbox will surely make you a better UI designer.
• It will make you a better entrepreneurIf you're working on your own web project, you can hire people and be aware of what they are doing. You will feel more in control.
• It will make you a more valuable workerTake a look at job boards. For UI designers it is always recommended to have basic development skills. The reasons why that happens have been thoroughly explained in this article :)

Responsiveness makes things more complicated (?)

New trends are thriving due to the challenge of making the web responsive. Building websites and applications that adapt easily to different devices inevitably pushed us to make things minimal and flat. We are supposed to use fewer bitmap elements - like textures - and the same buttons that were created in Photoshop and sliced as .png images are now entirely created in CSS3. Web technologies are evolving; hiding ourselves behind the graphics tool we love so much won't help us in the near future.

Clients expect us to show them work in progress; How are we supposed to show a responsive layout? Surely not though a standard fixed Photoshop document, nor we can imagine creating a new Photoshop document for each scenario. Understanding web technologies allows us to explain the client how the website will react to different device sizes, show them online examples and, eventually, code a simplified version of the responsive web design. We may even move towards a different approach in Photoshop: instead of designing the standard way (960grid template), we could just work on a template that shows the color palette, button styles, other element styles that will then be combined to create the responsive website. It's like showing the clients all the pieces that will play a role in the final design. Think of Twitter's Bootstrap as an example.

Tutorial and resources to start learning the basics of HTML, CSS and Javascript

Here is a list of resources that will help you to start this new learning adventure. It won't be difficult, I promise. For sure it will be worth the effort!

HTML Introduction

30 Days to Learn HTML & CSS

5 Practical Ways to Replace Images with CSS3

Mastering CSS Coding: Getting Started

CSS-TRICKS

TutorialZine

Javascript 101

Try jQuery

jQuery Fundamentals

Codrops

Conclusion

My goal with this article was not to turn you away from your favorite tools or state that we all must be developers, but it is important to realize how natural it is to follow a learning curve that will push you through basic web development. From that point you can decide whether to spend more time on a code editor or a graphics tool. The web will certainly always need people who are pixel obsessed and who'd rather only design things. But if you are one of them; a basic knowledge of how the web works behind the curtain will make you a much better UI designer.

What do you think? Have you dabbled with coding before? Do you prefer staying in the realm of design?