As an icon designer who’s worked in the field for over 25 years, I’ve pretty much seen it all, and then some. So when a chance comes to do something not only new, but totally unique, I jump at the design challenge.
Introducing Tot’s dynamic app icon!
One of the most fun features of our new text gathering and editing app, is its ability to display a dynamically updated application icon in the macOS dock. The app constantly adapts the icon using the color of the currently selected dot. This cues the user into what content is currently active. This additional context can reduce friction if you copy and paste a lot of text while switching between apps. As far as I know, no other app in the Mac universe does this, and we think it’s very cool.
Craig came up with the idea of an app icon that would update depending on where you were in the app, and it was my job to take the idea and design an icon that could be built in code and still look great.
So how was this accomplished? Basically we built the app icon like a tiny Tot sandwich. The bottom and top layers are the icon’s “bread” and in between is the meaty, adaptive colored fill layer that changes depending on what dot is currently active.
The tricky bit was coming up with top level visual treatments that would allow the colored fill layer to show through properly in both light and dark modes. This was done by using layers of white or black and adjusting their opacity as necessary in Adobe Photoshop.
All this means that the app icon is theme-ready. In theory, we could allow users to specify any color they wanted for each of the seven dots and Tot’s app icon would adapt accordingly. For those who find this feature distracting, they can of course turn it off with a right-click on Tot’s icon in the Dock, but where’s the fun in that?
After so many years of pushing pixels, it’s rare to design an app icon that gives me so much joy. I hope you love using Tot as much as we did bringing it to you. Download Tot for macOS for free and try out its dynamic dock icon for yourself from the App Store.
