Your SlideShare is downloading. ×
Web Development for UX Designers
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Web Development for UX Designers


Published on

An overview of web development essentials that will help you as a user experience designer to not only understand how to integrate designs with development components, but also to learn some tips on …

An overview of web development essentials that will help you as a user experience designer to not only understand how to integrate designs with development components, but also to learn some tips on interacting effectively with developers.

Published in: Design, Technology

1 Comment
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. WEB DEVELOPMENT for UX DESIGNERSAshlimarie DongFormer HCDE Student
  • 2. <life>
  • 3. Web Developer Since 2005
  • 4. Programming forDesign’s Sake
  • 5. Then College Happened
  • 6. I DiscoveredUser Experience!And it was amazing.
  • 7. Why shouldUX Designers care?
  • 8. Why should UX Designers care? Complex Storyboarding =?
  • 9. Why should UX Designers care? Understanding Browser Constraints
  • 10. Why should UX Designers care?Creating Something Usable Not reusable Axure rendered HTML
  • 11. Why should UX Designers care? Empathizing with Developers
  • 12. PMUX DEV
  • 13. UX DEVDiagram credit:
  • 14. Core Topics CoveredHardware ConstraintsWeb ConstraintsMobile Web IntroductionTerminologyHTML5 & CSS3 RedliningInternationalizationJavaScript and jQuery
  • 15. HardwareConstraints
  • 16. Waiting sucks
  • 17. Resource Hogs
  • 18. Internet connection
  • 19. Platform vs
  • 20. RAM and Virtual Memory
  • 21. There are solutions!
  • 22. Solutions to Hardware Constraints Caching Data
  • 23. Solutions to Hardware Constraints Prefetching <link rel="prefetch" href="">
  • 24. Solutions to Hardware Constraints Touch Screen Devices
  • 25. Solutions to Hardware Constraints: Touch Screen Devices Swiping
  • 26. Solutions to Hardware Constraints: Touch Screen Devices No hover state
  • 27. Solutions to Hardware Constraints: Touch Screen Devices Ario’s Law Look out, Fitts’ Law!
  • 28. Web Constraints
  • 29. ResolutionsUsing this font size,this sentence canfit a screen with aresolution like this. But doesn’t mean it will fit a screen size like …
  • 30. Web Constraints Cross-browser Compatibility One version to rule them all.
  • 31. Web Constraints Graceful Degradation
  • 32. Web Constraints“Graceful degradation means that your Website continues to operate even when viewedwith less-than-optimal software in whichadvanced effects don’t work.” Fluid Thinking, by Peter-Paul Koch
  • 33. IE9 IE7
  • 34. Guilty!
  • 35. Web Constraints But… That doesn’t mean you have to build for the oldest of the old.
  • 36. Mobile Focus.
  • 37. Web vs Native Apps
  • 38. CommonTerminology
  • 39. Document Object Model (DOM) Document Root <html> Element Element <head> <body> Element Element Element <title> <h1> <p>Text Node Text Node Text Node“My Site!” “Hello, World” “My name is..”
  • 40. Function Callsfunction doEquation() { alert(3+ 20);}<script type=“text/javascript”>doEquation();</script>
  • 41. Classes and IDsHi, I’m a class! Hi, I’m an ID!I’m seen multiple I’m unique intimes in a a webpage!webpage..className #idName
  • 42. API vs SDKApplicationProgrammingInterface(API)
  • 43. API vs SDKSoftwareDevelopmentKit (SDK)
  • 44. HTML History
  • 45. W3C andWHATWG
  • 46.
  • 47. HTML5 is Rich
  • 48. Content has more meaning
  • 49. Resource Description Framework in Attributes (RDFa)<div xmlns:v="" typeof="v:Person">My name is <span property="v:name">Bob Smith</span>, but people call me<span property="v:nickname">Smithy</span>.Here is my homepage: <a href=""rel="v:url"></a>.I live in Albuquerque, NM and work as an <spanproperty="v:title">engineer</span> at <span property="v:affiliation">ACMECorp</span>. </div>
  • 50. Microformats<div class="vcard"><img class="photo"src="" /><strong class="fn">Bob Smith</strong><span class="title">Senior editor</span> at <spanclass="org">ACME Reviews</span><span class="locality">Desertville</span>, <spanclass="region">AZ</span></div>
  • 51. Microdata<div itemscope itemtype="">My name is <span itemprop="name">Bob Smith</span> but people call me <spanitemprop="nickname">Smithy</span>.Here is my home page: <a href=""itemprop="url"></a>I live in Albuquerque, NM and work as an <span itemprop="title">engineer</span>at <span itemprop="affiliation">ACME Corp</span>.</div>
  • 52. Geolocationsvar x=document.getElementById("demo");function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else{x.innerHTML="Geolocation is not supported by this browser.";} }function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; }
  • 53. CSS3
  • 54. PseudoclassesPattern Meaning Matches element E when EE:first-child is the first child of its parent. Matches element E if E is the source anchor of aE:link hyperlink of which theE:visited target is not yet visited (:link) or already visited (:visited).E:active Matches E during certainE:hover user actions.E:focusE:nth-of-type(n) an E element, the n-th sibling of its type
  • 55. Typography@font-face { font-family: <a-remote-font-name>; src: <source>; font-weight: <weight>; font-style: <style>;}
  • 56. Detect device typeIn your HTML…<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">In your CSS…@media only screen and (max-width: 480px), onlyscreen and (max-device-width: 480px) { /* CSS overrides for mobile here */}
  • 57. Frameworks For BetterPerformance & Integration
  • 58. User Experience Designers must deconstruct designs and interactions in order toeffectively communicate concepts to Developers.
  • 59. Redlining
  • 60.
  • 61. Develop efficiently.
  • 62. Develop efficiently.<div><h1>Formatting</h1></div>
  • 63. Develop efficiently.<!--Commenting-->
  • 64. Develop efficiently.Most importantly:Know the standards.
  • 65. Develop efficiently.Tables are SO2004.* * Tables should be used for tabular data, not site layouts.
  • 66. WebInternationalization
  • 67. Single Byte vs Double Byte
  • 68. <html lang="en">
  • 69. Do itYourself.
  • 70. Lab 1Redlining, HTML5, CSS3
  • 71. JavaScript
  • 72. Client-side Language
  • 73.
  • 74. Manipulating the DOM Document Root <html> Element Element <head> <body> Element Element Element <title> <h1> <p>Text Node Text Node Text Node“My Site!” “Hello, World” “My name is..”
  • 75. jQuerya JavaScript Library. (There are many out there)
  • 76. Cross-browserCross-language Consistent Quick
  • 77. Animations!$(#clickMe).click(function() {$(#goAnimate).animate({opacity: 0.25,left: +=50,height: toggle }, 5000});
  • 78. Slideshows ode.html
  • 79. Asynchronous JavaScript and HTML (AJAX)$.ajax({ url: "test.html", context: document.body}).done(function() { $(this).addClass("done");});
  • 80. Plug-ins
  • 81. Easy-to-use Interface$(function(){ $("#slides").slides({ preload: true, preloadImage: /img/loading.gif, play: 5000, pause: 2500, hoverPause: true });});
  • 82. Lab 2Animations and Plug-ins
  • 83. “[Programmers] struggle with this idea ofmaking computers behave more like humans,because they see humans as weak andimperfect computing devices”- Alan Cooper, author of The Inmates are Running the Asylum
  • 84. Now you can…Effectively share design conceptsMark up your designsSpeak the Geek Speak (get along with developers)Do it yourself!
  • 85. ResourcesW3C Schools: great tutorials for beginnersjQuery Mobile: awesome resource for web appdevelopmentCSS-Tricks: resource for cool CSS nice & informative tutorialsCodecademy: eLearning site for developmentPhonegap: converts web-based apps to native
  • 86. Thanks!Follow me via Twitter: @designdaisukiOr e-mail me at