“As a Windows user, it’s a very surreal way to install a program.” – Unsung

Mac’s operating system has a peculiar way to install apps. An app typically arrives in a file with a .dmg extension (it stands for “device image”; my brain always reads it as “damage”), which upon double clicking becomes a kind of a drive. You go inside the drive, and there is the app icon.

But the journey isn’t over. While you can run the app from the virtual drive, the drive will eventually disappear after the reboot – or if you eject it – so it’s in the app’s interest to suggest a more permanent home for itself.

The way many apps choose to do it is by creatively combining a few of Finder’s options. Those options are available for everyone, in any folder, but perhaps not as known. The first stop is removing the toolbar and the sidebar, and any other bars. The second is switching to the icon view, and picking the right window dimensions. What’s needed next is a link to the Applications folder. The last ingredient? A custom background that’s placed underneath and creatively uses the fact the size and the position of all the icons are known:

= 2x) and (width >= 700px)" src="_media/as-a-windows-user-its-a-very-surreal-way-to-install-a-program/1.2096w.mp4" type="video/mp4"><br>= 3x) or (width >= 700px)" src="_media/as-a-windows-user-its-a-very-surreal-way-to-install-a-program/1.1600w.mp4" type="video/mp4">

After this makeover, the Finder window resembles almost a specialized app window, and you can use all of this power to… tell the user to drag the app to the permanent folder:

= 2x) and (width >= 700px)" srcset="_media/as-a-windows-user-its-a-very-surreal-way-to-install-a-program/2.2096w.avif" type="image/avif"><br>= 3x) or (width >= 700px)" srcset="_media/as-a-windows-user-its-a-very-surreal-way-to-install-a-program/2.1600w.avif" type="image/avif">

There are nuggets of something good in this flow – dragging an app icon to Applications is consistent with the other gestures you use to navigate the Mac, and teaches you that the app is just a file that you can place anywhere, or trash when done.

Overall, however, it feels quite a bit confusing, leading to spurious dangling drives, extra confusion, and attendant problems like these:

= 2x) and (width >= 700px)" srcset="_media/as-a-windows-user-its-a-very-surreal-way-to-install-a-program/3.2096w.avif" type="image/avif"><br>= 3x) or (width >= 700px)" srcset="_media/as-a-windows-user-its-a-very-surreal-way-to-install-a-program/3.1600w.avif" type="image/avif">

But I am not here to relitigate the flow itself, but to take a look at a few of those customized Finder windows. They became, in a way, a particular design playground with just enough constraints to make it interesting: an app icon, an Applications avatar, an arrow between the two, a typical size, and a bitmapped background tying it all together.

(Other historical playgrounds that got many designers excited: a calculator app, a weather app, a Twitter client… and outside of pixels, a watch face or a chair.)

Below, I went through many windows to find what I thought were the most well-made or interesting “drag to Applications” treatments.

The arrows

The first obvious place to start playing is the arrow, which can really be any shape and color… or maybe even not resemble an arrow at all:

= 2x) and (width >= 700px)" srcset="_media/as-a-windows-user-its-a-very-surreal-way-to-install-a-program/4.2096w.avif" type="image/avif"><br>= 3x) or (width >= 700px)" srcset="_media/as-a-windows-user-its-a-very-surreal-way-to-install-a-program/4.1600w.avif" type="image/avif">

= 2x) and (width >= 700px)" srcset="_media/as-a-windows-user-its-a-very-surreal-way-to-install-a-program/5.2096w.avif" type="image/avif"><br>= 3x) or (width >= 700px)" srcset="_media/as-a-windows-user-its-a-very-surreal-way-to-install-a-program/5.1600w.avif" type="image/avif">

= 2x) and (width >= 700px)" srcset="_media/as-a-windows-user-its-a-very-surreal-way-to-install-a-program/6.2096w.avif" type="image/avif"><br>= 3x) or (width >= 700px)" srcset="_media/as-a-windows-user-its-a-very-surreal-way-to-install-a-program/6.1600w.avif" type="image/avif">

= 2x) and (width >= 700px)" srcset="_media/as-a-windows-user-its-a-very-surreal-way-to-install-a-program/7.2096w.avif" type="image/avif"><br>= 3x) or (width >= 700px)" srcset="_media/as-a-windows-user-its-a-very-surreal-way-to-install-a-program/7.1600w.avif" type="image/avif">

= 2x) and (width >= 700px)" srcset="_media/as-a-windows-user-its-a-very-surreal-way-to-install-a-program/8.2096w.avif" type="image/avif"><br>= 3x) or (width >= 700px)" srcset="_media/as-a-windows-user-its-a-very-surreal-way-to-install-a-program/8.1600w.avif" type="image/avif">

= 2x) and (width >= 700px)" srcset="_media/as-a-windows-user-its-a-very-surreal-way-to-install-a-program/9.2096w.avif" type="image/avif"><br>= 3x) or (width >= 700px)" srcset="_media/as-a-windows-user-its-a-very-surreal-way-to-install-a-program/9.1600w.avif" type="image/avif">

= 2x) and (width >=...