I rebuilt a number of components of the MacOS mail interface. Along the way, I discovered many interesting design decisions.
Our goal is to design an interface which closely resembles the MacOS Sequoia mail interface, but as a web application. We also want to do it in a relatively short timeframe. To kickstart the project I created a base project with NextJS, TailwindCSS and ShadCN installed.
In this project I hope to gain insights on how the MacOS mail interface tackles the common problems that interface building presents such as spacing, key information emphasis and responsiveness.
To see how close I got to the original, check out the full demo.
An interface always starts with a number high quality components, below are the main components that I identified and recreated. These are the main building blocks of our interface.
A rich header component containing email metadata.
Getting the text styles and spacing correct is crucial for this to feel like the MacOS mail application.
A list of mails with visualized read status.
This is the key component of the application. The colors need to match, and the selection animation is very important.
A simple toolbar with mail-related icons.
This is a basic toolbar I made using lucide-react icons. A perfect version would contain MacOS native icons, but publicly available icons are sufficient for this short project.
Recreating an interface teaches you a lot about the interface itself, but also makes you aware of conventions that exist in all interfaces. In this section I list a number of key features of the interface that stood out to me.
On the subtleties of the MacOS unread dot.
The unread dot is probably one of the most characteristic features of the MacOS and iOS mail applications. This element has an interesting quirk which I stumbled upon when recreating it.
The dot changes to white very briefly, before it disappears. This is particularly strange1, or at least not what I expected. To me, having the dot disappear instantly when the block is highlighted is the logical option. Apple is still leading when it comes to interface design, and thus this must be a conscious choice. One thing is certain: once you have seen this, you cannot unsee it.
Click some emails to see a slightly exaggerated version of the effect below. If you own a Mac you can also see this happening in your own mailbox.
On (not) using hover animations.
Hover effects are often to used to make an interface feel more responsive. Notably, the MacOS Mail List has none. Below is an example of how it feels if there was a hover animation. Note that you cannot experience this if you are on a mobile device.
If an ultra-refined interface like Apple's decides to do this, there must be a reason for it. It reminds of something Emil Kowalski once said in his blog post.
Think about what the user wants to achieve and how often they will see an animation. A hover effect is nice, but if used multiple times a day, it would likely benefit the most from having no animation at all.
The hover effect is fancy.. but loses its shine after a while right?
On making things stand out just a little bit more.
During this project there were a number of times when I assumed colors were the same based on my perception, but when I inspected the true color using a color picker, the colors turned out to be different.
For instance, the unread dot is a slightly brighter blue than the blue that is shown on email selection, making the unread dot stand out just a little bit more.
In the same vein, when an email turns blue upon clicking it, the text within it gets a slightly blue hue.
I would certainly not notice these color differences if I wasn't looking for them. However, when I was building the interface, I could notice that something was off. This is a subtle change that I will definitely be incorporating in my own interfaces as well.
During this project I found myself noticing animations that I probably never would have noticed otherwise. To recreate something, you need to truly study it. As such, recreating interfaces is an excellent way to learn more about interface building, and I would highly recommend you give it a go!
Thanks to Kasper Alfarnes for feedback on early versions of this post.