← Ben Doyle Gray Design engineering Warrenville, IL
I am a design engineer. I take an interface from information architecture and visual design through copy, component system, and the production code that ships it. Sixteen years of it, across high-traffic e-commerce, SaaS platforms, and internal tools.
ben@bendoylegray.com LinkedIn Résumé Remote or Chicago area
Most teams hire a designer, then hire an engineer to rebuild what the designer drew.
The translation takes weeks, and the things that get lost are never the big things. It is the type that was set against real font metrics and is now set against a guess. The motion that was timed to the actual geometry and is now a 300ms default. The keyboard path nobody rebuilt because it was not in the mockup.
Those are not design details or engineering details. They are the same detail, and they survive when one person carries them from sketch to production. That is the whole of what I sell: the seam, removed.
Five of my sixteen years were spent leading engineering teams and setting the code review, accessibility, and release standards those teams worked to. In practice that means I do not need a senior engineer to check my work, and I will tell you when something you have asked for is going to cost more than it returns.
A site or product surface from nothing: architecture, visual design, copy, and the shipped front end. The version where you hire one person instead of two.
Component libraries built to survive contact with production, documented so the team that inherits them can extend them without calling me.
A product whose interface was finished once and has drifted since. Redrawn and reimplemented, usually in place, without a rewrite.
WCAG AA and Section 508 remediation, and the payload and rendering work that makes a storefront usable on the network it actually ships over.
A contact sheet from a roll of film. The grease-pencil mark on each frame is drawn in SVG and revealed with a dash animation whose length is measured from the path at runtime, because these are splines through sampled points and the drawn curve runs longer than the shape it was fitted to. The wordmark's three lines are letterspaced to a common measure taken from the rendered font, so the name holds as a rectangle whichever face loads. Plain HTML, CSS, and JavaScript. No build step, no dependencies.
Swiss typographic layout on a hairline grid, with a custom logo mark positioned against live font metrics measured at runtime via Canvas TextMetrics, so the mark sits correctly against the wordmark no matter how the browser resolves the typeface.
A keyboard-accessible master and detail gallery built from real button elements rather than click handlers on divs, degrading to a plain stacked gallery with JavaScript disabled. Accessibility as a structural decision instead of an audit item.
Eleventy 3.x static build for a handmade-goods business, with a modular SCSS architecture on the Sass @use module system and product copy written in the owner's voice.
Eleventy 3.x static build for a mental health professional, with a modular SCSS architecture on the Sass. Copy was written mostly by the owner, with some editing and formatting by me. The site is fully accessible and keyboard-navigable, with a focus on clear information architecture and user experience.
A Discourse forum for conversation about neurodiversity in the workplace, with a custom theme and a few plugins to make the experience more accessible and user-friendly. I also host the site on a VPS I manage, keeping it up to date and secure. Uses Docker and Nginx for deployment, with automated backups and monitoring.
Tell me what you are building and where it is stuck. If it is not a fit I will say so, and I will usually know who is.