![]() ![]() ![]() Having two versions of the “same” colour could create confusion and, on top of that, it would have made implementation more complicated. This also meant that it would be best to replace the colour in both states, light and dark. Tab management buttons were low-contrast and became hard to distinguish from each other.Īfter testing out a few ideas to solve problem number one, I came to the conclusion that adjusting the Blueberry colour was the most promising solution. colour name captions) became hard to read.ģ. The colour Blueberry, a dark purple, was too low-contrast against dark backgrounds.Ģ. On light backgrounds, account colours are well-visible and high-contrast but, on a dark background, a few problems appeared.ġ. Those colours are important when using Mailplane for the first time, opening a new tab or adjusting account settings in the preferences. One of those was the selection of colours we offer to colour-code different accounts. While I could rely on Mojave’s dark mode as a template for non-native components, there were a few Mailplane-specific cases were a customised solution was necessary. Iterations on toolbar icons for dark mode Solutions for Mailplane-specific UI elements And if things still felt a bit off, it helped to tweak a little here and there, like adding or removing lines or details. With this new appearance, the icons became recognisable again. To give icons in dark mode a sense of shape and volume back, I changed their look from an outline styling to a solid styling. This has to do with the way we are used to reading images: on a light background, it is natural to read the empty space of an icon as it’s volume or shape if we place icons on a dark background, though, this sense of volume and shape can get lost. ![]() However, when switching to dark mode, some of them begin to look ghostly, or hollow, and can become hard to read. In light mode, we use outline-styled icons which work very well in that mode. One of them affects how icons appear when switching from light to dark. However, that’s not entirely true – there are a few special cases. At first glance, it appears that dark mode “just” converts all light backgrounds and UI components to dark greys, while dark elements like text or icons become light-coloured. While working on the UI, I discovered that Mojave’s dark mode has quite a few peculiarities to it. New night sky scenery in dark mode Dark mode and its peculiarities It gave me the motivation to really delve into the project. In the end, the idea didn’t make it into Mailplane in favour of efficiency.įor dark mode, on the other hand, a night sky scenery felt fitting, and I really loved the results after trying it out. ![]() I imagined we could change the background between a daytime and a nighttime scene in real time. Back then, I had an idea similar to Apple’s, which features a dynamic screen background in Mojave. The idea of a night sky was not new – it had already come to me during the initial redesign process. This might not be the most urgent part of the app to start with but it was the part I was most eager to try out. One of the first designs I created was the night sky scenery within the onboarding and tab management screens. With this knowledge, I was ready to start designing. By doing this, I could get a proper overview of which parts I simply had to monitor as they darken and which parts I needed to adjust manually from light to dark. This was important, as native parts darken their appearance automatically in Mojave’s dark mode, while non-native parts don’t. The first step, before designing anything, was to become familiar with Mojave’s dark mode and distinguish between native and non-native parts of Mailplane. Now, I am happy to provide you with some insight into the design process and its challenges. With the release of macOS Mojave, I had the pleasure to expand the UI with a dark theme. When I joined Mailplane as a designer nearly a year ago, it was my job to redesign the complete user interface for version 4. By Sofie There's more to Mailplane's Dark Mode than you think ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |