Redesigning PowerToys for Windows 11

Last year, I wrote a blog post called “Redesigning PowerToys” that introduced Fluent Design to the open-source PowerToys project. Since then, a lot has changed..

PowerToys for Windows 11 (Concept)

New utilities were introduced, the current ones updated and the overall project has grown a lot. On the UI side, I’ve been busy redesigning and actively contributing assets (e.g. icons) and XAML for the majority of tools that ship with PowerToys. ModernWPF provided a way to reskin default WPF controls and made them look like WinUI 2.5, which was a great start to get to a more coherent suite of apps.

But then Windows 11 happened! This new take on Windows introduces a fresh new UX that touches all layers of the product. New materials like Mica provide a calming touch to the OS, while micro-animations bring the interface alive.

With WinUI 3 unpackaged support coming soon, I wanted to explore how to bring this exciting new take of Fluent to PowerToys. In this blog-post, I re-designed a couple of utilities as a concept and inspiration for the community to provide feedback on. All concepts are build as non-functional UWP apps, so you can try them out yourself look at the XAML.

Color Picker

The Mica title bar and the new, circular color history are the biggest change here. The different color tones are now stacked virtually and made smaller to reduce clutter and improve overall hierarchy. Also keyboard navigation is more straightforward in this version while smoother animations are used.

Source code

Image Resizer

Image Resizer (for bulk-resizing images) got a fresh coat of paint. This UI also makes it easier to set custom dimensions and saving it directly as a preset for later use (without the need of opening the Settings page).

Source code

PowerRename

The current version of PowerRename (a utility to bulk-rename files and folders) is a Win32 app that looks… dated :)! It’s a powerful utility, but the UI breaks certain conventions: every setting is a CheckBox but sometimes behave as a RadioButton.
This new version brings theming support and flyouts for the search and replace fields to help users insert regex commands more easily.

Old vs. new

Source code

FancyZones Editor

The current version of the FancyZones Editor is already a big step up from the 1st generation. However, there are still some opportunities to simplify the editing experience. The current UI provides a way to edit certain properties in the selection screen, and others in the editors itself. There are also different editors based on the layout type and certain functionalities there are hard to discover, or simply not based on Windows conventions (like dragging and holding for merging zones). This concept provides a clean editor experience with all of the settings included by having a flexible toolbar with different modes to merge, split zones or set zone spacing.

New editor experience for FancyZones

Source code

Settings

The Settings module is an important application that allows users to customize the various PowerToys utilities. Here, we have adopted the OS Settings app look and feel to provide a familiar and straightforward way to get to the settings you need. This is currently shipping with PowerToys 0.45!

Wrap-up

Windows 11 brings a lot to the table and a more coherent user experience across Windows. With WinUI 3 supporting the same look and feel, and with unpackaged support coming soon we’ll hopefully see more Windows apps adopting it!

If you have any feedback, please let it be heard in the GitHub issues on the PowerToys repo!

UX designer by day, Windows developer by night. Talks about Fluent, XAML and UWP a lot.