Shiplog has shipped ⚓️🚢October 11, 2021
A few weeks ago my friend-and-housemate Nils came up with a tiny app to scratch an itch: checking when his remote deployments had finished building. He built the app in record time, and I was excited to design an interface for it. Below I've detailed some of my considerations during the design process.
Shiplog's defining adjectives are speed and clarity – the one thing it should allow you to do is quickly glance the status of your deploy, and take action if necessary. The deployment's commit message and status are the most specific and important pieces of information, so those are displayed most prominently. Following that is a set of context-dependent buttons, and metadata such as the branch, commit author (useful for teams), and date.
For the sidebar, we wanted to give you the option of viewing all deployments ("All Projects") or selecting a specific project to monitor – especially useful for large organisations where stuff gets committed in projects you're not working on.
The design of the interface was strongly inspired by GitHub and Vercel's minimalist visual style (Shiplog started out with Vercel support only). Additionally, the limited palette made it easy to design light and dark variants simultaneously. The app's sidebar is always displayed in its dark variant.
First of all, the app's interface icons (the branch icon, settings cog, and upwards arrow) are taken from the excellent Feather icon pack. The dock and menu bar icon are a custom design.
Shiplog's working title was Vercelfservice – rather clever, a bit convoluted, and definitely too specific since we wanted to support other services too. After several weeks of thinking Nils came up with Shiplog.
As a first try, I took inspiration from the commit dot-and-line icon and tried anthropomorsizing it by giving it eyes. Pretty cute, and it could easily be modified into a versatile menu bar icon. But the connection to the Shiplog name was too weak and the Tapbots family resemblance a little too strong.
To get closer to the Shiplog name I started thinking of nautical themes and happened upon the anchor. Merging (ha) the hole at the top of the anchor shape with the commit icon's circle turned out pretty great, and after many iterations I landed on the current icon.
A proper app is supposed to have a Dock icon too. This was my first attempt ever at a shaded icon displayed at large sizes, and it was quite a journey.
Shading the anchor shape itself took numerous tries (and I'm still not 100% happy), and went from very stark contrasting line-work to subtler shades of light and dark. As a result the perceived "material" of the achor changed from plastic to more of a light metal. The ridge in the final version helps add to that effect.
For the background of the app icon I wanted to strengthen the ocean theme by using the colours of the beach, sea, and sky you'd find on a tropical island. It's definitely a bold colour palette, but I'm pretty satisfied with it. As a final touch I added a grain texture to the "sand", which looks great at large sizes.
The large app icon shows off the details in a great way, but there's no room for those in the tiny monochrome environment of the menu bar. In order to remain legible at small sizes, I tweaked the icon in a few ways – giving it a bigger "eye" and shortening the stem considerably.
Finally, one of the most useful features of Shiplog is the fact that its menu bar icon changes if there's a build running. That way you can see if your deployment's finished without even opening the app. For this, I reduced the opacity and added an ellipsis.
Shiplog is also open source, so if there's something you would like to change or if you have a great idea to add, you'd be very welcome to contribute to the GitHub repo!