3DXpert

A journey of updating a large number of icons in one of our desktop software products

3DXpert

27.08.2024

WRITTEN BY

Laura Reznik

Senior Product Engineer

WRITTEN BY

Ashlyn Roh

Design Specialist

WRITTEN BY

Harry Hextall

Design Specialist

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 color palette that, while visually striking, didn't align with current UI trends. Modern interfaces tend to favor 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

Redesigning an icon set for complex software like 3DXpert is no small feat. Here's what we had to consider:

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.

Our first step was mapping out the necessary icons and reproducing them in Figma, grouping them by feature families for better organization.

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 for Export: The Technical Challenge

Taking our newly redesigned icons from Figma to a format compatible with desktop software presented an interesting technical challenge. Here's how we tackled it:

1. Naming Convention: 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 designed 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. Packaging: Each icon needed to be exported as a single .ico file containing all seven sizes. We created a bash script to automate this process and generate error reports for 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 modernizes the look of 3DXpert but also improves 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 CAD/CAM technology.