{"id":65,"date":"2010-05-07T10:35:48","date_gmt":"2010-05-07T18:35:48","guid":{"rendered":"https:\/\/gavindoughtie.com\/?p=65"},"modified":"2017-08-15T23:12:33","modified_gmt":"2017-08-16T07:12:33","slug":"how-much-code-should-a-ux-person-know","status":"publish","type":"post","link":"https:\/\/gavindoughtie.com\/?p=65","title":{"rendered":"How Much Code Should a UX Person Know?"},"content":{"rendered":"<p>I spoke on a panel at UCLA week before last and got an email today from <a href=\"http:\/\/www.johnanzelc.com\">John Anzelc<\/a> asking:<\/p>\n<ul>\n<li>When you&#8217;re working with a UX designer, what what coding ability do you expect them to have? What ability would you like them to have?<\/li>\n<li>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?<\/li>\n<li>Any recommendations for books, websites, tools etc. on said skills?<\/li>\n<\/ul>\n<p>My somewhat expanded response follows &#8212; books and websites are linked where appropriate.<\/p>\n<p>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&#8217;d say that a designer who wants to work on web and software products today should know at least:<\/p>\n<h2>Concepts<\/h2>\n<ul>\n<li>Read <a href=\"http:\/\/www.amazon.com\/gp\/product\/B001C323BI?ie=UTF8&#038;tag=xdraworg-20&#038;linkCode=as2&#038;camp=1789&#038;creative=9325&#038;creativeASIN=B001C323BI\">About Face 3: The Essentials of Interaction Design<\/a><img loading=\"lazy\" decoding=\"async\" style=\"border: none !important; margin: 0px !important;\" src=\"http:\/\/www.assoc-amazon.com\/e\/ir?t=xdraworg-20&#038;l=as2&#038;o=1&#038;a=B001C323BI\" alt=\"\" width=\"1\" height=\"1\" border=\"0\" \/>, because even if you disagree with everything in it, you&#8217;ll want to know the concepts.<\/li>\n<li>Might as well take a look at <a href=\"http:\/\/www.amazon.com\/gp\/product\/B0018OZZM0?ie=UTF8&#038;tag=xdraworg-20&#038;linkCode=as2&#038;camp=1789&#038;creative=9325&#038;creativeASIN=B0018OZZM0\">The Design of Everyday Things<\/a><img loading=\"lazy\" decoding=\"async\" style=\"border: none !important; margin: 0px !important;\" src=\"http:\/\/www.assoc-amazon.com\/e\/ir?t=xdraworg-20&#038;l=as2&#038;o=1&#038;a=B0018OZZM0\" alt=\"\" width=\"1\" height=\"1\" border=\"0\" \/> too.<\/li>\n<\/ul>\n<h2>Tools<\/h2>\n<ul>\n<li><a href=\"http:\/\/www.amazon.com\/gp\/product\/B003D8XE4K?ie=UTF8&#038;tag=xdraworg-20&#038;linkCode=as2&#038;camp=1789&#038;creative=9325&#038;creativeASIN=B003D8XE4K\">Photoshop<\/a><img loading=\"lazy\" decoding=\"async\" style=\"border: none !important; margin: 0px !important;\" src=\"http:\/\/www.assoc-amazon.com\/e\/ir?t=xdraworg-20&#038;l=as2&#038;o=1&#038;a=B003D8XE4K\" alt=\"\" width=\"1\" height=\"1\" border=\"0\" \/>. Link is to the student edition of the entire Adobe Creative Suite, which you might as well get a legit copy of while you&#8217;re still in school. Learn these tools, particularly PhotoShop, deeply and thoroughly. Read books, work through tutorials, take classes. It&#8217;s the industry standard for manipulating images. You&#8217;ll use it (and\/or <a href=\"http:\/\/www.amazon.com\/gp\/product\/B003B32AF6?ie=UTF8&#038;tag=xdraworg-20&#038;linkCode=as2&#038;camp=1789&#038;creative=9325&#038;creativeASIN=B003B32AF6\">Adobe Fireworks CS5<\/a><img loading=\"lazy\" decoding=\"async\" style=\"border: none !important; margin: 0px !important;\" src=\"http:\/\/www.assoc-amazon.com\/e\/ir?t=xdraworg-20&#038;l=as2&#038;o=1&#038;a=B003B32AF6\" alt=\"\" width=\"1\" height=\"1\" border=\"0\" \/> or other mockup tools) to create wireframes and sample screens <em>all the time<\/em>. If you&#8217;re strapped for cash, you can learn the most crucial concepts and do at least professional-looking work with the free <a href=\"http:\/\/www.gimp.org\/\">GIMP<\/a> software.<\/li>\n<li>A vector art program, like <a href=\"http:\/\/www.amazon.com\/gp\/product\/B003B32AQK?ie=UTF8&#038;tag=xdraworg-20&#038;linkCode=as2&#038;camp=1789&#038;creative=9325&#038;creativeASIN=B003B32AQK\">Adobe Illustrator CS5<\/a><img loading=\"lazy\" decoding=\"async\" style=\"border: none !important; margin: 0px !important;\" src=\"http:\/\/www.assoc-amazon.com\/e\/ir?t=xdraworg-20&#038;l=as2&#038;o=1&#038;a=B003B32AQK\" alt=\"\" width=\"1\" height=\"1\" border=\"0\" \/> or the open-source and free <a href=\"http:\/\/www.inkscape.org\/\">Inkscape<\/a>. Most web sites in the next few years will begin to move to vector art rather than pixel art. You&#8217;ll need to learn how to produce resolution-independent graphics.<\/li>\n<li>A text editor. This would be something like <a href=\"http:\/\/macromates.com\/\">TextMate<\/a> on the Mac, or a real coder&#8217;s editor like <a href=\"http:\/\/www.gnu.org\/software\/emacs\/\">Emacs<\/a> or <a href=\"http:\/\/www.vim.org\/\">vim<\/a> (both free and open-source). Pick an editor you really like (I like <a href=\"http:\/\/www.gnu.org\/software\/emacs\/\">Emacs<\/a>), learn all the keyboard shortcuts, and use the same one for years. Don&#8217;t use DreamWeaver as it will prevent you from learning things like HTML and CSS deeply.<\/li>\n<li>A web browser with a good developer interface. <a href=\"http:\/\/www.google.com\/chrome\">Chrome<\/a>, <a href=\"http:\/\/www.apple.com\/safari\/\">Safari<\/a>, and <a href=\"\"http:\/\/www.getfirefox.com\">Firefox<\/a> with the &#8220;<a href=\"http:\/\/getfirebug.com\/\">Firebug<\/a>&#8221; extension will all teach you something. Even <a href=\"http:\/\/ie.microsoft.com\/testdrive\/\">Internet Explorer 9<\/a> has good developer tools now. Read the documentation about how to use the debugger and the various inspectors and profiling tools.<\/li>\n<\/ul>\n<h2>Technologies<\/h2>\n<ul>\n<li><a href=\"http:\/\/www.w3.org\/TR\/html4\/\">HTML<\/a> and particularly the <a href=\"http:\/\/dev.w3.org\/html5\/spec\/Overview.html\">HTML5<\/a> variant. Know what *all* the tags do, make yourself examples and tests, and play around.<\/li>\n<li><a href=\"http:\/\/www.w3.org\/Style\/CSS\/\">CSS<\/a>. Web designers are CSS experts. It&#8217;s arguably the most complex piece of technology to understand, so get going now. Learn what &#8220;float&#8221; does, and how to use the selectors. Work through the O&#8217;Reilly &#8220;<a href=\"http:\/\/www.amazon.com\/gp\/product\/0596527330?ie=UTF8&#038;tag=xdraworg-20&#038;linkCode=as2&#038;camp=1789&#038;creative=9325&#038;creativeASIN=0596527330\">CSS: The Definitive Guide<\/a><img loading=\"lazy\" decoding=\"async\" style=\"border: none !important; margin: 0px !important;\" src=\"http:\/\/www.assoc-amazon.com\/e\/ir?t=xdraworg-20&#038;l=as2&#038;o=1&#038;a=0596527330\" alt=\"\" width=\"1\" height=\"1\" border=\"0\" \/>&#8220;.<\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en\/Core_JavaScript_1.5_Guide\">Javascript<\/a>. I think there are <a href=\"http:\/\/dojotoolkit.org\/\">more powerful<\/a> <a href=\"http:\/\/code.google.com\/closure\/\">libraries for &#8220;real&#8221; application development<\/a>, but at a minimum you should understand how to use the <a href=\"http:\/\/jquery.com\/\">jQuery<\/a> 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 <a href=\"http:\/\/www.amazon.com\/gp\/product\/0596101996?ie=UTF8&#038;tag=xdraworg-20&#038;linkCode=as2&#038;camp=1789&#038;creative=9325&#038;creativeASIN=0596101996\">JavaScript: The Definitive Guide<\/a><img loading=\"lazy\" decoding=\"async\" style=\"border: none !important; margin: 0px !important;\" src=\"http:\/\/www.assoc-amazon.com\/e\/ir?t=xdraworg-20&#038;l=as2&#038;o=1&#038;a=0596101996\" alt=\"\" width=\"1\" height=\"1\" border=\"0\" \/> and <a href=\"http:\/\/www.amazon.com\/gp\/product\/B0026OR2ZY?ie=UTF8&#038;tag=xdraworg-20&#038;linkCode=as2&#038;camp=1789&#038;creative=9325&#038;creativeASIN=B0026OR2ZY\">JavaScript: The Good Parts<\/a><img loading=\"lazy\" decoding=\"async\" style=\"border: none !important; margin: 0px !important;\" src=\"http:\/\/www.assoc-amazon.com\/e\/ir?t=xdraworg-20&#038;l=as2&#038;o=1&#038;a=B0026OR2ZY\" alt=\"\" width=\"1\" height=\"1\" border=\"0\" \/> for more depth.<\/li>\n<li>At least one, but preferably several, server-side language like <a href=\"http:\/\/php.net\/index.php\">PHP<\/a>, <a href=\"http:\/\/www.python.org\/\">Python<\/a> or <a href=\"http:\/\/www.ruby-lang.org\/en\/\">Ruby<\/a>. PHP lets you do simple things very quickly, but Python is likely to teach you better programming habits over time. The <a href=\"http:\/\/rubyonrails.org\/\">Ruby on Rails<\/a> 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 <a href=\"http:\/\/www.amazon.com\/gp\/product\/1934356166?ie=UTF8&#038;tag=xdraworg-20&#038;linkCode=as2&#038;camp=1789&#038;creative=9325&#038;creativeASIN=1934356166\">Agile Web Development with Rails, Third Edition<\/a><img loading=\"lazy\" decoding=\"async\" style=\"border: none !important; margin: 0px !important;\" src=\"http:\/\/www.assoc-amazon.com\/e\/ir?t=xdraworg-20&#038;l=as2&#038;o=1&#038;a=1934356166\" alt=\"\" width=\"1\" height=\"1\" border=\"0\" \/>) You can also check out server-side Javascript frameworks like <a href=\"http:\/\/nodejs.org\/\">node.js<\/a>, and <a href=\"http:\/\/narwhaljs.org\/\">narwhal<\/a>.<\/li>\n<li><a href=\"http:\/\/en.wikipedia.org\/wiki\/Linux\">Linux<\/a> or some other unix variant (like Mac OS X, but via the &#8220;Terminal&#8221; application). I like <a href=\"http:\/\/www.ubuntu.com\/\">Ubuntu<\/a>, because it&#8217;s easy to get started with and widely deployed. Even if you use a Mac or PC for your personal work, you&#8217;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.<\/li>\n<li>UPDATE: Brad Neuberg wrote <a href=\"http:\/\/ajaxian.com\/archives\/how-to-become-a-javascript-bad-shut-yo-mouth?utm_source=feedburner&#038;utm_medium=feed&#038;utm_campaign=Feed:+ajaxian+(Ajaxian+Blog)&#038;utm_content=Google+Reader\">a terrific post<\/a> about how to become a Javascript bada**. Take it seriously and do the work and Google will so totally hire you<a href=\"#disclaimer\">*<\/a>.<\/li>\n<\/ul>\n<p>I&#8217;m sure there&#8217;s more. If anybody reading this has something to add in the comments, I&#8217;ll fold it into the main post. Good luck, and keep learning!<\/p>\n<hr \/>\n<p id=\"#disclaimer\">Disclaimer: I&#8217;m not promising you a job, don&#8217;t claim I did, but it would really improve your chances to do so.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I spoke on a panel at UCLA week before last and got an email today from John Anzelc asking: When you&#8217;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 [&#8230;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23,5,25,24,4],"tags":[],"class_list":["post-65","post","type-post","status-publish","format-standard","hentry","category-ajax","category-google","category-html-5","category-javascript","category-work"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/gavindoughtie.com\/index.php?rest_route=\/wp\/v2\/posts\/65","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gavindoughtie.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gavindoughtie.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gavindoughtie.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/gavindoughtie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=65"}],"version-history":[{"count":26,"href":"https:\/\/gavindoughtie.com\/index.php?rest_route=\/wp\/v2\/posts\/65\/revisions"}],"predecessor-version":[{"id":207,"href":"https:\/\/gavindoughtie.com\/index.php?rest_route=\/wp\/v2\/posts\/65\/revisions\/207"}],"wp:attachment":[{"href":"https:\/\/gavindoughtie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=65"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gavindoughtie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=65"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gavindoughtie.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=65"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}