Category Archives: Javascript

How Much Code Should a UX Person Know?

Published May 7, 2010 / by gavin

I spoke on a panel at UCLA week before last and got an email today from John Anzelc asking:

  • When you’re working with a UX designer, what what coding ability do you expect them to have? What ability would you like them to have?
  • Coming from a design background with only some basic HTML/CSS skills (with a little bit of Java way back in high school), what coding skills will I see the biggest benefit from learning if I want to get into UX design?
  • Any recommendations for books, websites, tools etc. on said skills?

My somewhat expanded response follows — books and websites are linked where appropriate.

Every career is a collection of skills. The deeper and broader your base of skills, the more you can accomplish and the higher level you can work at. At this particular moment of history, I’d say that a designer who wants to work on web and software products today should know at least:

Concepts

Tools

  • Photoshop. Link is to the student edition of the entire Adobe Creative Suite, which you might as well get a legit copy of while you’re still in school. Learn these tools, particularly PhotoShop, deeply and thoroughly. Read books, work through tutorials, take classes. It’s the industry standard for manipulating images. You’ll use it (and/or Adobe Fireworks CS5 or other mockup tools) to create wireframes and sample screens all the time. If you’re strapped for cash, you can learn the most crucial concepts and do at least professional-looking work with the free GIMP software.
  • A vector art program, like Adobe Illustrator CS5 or the open-source and free Inkscape. Most web sites in the next few years will begin to move to vector art rather than pixel art. You’ll need to learn how to produce resolution-independent graphics.
  • A text editor. This would be something like TextMate on the Mac, or a real coder’s editor like Emacs or vim (both free and open-source). Pick an editor you really like (I like Emacs), learn all the keyboard shortcuts, and use the same one for years. Don’t use DreamWeaver as it will prevent you from learning things like HTML and CSS deeply.
  • A web browser with a good developer interface. Chrome, Safari, and Firefox with the “Firebug” extension will all teach you something. Even Internet Explorer 9 has good developer tools now. Read the documentation about how to use the debugger and the various inspectors and profiling tools.

Technologies

  • HTML and particularly the HTML5 variant. Know what *all* the tags do, make yourself examples and tests, and play around.
  • CSS. Web designers are CSS experts. It’s arguably the most complex piece of technology to understand, so get going now. Learn what “float” does, and how to use the selectors. Work through the O’Reilly “CSS: The Definitive Guide“.
  • Javascript. I think there are more powerful libraries for “real” application development, but at a minimum you should understand how to use the jQuery library. Ideally, you should *read* the jQuery library and keep looking things up and asking questions on the web until you understand how it was implemented. Take a look at JavaScript: The Definitive Guide and JavaScript: The Good Parts for more depth.
  • At least one, but preferably several, server-side language like PHP, Python or Ruby. PHP lets you do simple things very quickly, but Python is likely to teach you better programming habits over time. The Ruby on Rails framework has tremendous traction among startups and small development teams, and puts a lot of power in your hands. (I learned it by working through Agile Web Development with Rails, Third Edition) You can also check out server-side Javascript frameworks like node.js, and narwhal.
  • Linux or some other unix variant (like Mac OS X, but via the “Terminal” application). I like Ubuntu, because it’s easy to get started with and widely deployed. Even if you use a Mac or PC for your personal work, you’ll want to understand how to update a website on a running server or virtual instance. This means command-line operations for things like moving and copying files, editing text, and using source control.
  • UPDATE: Brad Neuberg wrote a terrific post about how to become a Javascript bada**. Take it seriously and do the work and Google will so totally hire you*.

I’m sure there’s more. If anybody reading this has something to add in the comments, I’ll fold it into the main post. Good luck, and keep learning!

Disclaimer: I’m not promising you a job, don’t claim I did, but it would really improve your chances to do so.