Utilitarian Design
Figma
What
Aero Files is a fictional desktop application for efficiently batch-renaming files. The app supports both individual and bulk renaming, offering core features such as full filename replacement, prefix/suffix appending, and automatic sequencing. The goal was to create an organized experience that simplifies a typically tedious task for users managing large volumes of files.
The application’s light mode.
The application’s dark mode.
Why
Batch-renaming files is often a repetitive task that can overwhelm users, especially when dealing with large volumes. This application aims to simplify the workflow by providing software that balances power with clarity.
How
The application was designed with simplicity and clarity, enabling users to preview changes and apply batch modifications in just a few steps. The visual direction was inspired by Microsoft’s vintage design language to create a more inviting interface. Soft gradients and glossy surfaces were added to counteract the bland, mechanical tone often associated with utility software.
Process
I explored a style that would make the application welcoming and researched existing batch-renaming tools (e.g., Bulk Rename Utility, Advanced Renamer) to understand their functionality and key features. From there, I shaped the user flow and developed the interface using visual components and color schemes to establish specific atmospheres.
User Flow
The application’s user flow.
Components
The visual styling was inspired by Windows Aero, the design language used in Windows Vista and 7, which later influenced the visual polish refined in Microsoft’s Fluent design system. Interface elements such as buttons, input fields, and window frames were designed with soft highlights, translucency, and subtle gradients to evoke a nostalgic tone.
Color
The default wallpaper used for Windows 7’s login screen.
A wallpaper used for Windows Vista Ultimate.
Drafts
Early draft of the file screen’s light mode.
The foundational design developed gradually, with the bottom bar layout evolving through multiple iterations before reaching its final version.
Draft of the file screen’s light mode.
Thumbnails were initially intended to display image contents but were replaced with standard icons, as the small images lacked visual clarity at that scale. To improve spacing, the application’s dimensions were adjusted both horizontally and vertically, refining the bottom bar layout.
Draft of the file screen’s dark mode.
The navigation pane initially featured a raindrop effect inspired by iOS backgrounds, which was later replaced with sun rays to represent both the weather shift and the mode transition.
Draft of the file screen’s dark mode.
Thunder effects were initially added to the navigation pane but were removed due to their clash with the design’s sleek tone.
Final Results
Mockup of the file screen’s light mode.
Mockup of the file screen’s dark mode.