What separates a UI designer from a front-end developer, and the reason that it’s so vital that we make the distinction.

Overview

There is a major dividing factor in the design and development industry that doesn’t get as much press as it should for how important it is.

While this argument is not nearly as popular as the age-old “should designers code,” question, instead this distinction attempts to get to the heart of the issue: “who should actually be coding your front-end?”

Today, we’re going over what separates a UI designer from a front-end developer and the reason that it’s so vital that we make the distinction.

What is a UI designer?

A UI designer is a designer that designs UI’s.

No, really, that’s it. A UI designer focuses on using design principles, heuristics, and best practices to create a visible rendition of the user interface of your product that can be tested and reproduced in code.

These designers usually work in tools like Figma, Adobe XD, Protopie, Axure, Sketch, UXPin, and other UI design tools.

A UI designer’s environment typically looks like this:

What is a front-end developer?

A front-end developer is a developer that specializes in transforming designs into reproducible, running code that is stable, scalable, and fault-tolerant.

Front-end developers generally work with IDE’s (integrated development environments) or simpler code-editors, along with libraries, build tool-chains, and packages that allow them code the front-end of a product based on design specifications.

A front-end developer’s environment typically looks like this:

How are they the same?

Now don’t get me wrong, both a FE-dev and a UI designer work with the design, and both are directly involved in its implementation in various ways, but that’s usually where the similarities end.

We now need to understand the critical differences between these two roles.

How are they different?

The main, and major difference between a UI designer and Front-end developer is as-follows:

• A UI designer works to create the layout, typographical, iconographic, content placement, visual, and aesthetic specifications for the UI in a design tool, whereas
• A Front-end developer takes those specifications, converts them to code, and then applies them programmatically to create UI itself, as it runs on a device.

The UI designer works in the design’s specs. The Front-end developer works in design’s code.

This is the distinction here that we really need to pay attention to because the waters can get pretty muddy at this point, especially when we introduce coding designers, which can actually cause more problems than they solve.

Separation of concerns is crucial

Now that we understand the difference between the two roles, we need to understand why the distinction is so important, and I can answer it in one, easy sentence: front-end build tools and libraries.

Coming from a design background myself, I have worked with front-end build tools and libraries like React, Angular, Vue, Ember, Riot, etc. and I can tell you that the second Node.js gets involved, you’re dealing with a VERY different animal than just HTML, CSS, and JS.

Take for example React, which in and of itself isn’t terrible, but then add in Redux or MobX for state management; now add in node, nvm, npm, the cli, git, grunt, gulp, webpack, babel, and a WHOLE HOST of other libraries with dependencies on top of dependencies where if one piece is off, the whole thing doesn’t work.

Oh and I haven’t even gotten into database handlers yet, or GraphQL, or Apollo, or Firebase, or MongoDB, or socket-based communication, promises, service workers, custom middle-ware, typescript, or anything else like that, and that’s just the tip, OF THE TIP, of the Front-end iceberg. TRUST ME when I say that designers would be wise to — leave well-enough alone — when it comes to modern front-end dev work with single-page applications.

→ To do it right takes a dedicated skillset, not a UI designer farting around in the Vue CLI, because it is dangerously easy to screw up especially when operating at scale.

A dedicated front-ender has studied these libraries and methods of working with both the tools and ecosystems surrounding them in order to build an actual product with them.

And similarly, on the flip-side, designers have normally spent many years honing their skills and understanding what makes a design look, feel, and behave in a manner that’s aesthetically-pleasing.

No FE-dev should have to understand how to work in tools like Figma or put a design together from scratch, and no UI designer should have to know how to work in a node-based environment, because they’re two, distinctly different skillsets.

The last thing you want is a UI designer/quasi-front-end-developer churning out production code that is:

• Poorly written (because that’s not what they do)
• Brittle (because they can’t keep it properly templated and DRY), and
• Full of security holes (because they don’t understand INFOSEC, if they update anything the project gets bricked, and they don’t know how to fix it properly).

And if you think I’m wrong, I challenge you to put a designer’s code in front of a front-end developer, ask them what they think of it, if there’s anything wrong with it.

Something tells me you’ll probably get a very interesting response.

So what does this all mean for you?

What this means is simple: if you’re a front-end developer, and you like doing front-end work, get it. If you’re a UI designer, and you like doing UI work, similarly, get it.

But if you find yourself trying to straddle the fence between UI design and Front-end development in a desperate attempt to be both at the same time, I can tell you right now from experience that fence is there for a very good reason.

You can talk through the boards, and you can even open the gate to help get things moved through, but stay on your side.

Trust me when I say that your sanity, product team, and stakeholders will thank you.