3DXpert icon redesign project

3DXpert is an all-in-one industrial additive manufacturing software solution. Back in 2021 became part of Oqton’s application suite and stopped sharing its UI platform with Cimatron who was sold by 3DSystems to Battery Ventures.

Being part of Oqton meant the transition of the icon design from Sketch to Figma. Splitting from Cimatron gave us an opportunity to redesign the icons to a modern, fresh and colour brand-focused style. 

3DXpert icon redesign: a journey of modernization

When it comes to software design, the devil is in the details. At Oqton, we recently undertook the challenging task of redesigning the icon set for our 3DXpert software. This blog post takes you through our journey, from identifying the problems with the old icon set to implementing a sleek, modern design that enhances user experience.

The old icon set: a need for change

3DXpert’s previous icon set was shared with Cimatron software, featuring a rich colour palette that, while visually striking, didn’t align with current UI trends.

Modern interfaces tend to favour a more monochromatic style, shifting focus to content rather than the UI itself. It was clear that a change was needed to bring 3DXpert’s visual language up to date.

Planning the redesign: a massive undertaking

1. Customizable UI: 3DXpert allows commands to be set as large or small buttons, requiring flexible icon designs. 
2. Multiple sizes: Each command icon needed to be encapsulated in an .ico file containing 7 sizes (16, 20, 24, 32, 40, 48, and 64 pixels) for optimal display across various screen resolutions.
3. Pixel-perfect design: We focused on designing three key sizes (16, 20, and 32 pixels) to achieve clear, pixel-perfect icons.
4. Icon inventory: After removing unused icons from the previous set of over 1,000, we ended up with a more focused set of 700 icons.

3DXpert, as a high-end software product designed for professionals, faced the challenge of integrating complex geometries required for tasks while also visually conveying behavioural rules within small icon spaces.

To address this, we simplified the design by emphasising the primary function across the entire icon area, while representing secondary actions in the form of a badge placed at the bottom-right corner of the icon.

Additionally, all icons were designed to conform to an isometric guide for shape consistency, and the use of colour was minimised, dividing them into primary and accent colour groups. This ensured that the flow of visual attention would naturally move from the top-left to the bottom-right, resulting in highly readable icons.

All icons were vector-based to ensure compatibility with evolving high-resolution hardware environments, and particular attention was given to adhering to Pixel-perfect standards, considering pixel-level rendering in user interfaces. While this Pixel-perfect approach can sometimes compromise natural visual balance, it was essential for accurately and clearly conveying command functions in a high-end product, ultimately leading to the creation of Oqton’s unique and distinctive icon design.

Design themes and considerations

 

Visual language

We experimented with two perspective options: isometric and front view. While front-view icons looked sharper, we ultimately chose the isometric perspective for a more modern look.

Color theme

We defined colors centrally in a Figma library style, allowing for easy global changes if needed. We developed both light and dark mode versions to cater to different user preferences and working environments.

Preparing to export: The technical challenge

Taking a large number of newly redesigned icons and exporting them into a format that can be ingested into the desktop software stack proved a fun challenge to tackle with some simple automation.

1. Naming conventions: We implemented a strict naming convention, including size. ID/Key, and a brief description for each icon.
2. Size management: To reduce design workload, we only design icons at 16px, 20px, and 32px, using scripts to scale these to the additional required sizes.
3. Quality control: We developed Figma scripts to check for sizing accuracy, naming errors, and missing IDs, streamlining our quality assurance process.
4. Packing: Each icon needs to be exported as a single .ico file containing all seven sizes. We created a bash script to automate this process and general error reports for missing reports missing sizes or other issues.

Conclusion

Redesigning the 3DXpert icon set was a complex but rewarding process. By combining design expertise with clever automation, we were able to create a modern, cohesive icon set that enhances the user experience of our software. This project showcases how attention to detail, from visual design to technical implementation, can significantly impact the overall quality of a software product. The new icon set not only modernised 3DXpert but also improved usability by providing clear, consistent visual cues across the application. As we continue to evolve our software projects like this icon redesign play a crucial role in keeping 3Dxpert at the forefront of additive CAD technology.