Clarifying the 5+ roles of a “Front-End Web Developer”

Will Little

Anyone who has looked for a job in this area understands there is widespread confusion about who does what when it comes to designing user experiences (UX) and building user interfaces (UI) in a web browser.

For example, the variety of titles seen in job postings is crazy:

• Senior UX Designer
• Front-end UX Developer
• Web Front-End Application Designer
• UI/UX Engineer
• Web UI Developer
• Front-end UX Ninja
• UX/JavaScript Developer
• Junior Web Designer
• Front-End UX Architect
• Web / UI Designer
• Senior Front-End Engineer
• Front-end Unicorn
• etc…

Looking at them in summary, it's usually some formulation of:

• (Sr./Jr.)
• (Web/Front-End/JavaScript)
• (UI/UX)
• (Designer/Developer/Engineer/Architect/Ninja/Unicorn)

This is nuts, people. Who are we looking for, exactly? This may partially explain why there are so many terrible web experiences out there.

It's especially frustrating for someone with skills in visual- and/or experience design who is considering what exactly to learn to land a job in the world of the web.

I've spent the last decade of my life “designing” and overseeing the development of web products (working myself mostly as a Rails/JavaScript developer). What I've observed, especially recently with the advent of JavaScript-heavy applications, is that during the design and development process there are at least five distinct jobs that need to get done on the “front-end” alone. These five roles are usually forced upon (or ambitiously tackled by) 1–2 people.

(1) Creative Director

Someone needs to tie in the branding and business objectives of the company into the high-level visual and experience design of the product. This person needs to be a dreamer and influential visionary. If this role is lost at any point in the process, it can lead to team burnout and/or disillusionment with the project.

(2) UX Designer

While the high-level creative direction is being set, a member of the team needs to talk to a zillion potential users and get radically specific about the product objectives, content, views, feel, and flow. While it's best to start prototyping in a web browser ASAP, at this stage getting a decent set of wireframes in place is smart. The UX Designer of the project needs to know what can and cannot be done in a web browser from a technical perspective, and be disciplined about listening carefully to users, staying at this level of product development as long as possible while leaving the bulk of visual work to the UI Designer.

(3) UI Designer

Here is where the mood boards, color boards, and style tiles get rolled out and iterated with the team to figure out what exactly the UIs will look like. The best visual designers don't necessarily (in fact, rarely) make the best UX designers, so it's important to hire someone who can really nail the UIs. This is harder than you think, so set realistic budgets and timelines… (I'm looking at you, hiring manager).

(4) UI Developer

Amazing mockups are useless unless someone can actually bring them alive in web browsers across all devices and screen sizes/resolutions. The best teams move lightning fast through the actual “mockup” stage (making as few as possible) and do most of the prototyping work and subsequent iterations in the web browser itself. The UI Developer, therefore, is responsible mainly for the HTML and CSS. Don't expect your UI Dev to do any heavy-lifting with JavaScript (yes, read that again, I mean it). This is perhaps the most common mistake when hiring the team and building the product. I've learned the hard way (especially when it comes to down-the-road iterations) that it's better to have your UI dev be a strong visual and/or experience designer than a back-end developer.

(5) JavaScript Developer

A JavaScript (JS) developer is essentially a back-end developer (in fact, the best ones are indeed proficient with Node.js) who needs to architect the JS tools to efficiently test the UX and manage the flow of data to/from the back-end. At the same time, the browser performance needs to be rock-solid, consistent with what the UX designer has in mind (slow page rendering is lame). A modern JavaScript developer should be able to discuss with you the cost/benefit of starting your project on Angular.js versus Flux/React (or something else), and be very comfortable with SVG technologies to encourage your visual/experience designers to think bigger about what can be built.

— —

Every company/team thinks about these roles slightly differently, so I'm sure this can be divided in other ways, but the key takeaway is that building great web applications these days requires at least these 5 roles on the “front-end” alone.

[Author's note: I originally wrote this article in December 2014 and had it posted on my personal site here. I've recently migrated and redirected the few articles I had there over to Startup Rocket, including this one. Subscribe to my newsletter and I'll let you know when I get new articles up. Thanks!]