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..
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.
System-tray flyout
This new flyout can be found in the Windows 11 system tray. It provides access to utilities like Run, Color Picker and Shortcut Guide while providing quick settings. These quick settings are module dependent and allow users to e.g. quickly switch between Fancy Zones layouts or setting their Awake state.
The bottom bar provides access to the PowerToys Settings app while update notifications.
Run
A new look and feel for Run brings it closer to Windows Search. It provides a smooth launcher experience to search for files, run apps or use one of the many plugins.
On launch, it can show recent queries and an overview of plugin shortcuts. The results panel can be customized by plugins. It can contain certain commands (like opening an app as administrator or directly into Windows Terminal) or be optimized to show previews (when selecting files).
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).
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.
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.
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!
