April 8, 2023

Designing the Icons for iVault

My latest project, iVault, is an app to help collectors of retro tech manage their collection.

I have long maintained a small collection of retro / vintage Apple products that I acquired over the years. In 2021 however, I began to take it more seriously, working to basically collect anything I thought I could get for a good deal. This led to my then-current tracking system, a list of devices in Apple’s Notes app, becoming inadequate. I began to work on my own solution: iVault.

iVault’s primary screen is a list of product lines, such as Mac, iPhone, iPod, etc.

For this screen, I knew it would need some good icons. I first used some rough photoshops of devices taken from Apple.com:

But obviously, this wasn’t a permanent solution. The fact that it would easily cause an App Store rejection aside, it was just kinda ugly and felt out of place. So, I began the process of manually designing vector icons for the app. For this process, I used the amazing Pixelmator Pro. It is a wonderful tool for both photo editing and vector design work, and I highly recommend it! Oh yeah, every icon here is 100% vector and can be scaled infinitely!

iPhone

The front-facing view of iPhone hasn’t changed a whole lot over time. The main changes have been new screen sizes and changes to the notch. So, I figured having a representation of every major change would work best, but I intentionally made the icons more vague so that they could represent multiple generations of iPhone. For example, the rightmost icon is intended to represent the original iPhone through the iPhone 4S.

iPad

Similar to iPhone, the front of iPad hasn’t changed much over the generations. I tried to pick a good representation of various generations and sizes. I went with a first-generation iPad Pro (12.9-inch), a ~11-inch iPad / Pro / Air, a 9.7-inch iPad 1-4, an iPad mini with Home Button, and an iPad mini without Home Button.

iPod

Besides Mac, I believe iPod is the most “diverse” product line Apple has ever had. Almost every generation of every sub-line looks significantly different. So, I tried to pick the most recognizable from each line of iPod: the first generation iPod touch, a 5th / 6th generation iPod classic, iPod mini, and the 4th generation iPod nano. I had originally included the iPod shuffle, but the most recognizable one (4th generation) was simply too small for this icon.

Apple Watch

The Apple Watch is the first one where great detail was necessary. While the first Apple Watch through Series 8 were pretty easy, the Apple Watch Ultra was a special challenge that took me many hours to get right. For this icon, I was able to represent every time the Apple Watch design changed: the original, Series 4, Series 7, and Ultra.

Mac

Mac is, by far, my favorite icon. I put many many hours into getting the more intricate details of these icons correct. Now of course, Mac is by far Apple’s oldest and longest-running product line, meaning choosing devices to represent everything would be impossible. Here’s what I went with:

Macintosh 128K

The original Macintosh is an obvious choice: the Mac that started it all! The Macintosh has lots of areas with different depth. So for this icon, I actually made a different version for light and dark mode. By using different opacities, I am able to achieve a sort of depth effect that makes it look more realistic. I also added the classic “hello” text, though I used the modern version Apple created for the M1 iMac (disclaimer: I did not design the hello icon, I found it online).

iMac G4

The iMac G4 is widely regarded as one of Apple’s best designs ever. You could certainly argue that the iMac G3 is more iconic and therefore a better choice, but honestly, I just love the iMac G4. It also fit better space-wise. There were two details of the iMac G4 design that were particularly difficult: the top circular vents and the bottom line vents. For the top vents, I actually took a top-down picture of my own iMac G4, recreated the dots, and then did a perspective transform onto the icon. For the bottom vents, I tried at least five different variations and designs. It was hard to balance making them simple enough to be visible when the icon is small while keeping them realistic and “3D”.

MacBook Pro (1st Generation, 2006)

It might not be immediately obvious, but the MacBook Pro icon actually had (by far) the most work and detail put into it. Because this was before the unibody design, it had many small visual elements that I took the time to incorporate. When the basic shape was done, I knew it just wouldn’t feel right without the keyboard. So… I recreated the entire top of the MacBook Pro (speakers, keyboard, and trackpad) too. In the end though, it paid off, and helps give the icon an authentic and realistic look.

Apple Vision

Though there is only a single device in the Apple Vision line, the Apple Vision Pro, that doesn’t mean that people won’t buy it or that there won’t be more. In fact, I myself intend to buy it, so I wanted to make sure that iVault supported Apple Vision. This icon is based on a frame from the event, and I think it came out quite nicely, expect for maybe the inside of the headband. I wasn’t really sure how to do that. Of course, this icon will change as soon as Apple introduces a new product in the Apple Vision line.

Apple TV

Apple TV was an interesting one. There are technically four designs of Apple TV: 1st generation, 2nd / 3rd generation, 4th generation - 4K 2nd generation, and 4K 3rd generation. But, most people recognize Apple TV by the part they actually interact with: it’s remote. So, I created every generation of remote used by the Apple TV, and finished the icon with a representation of the first Apple TV 4K (since that design lasted the longest, and has “tv” on it, unlike the latest generation).

Newton

During the development process, I realized that the Newton would be better suited as its own product line, rather than being lumped in with Accessories and More. For this icon, I focused on the three MessagePad designs (original/100, 110-130, and 2000-2100). I wanted to include eMate, but it was impossible to get a good reference image, and it didn’t fit well with the rest of the icon anyways. On iPad and Mac, iVault uses SF Symbols for its sidebar icons. However, there is no SF Symbol for Newton, so I created one in the SF Symbol style. It is a simplified original Newton with stylus.

AirPods and Beats

I really quite like the icon. When I first dropped an image of the Beats Studio3 into Pixelmator Pro, I was worried I might not be able to accurately recreate it. The entire thing is made of angled curves, meaning that every path had to be hand-drawn and adjusted. However, in the end, I am really happy with how it came out. I think the AirPods part also looks great (especially the subtle shading, which was done through a gradient that changes opacity), though I am disappointed I didn’t have space to represent the AirPods (3rd Generation).

HomePod

The HomePod is an unfortunately kinda boring icon. The HomePod line has only had three products, and two of them look almost identical. I may in the future go back and add a proper representation of the first generation HomePod, but for now it will just be the current HomePods. (It’s very annoying to get everything working with the grid…)

Accessories and More

Accessories and More was a tough icon. “Accessories and More” covers so many products… how could I choose? I chose an iPod Sock because it’s one of Apple’s most “fun” accessories and, surprisingly, one that was available for a long time. I picked the Magic Mouse because it’s a good representation of the generic idea of an “accessory”. Finally, I picked AirTag, since it’s one of Apple’s latest and most “flagship” accessory offerings, and is quite recognizable.

Other Brands

Although this is certainly an Apple-focused app, I wanted users to have a way to add any non-Apple items they wanted (I certainly have many myself, such as my Pixel 7 and my Surface RT). So for this icon, I tried to pick a recognizable offering from some of the main brands. I picked the Wii because, well, everyone loves the Wii! I picked the Galaxy S21 as it’s more visually distinct that the S23 and is a good representation of Android phones. I also wanted to represent some older smartphones, so I picked the Nokia Lumia 1020. Unlike other devices, I actually gave this one’s screen an interface, since Windows Mobile was very much so a part of the device’s visual style and is very recognizable. I picked the iconic Nokia 3310 to represent older non-smart phones. Finally, I picked the Pixel Watch to give Google an entry in the icon.