mary.codes

Have you ever heard the term "design engineer"? Up until recently, I didn't realize that there was a niche being carved out in the last five years for people who specialize in bridging the realms of development and design.

Discovering design engineering

Last month, Jim Nielsen wrote an article called "The Case for Design Engineers, Pt. II" (2024). The article gives an example of how a static design can be interpreted many different ways by a developer. There is a distance between the design and the implementation. Nielsen makes the case that designing with code makes sense.

"Design engineers don’t just push pixels around in a GUI tool, they do it in a web browser — the medium of delivery — designing not just the visuals but the interactions that make sense for a living, breathing, moving interface.

This approach to design — designing with code — doesn’t result in one artifact that approximates the final deliverable to drive consensus, then requires a translation to the deliverable artifact itself.

Instead, the artifact is the deliverable — just in embryonic form."

This is a follow-up article to "The Case for Design Engineers" (2022). In the original article, Nielsen makes a case for having a dedicated design engineer role to reduce wasted time iterating between design and programming. The article references "Traditional Web Design Process is Fundamentally Broken" (2022) which explains how many wireframes and mockups, a.k.a "artifacts", are now required for a responsive web design, if they are created in a static medium. According to Nielsen, "design engineers are worth their weight in gold" because of this problem.

"They have an understanding of the constraints of the medium, so from sketches to wireframe to high fidelity mocks, they only have to produce one or two artifacts while simultaneously keeping a picture in their head of how the elements of those designs flex and flow and change across different sizes."

In "On Design Engineering: I think I might be a design engineer..." (2021), Trys Mudford narrows down the niche in which design engineers live. Many web developers either live in the backend or back-of-the-front-end, where design is a second-class citizen to functionality. Design engineers live in the front-of-the-front-end, and work closely with designers to bridge the gap between design and functionality. Design engineers work alongside designers and back-of-the-front-end engineers to come up with solutions that are both beautiful and functional.

"In essence, a design engineer’s goal is to be helpful. Helping UX come to sound decisions, helping research get the most useful insights from their testing, helping designers generate sound & deliverable ideas, and helping engineers understand the design intention. But the primary focus is on doing anything they can to help translate the design for the engineering team."

Brad Frost writes about the divide between front-of-the-front-end and back-of-the-front-end web development (2021). A front-of-the-front-end developer is an expert in semantic HTML, CSS, DOM manipulation, accessibility, and design. A back-of-the-front-end developer is an expert in business logic, routing, APIs, authentication, and data.

Adactio (Jeremy Keith) has an article about consciously specializing in front-of-the-front-end development as a design engineer (2021). Specializing in UX design and development allowed Keith's clients to utilize whatever backends they wanted, while Keith focused on creating optimized front-end experiences.

One of the earliest articles I could find on this subject, although the term "design engineer" never appears, is "The Great Divide" (2019) by Chris Coyier. This article began exploring the differences in JavaScript developers that was already happening at that time. Two front-end developers could have vastly different skillsets and goals based upon whether they specialized in presentation or business logic, but they're still both called front-end developers.

"Two 'front-end web developers' can be standing right next to each other and have little, if any, skill sets in common. That’s downright bizarre to me for a job title so specific and ubiquitous. I’m sure that’s already the case with a job title like designer, but front-end web developer is a niche within a niche already."

Perhaps InVision's Design Engineering Handbook (2020) explains design engineering best:

"Simply put, design engineering is where solutions are created at the intersection of design and development. It’s not only about solving problems for customers; it’s also about improving the design and engineering process, making a space for communication and collaboration, and building a great experience. Or to phrase it another way: It’s a question of building the right thing versus building the thing right."

How I feel about design engineering as a full-stack developer

I feel like the realm of design engineering is an area of development that I gravitate toward, but I have a hard time understanding it as a job title and full-time role.

I started out as a front-of-the-front-end developer. I could consume an API and transform data, but my main focus was on creating HTML and CSS, with a dash of JavaScript for interactivity. I spent a lot of time creating WordPress themes, which required a bit of JavaScript and PHP, but mostly, I was focused on making things look great.

Once I was hired as a professional front-end developer I had to quickly learn more about working within a full JavaScript application. I had to learn how to work within a large JavaScript app and use data from APIs. I hadn't given much mind to security when working on my own projects, so I had to learn all about XSS attacks and form validation. I started collecting skills like Pokémon badges, and each one took me further away from my safe space in front-of-the-front-end land.

Eventually, I started working with PHP and databases. I mean really working with them. I've gotten to a point where I can write a pretty complex SQL query in a few minutes. Now I mostly work on a PHP monolith with a sprinkling of React frontends.

On a small team, nobody has the luxury of working only on the front-of-the-front end. Part of what makes my job interesting is being able to work on a wide variety projects, and no two are alike. One week I might be working on something front-of-the-front-end, like implementing a new modal or form. The next week I might be designing email deployments. Another week, I might be working on payments.

However, one of the best parts of my job is that I often get a lot of leeway in my project designs. Oftentimes, I have design guidelines that I have to follow, but I'm given time to iterate on an idea and try out different designs and interactions. While my sole focus isn't on design engineering, my goal is the same, to create solutions that are accessible and easy to use.

Focusing on design engineering skills

While I'm a generalist by necessity, I am increasingly focusing on developing my design engineering skills in my free time. I've been reading design books. I'm learning Figma. I'm working through lecture notes on User Interface Design and Implementation at MIT OpenCourseWare. As I dig deeper I find a wide variety of sub-niches that are appealing to me.

• Accessibility. How can systems be designed and implemented to be accessible to the widest audience possible? How can human-computer interaction be made easier for everyone, regardless of ability?
• WebXR. How do we create augmented and virtual experiences that are user-friendly and accessible? How do people respond to XR experiences? In what ways can XR experiences be democratized, instead of walled behind expensive headsets and glasses?
• Human-centered AI (HCAI). How can AI be used to augment human capabilities? How should user interfaces be designed to best serve humans in a safe and understandable way?

These are just some of the topics that I've been thinking about lately. Do they really belong as part of design engineering? Maybe they're more on the fringes, especially WebXR and human-centered AI. However, I think they're some of the most interesting topics to research right now.