{"id":3908,"date":"2015-11-17T05:45:59","date_gmt":"2015-11-16T21:45:59","guid":{"rendered":"http:\/\/blog.mozilla.org\/ux\/?p=3908"},"modified":"2019-01-25T15:58:57","modified_gmt":"2019-01-25T20:58:57","slug":"crossing-over-my-experience-with-web-development","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/ux\/2015\/11\/crossing-over-my-experience-with-web-development\/","title":{"rendered":"Crossing Over: My Experience with Web Development"},"content":{"rendered":"

As a visual designer working on Firefox OS<\/a>, I thought it would be beneficial to learn more about the technical aspect of building a web-based OS and so I decided to take a 12 week front-end web development course<\/a>.<\/p>\n

The course was intensive with each week covering topics such as tools and workflow, HTML fundamentals, CSS3 animations, JavaScript and jQuery. I had learned some HTML and CSS years ago in university but the landscape of mark-up language has definitely changed since then.<\/p>\n

Some of the things I learned in the course has helped me become more in-tune with the type of tasks involved when building a web-based OS. My ultimate goal wasn\u2019t to become a front-end developer, but to develop empathy and to foster a more cohesive working relationship with developers on the team. By being able to ask the right questions and to understand the technical aspects of web development, we can experience a stronger connection between disciplines.<\/p>\n

There are developers who treat UX and design as a means to build code. However, I have also noticed that there are some developers who are very passionate about UX and design. I always appreciate developers who care about design and understand the importance of an optimal text size and is willing to go that extra distance in refining UI elements. I think the same should be applied to designers, to have a basic understanding of the technology in which they are designing for.<\/p>\n

From an efficiency standpoint, it is an essential skill for designers working with web technologies to know how to edit a CSS file. For Firefox OS<\/a>, I am able to make edits directly to the device through WebIDE<\/a> \u2014 a browser-based tool that allows you to create, edit, run, and debug web apps. This allows me to test out fonts sizes and weights, fine-tune an animation, or explore colours, without relying on the aid of a developer.<\/p>\n

\"WebIDE\"<\/a>

Editing CSS through WebIDE<\/p><\/div>\n

\"Editing<\/a>

In WebIDE you can see your edits directly on the device<\/p><\/div>\n

There are many people that believe designers should know how to implement their own designs. While designer\/developer unicorns can exist, oftentimes these individuals end up having a strong expertise in only one of those disciplines. I don\u2019t think designers should be limited by their technical abilities to implement a design and developers shouldn\u2019t be limited by their knowledge of design tools. To have a designer who understands the intricacies of web development and a developer who appreciates typography would ultimately lead to stronger teams and products.<\/p>\n","protected":false},"excerpt":{"rendered":"

As a visual designer working on Firefox OS, I thought it would be beneficial to learn more about the technical aspect of building a web-based OS and so I decided … Read more<\/a><\/p>\n","protected":false},"author":1174,"featured_media":3913,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24660,1],"tags":[19497,31459,31,52893],"coauthors":[],"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/posts\/3908"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/users\/1174"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/comments?post=3908"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/posts\/3908\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/media\/3913"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/media?parent=3908"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/categories?post=3908"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/tags?post=3908"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/coauthors?post=3908"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}