Technical Artists play an important role in bridging UI design and software development of embedded devices. Their core task is to implement the UI vision to a functional user experience. They do so by composing the UI from 2D and 3D UI assets, creating visual effects, and optimizing the rendering performance for the target hardware. So, how are they doing it?
What Tools Do Technical Artists Use?
While Technical Artists in the gaming industry have been building some of their tools and toolchains in the past, tools such as Houdini for game development and film animation can make their lives easier. The role of a Technical Artist is somewhat different in the product creation process of an embedded device compared to a 3D online game. Technical Artists working on Human Machine Interfaces (HMI) and embedded devices are increasingly relying on tools such as the Qt Design Studio. The primary purpose of these tools is the composition and optimization of the User Interface. Hence, I will refer to them in this blog post as UI Composition Tools.
Illustration: Tool sphere for Technical Artists
Technical Artists need to be familiar also with other than UI Composition Tools. On the upstream side of the workflow, Technical Artists need to understand design tools that create the UI assets for their work. Typical examples of such applications are Figma and Adobe XD for 2D assets and Maya and Blender for 3D assets. Technical Artists should get these assets from UI designers, but it's good to understand how these tools are designed to optimize the asset import from the UI Design tools to the UI Composition Tools. On the downstream side of the workflow, Technical Artists should understand the basics of Integrated Development Environments (IDE) for C++ programming. General knowledge of IDE tools will support smooth collaboration with back-end software developers.
To understand the detailed capabilities of UI Composition Tools, let’s look at some of the critical tasks of Technical Artists in the embedded device industry.
What are the Key Capabilities of UI Composition Tools?
Combining 2D and 3D assets, adding new UI elements, and reviewing the resulting layout in a live view helps to create the foundation of the functional user experience. The import flexibility understanding the different UI design tool’s logic such as Figma and Adobe XD is crucial to maintain as much as the original design.
Image: 3D Editor of Qt Design Studio
Motion and Transition implementation are crucial to bringing the UX designer's vision to life. Designing motions in the UI, such as cinematic camera movements in a 3D scene, can create meaningful and even dramatic effects. Making transitions with editable easing curves between different states and timeline animations enable a smooth flow. And again, the live view while manipulating these motions and transitions will make the implementation effective.
Adding Visual Effects (VFX) take the user experience to the next level and, therefore, is also crucial for UI Composition Tools. Applying light, shadows, and reflections makes the UI more realistic. Embedding particle emitters for effects such as fire, smoke, or snow add another flavor from the real world. While Visual Effects in embedded device development is essential, it is different from developing Computer Graphics Imagery (CGI) for online games or even digital film elements.
Illustration: Particles emitter created with Qt
A Technical Artist in embedded device development needs to worry less about character rigging or figure animation. Furthermore, embedded devices do not always provide the same performance as a game console or PC. Therefore, a lot of skills of the Technical Artist go into the optimization of the effects. Real-time rendering of a visual effect might not be an option on an embedded device. Faking the illusion with pre-processed images might be a suitable optimization. The tool should also support other rendering optimizations such as anti-aliasing, face culling, or polygon reduction.
Sensorial Design in embedded device UIs covers the areas of surface and material design. The tool should create shiny surfaces, fabric textures, and metal objects to render a realistic illusion. It should be possible to utilize different rendering technologies of the target hardware. Even better would be the abstraction of graphics acceleration, allowing the Technical Artist to design once and deploy to multiple embedded devices with varying rendering pipelines.
Illustration: Materials, lights, and reflections applied in Qt Design Studio
Finally, the Interaction Design capabilities of a UI Composition Tool should be such that turning user actions into actions in the application is trivial and does not require any coding skills. The tool needs to support different interaction types such as touch screens, virtual and physical keyboards, gestures, and voice control. The tool should enable linking of user interaction, such as pressing a button into an event in the application. A low-code method for creating these relationships in the tool's Graphical User Interface should be present.
What Software Do Technical Artists Use?
Technical Artists also need dedicated software for different purposes. Here are some of them:- Prefabricated UI assets such as functional sliders and buttons ensure that UI elements aren't reinvented from scratch.
- Rendering Hardware Abstraction software allows Technical Artists to create a user experience once and run it without modifications on different hardware with different graphics-acceleration technologies.
- Safe Rendering components enable Technical Artists to separate safety-critical UI elements in embedded devices from the rest of the user experiences allowing them to run even if the main application is unstable.
- Reference software stacks for different embedded device hardware ensure the ability to rapidly prototype the rendering pipeline on the target hardware.
New Role – New Tools
New times call for new tools. Technical Artists can rely on tools designed for them in the future. An increasing number of tools cater to their unique needs, such as the Qt Design Studio. In addition, Technical Artists need to increase their knowledge in tools that provide the input assets for their work. Technical Artists, especially those working on user experiences for embedded devices, need to grow their expertise on low-code tools for high-performance programming languages such as C++ to be part of a smooth collaboration with software developers, particularly back-end developers.
