Categories: Firefox OS General

Crossing Over: My Experience with Web Development

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 to take a 12 week front-end web development course.

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.

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’t 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.

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.

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, I am able to make edits directly to the device through WebIDE — 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.


Editing CSS through WebIDE

Editing CSS through WebIDE

In WebIDE you can see your edits directly on the device

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’t think designers should be limited by their technical abilities to implement a design and developers shouldn’t 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.