For engineers building user interfaces, I find there’s heavy emphasis on technical chops and little to none on design comprehension. Yet a subset of design skills can distinguish great from merely good UI engineers.
I’d term these skills “pre-visualization”: understanding design specifications before writing any code, and at a level beyond what designers formally deliver. A big part of pre-visualization is the ability to break down specs into reusable components. You discern visual patterns from existing parts of your app, site, or larger OS, and apply them to a designer’s work. In many, if not most cases, much of the spec maps cleanly to what came before. Common UI patterns like buttons, form elements, and navigation generally repeat themselves. Some will not.
The decision tree for this new material can be tricky and nuanced. Engineers can push back to have designs follow what came before, alter the existing components to match the new spec, or create something new. For example, your app has info banners that appear and automatically dismiss themselves after a set period. At some point a designer proposes a new spec where a banner stays on screen indefinitely until a user manually dismisses it.
On a broad level, there’s many ways to treat this UI component. There could be a broad change for the sake of consistency and simplicity; all banners could stick to a timer format, or all banners could be user dismissed. Or maybe the layout justifies a new variation, which opens its own set of questions: should the original banner change to serve the “default” UI case? Is the new banner style a one off rarity, or a more common variation? The answers to these questions have implications for engineering and the larger design system of the app or site.
Pre-visualizing component usage in a smart way improves efficiency for designers and engineers alike. There’s less time rebuilding UI and second guessing design decisions. Customers also get a more consistent experience.
Pre-visualization also involves understanding how specs change in the face of dynamic conditions: screen size, content, and context. It’s important given almost every designer spec has gaps in coverage. For instance, a responsive web design may have a detailed spec on a small (e.g. targeted at most smartphones) and large viewport (e.g. external displays), but nothing between. It can fall on the UI engineer to understand how content scales and changes between those screen sizes. Or a native app displays tabular data; there are many ways it could handle overflow content. Content may wrap, get cut off with ellipsis, dynamically expand column width, among other options. It’s often on engineers to catch those gaps and address them early in their work.
Even with all these advantages, pre-visualization is an odd fit for computer engineers. It doesn’t derive from bread and butter tech skills (programming languages, APIs) that engineers usually focus on. It’s effectively design driven; aesthetics, visuals, and general UI familiarity play a foremost role.
Given this, the best way to grow UI engineers in pre-visualization is with a detour into hands-on design training. It doesn’t have to be formal. Some of the best ways to level up are just giving an engineer a design spec and room to think. Before jumping into the usual comfort zone of code, spend an hour sketching out how the design changes given different conditions. Or use a tool like Mac’s out of the box Preview to add simple highlight shapes to identify patterns in a spec to cross reference later. This can be independent work or in conjunction with the design team.
Another way to improve pre-visualization is directly shadowing product designers. Have engineers pair with a designer as they are building a specification. As engineers observe and ask “why”, the more they’ll understand how designers make design decisions.
It may seem unorthodox, but a small design investment for engineers can have long term benefits. Moving a few steps ahead on the visuals before diving in the code saves time, improves the designer/engineer workflow, and makes your users happier.