The Problem with Photoshop
The web used to be hideous—envisioned by engineers, it was hard to navigate and ugly to look at. To flourish with users, it desperately needed professionals to provide what print already had: stability, usability, and cohesiveness. And so designers like us were called in to create attractive, coherent user interfaces before a developer wrote a line of code.
Fast forward 20 years—while today’s web designers have tools available to them—like Photoshop—that make early design apps look positively prehistoric, the process of translating designs into websites has hardly evolved at all. Designers still hand their carefully-honed vision off to front-end developers who take the desired look of the website and attempt to create the same thing in a completely different medium: code.
Sound challenging? Add to it that today’s web apps are more complex than ever, and that the design and dev teams are often working in silos and speaking different languages, with a project manager in the middle to translate and iron out inevitable issues, and it becomes very challenging.
It’s Broken; Let’s Fix It
For things to get better, some things need to change, the main thing being the way web designers—whose titles are morphing into Web UI Developers—do their jobs. Continuing to design in programs like Photoshop just doesn’t make sense. Since the web’s medium is code, shouldn’t we use code to design in the first place?
We are well past the days of creating simple, static web pages. Now we design user interfaces that our audience interacts with on many devices in various sizes. More and more, we think about mobile first. This shift requires new tools and a new approach to web design.
Even HTML & CSS Are Not Enough
Many of you have probably already learned a little bit of HTML, CSS, and maybe even JavaScript or jQuery. This is a start in the right direction, but advancements in web technology continually push us into learning more, especially with the new era of web applications.
Web apps are systems that can produce dynamic content. Even whole UI components can be delivered on demand. This changes everything. A base-level knowledge of code can only go so far. To be effective, you need a clear understanding of how a back-end system interacts with the front-end code you’ve written.
Browsers still only render web apps in HTML, CSS, and JavaScript, which means these three languages are the new paintbrushes of web designers. But to be effective in developing user interfaces, UI developers need a deeper understanding of how web apps work—the front-end and the back-end.
The Great Divide
Historically, designers and developers haven’t understood enough of each other’s process. There would be two distinct teams working on the same end product, which created an unhealthy dynamic where each side had its own agenda, rather than a single, common goal.
UI developers working in code who understand their development partners better, and vice versa, creates a strong team that allows for better front-end to back-end integration and enables both partners to learn about the other’s outlook on the project. The outcome is a better relationship between the roles and a better product overall.
Enter UI Developer
The main skill set of a UI Developer is the mastery of HTML, CSS, and JavaScript. The focus is on creating user interface components with reusability and modularity in mind, across all browsers and devices. In other words, not only do they have to develop interactive websites for the devices of today, but these sites must be flexible enough for what might come tomorrow—a big task for ill-equipped web designers who are still using Photoshop to create the comps for user interfaces, and who aren’t taking advantage of the development tools for layout and testing.
Web UI Developers not only design user interfaces, they may also develop living UI style guides that help solidify and document an application’s user interface and must possess a high-level understanding of how to develop user interfaces that are ready for back-end integration. They are designers at heart who use code to create.
The demand is high for people who possess both design and development skills. Their scarcity leaves many high-paying positions open or partially filled.
According to Glassdoor, last year the average salary for a UI Developer was $75,000 (and rising). There were 1.3 million unfilled UI/front-end positions, a number that’s expected to rise 28% by 2018. Graphic designers, by comparison, had an average salary of $50,000. There were only 200,000 open graphic design positions and growth is projected to be just 7%. Those are staggering numbers that highlight the shift in the market towards designers who can code.
UI at Code Fellows
We designed the Web UI Development Accelerator to fill a growing need. With this program, we aim to equip designers with the hard skills, such as HTML semantic architecture, modular CSS, JavaScript, jQuery, responsive design, and Sass. We also introduce students to concepts and tools that enable them to be a dynamic presence in the development process. They get exposure to back-end platforms, such as Node.js and Ruby on Rails, and front-end frameworks, like Angular.js, plus hands-on experience working with real development teams to bring a web application to life.
What does this mean?
If you are a UI Developer, you need to become immersed in the ecosystem you’re designing for. Design for the web with code to increase the cohesiveness of your team and the quality of your product.
