How to Design for Dark Mode: Creating Dark UI for Snapchat

The dark mode has been the talk of the town in the design world for quite some time now. With all the popular messaging apps and even the operating systems turning to dark mode, many apps have already switched to this new trend. In this article, I’ll try to explain the fundamentals of dark mode design, and later we’ll try to design a couple of screens for Snapchat to deepen our understanding of the best practices.

Obviously, we need to understand that all standard practices that are followed while designing for the normal mode like spacing, positioning, font-emphasis, etc. continue to apply to all elements. But a few aspects like colours, depth, etc. would need a relook.

Why dark mode?

The dark mode has a lot of benefits. It goes easy on the battery consumption and also reduces the strain on your eyes.

Let’s dive in to look at some fundamentals.

The dark mode is simply not a switch

Designing for dark mode is more than a simple switch to darker colours. In light mode, one could use vibrant colours, shadows, etc. to make the interfaces attractive. On the other hand, dark mode requires a different colour palette and new ways to establish depth.

Colours

The most important colour is probably the base colour for your design. It’s the colour that’s gonna comprise the body of your design. Material design guidelines recommend #121212 instead of pure black. However, according to the article posted on Microsoft design, Microsoft stuck with pure black as the base colour. At the end of the day, it’s about what feels right for your product (A contrast ratio check reveals they both pass the AAA standard which means the text would be legible for any size).

For the primary colour and the rest of the secondary palette, it is recommended that you use less saturated colours which are easy on the eye. You could use a tone of the selected colour to achieve this.

Adding grey to your primary colour will help you desaturate it to make it more legible. You could also do this by changing the RGB % equally — RGB(255,0,0) becomes RGB(216,38,38).

Tone vs Shade vs Tint

Simply put, when you keep adding white to a pure colour, you get Tints. You do the same with Black and grey, you get shades and tones respectively.

Tints, Shades, and Tones of #FF0000 (Simply Place a white/Black/grey square over the primary square and change the opacity of the top square)

We’ll look into choosing colours in detail a little later while finalising the colour palette for the Snapchat UI.

Depth

In the normal mode, we have shadows to represent depth in the interface. However, in the dark mode, shadows have little less to contribute. Hence we have the surface colour.

Representing Depth in Light Vs Dark Modes

In simple terms, if an object is moved close to the light source, it creates a larger or more dispersed shadow.

How elevation is achieved in light mode

In dark mode, the same can be represented by adding light to the surface colour. Simply add a layer of white over the base colour and play with the opacity to create elevation.

How elevation is achieved in dark mode

Designing Dark UI for Snapchat

As an example, let me demonstrate this process if I were to design the Snapchat app’s UI for the dark mode. We’ll take a couple of screens and deep dive.

I have recreated the chat screen and the messaging screen of Snapchat in the regular mode. Note: I haven’t used the same Icon style. I just used a bunch of free icons.

Base colour

First things first, I’m gonna choose the base colour for the design. Probably I’ll go with pure black(#000000) here.

Let’s have a look at the full-colour palette.

Arriving at various desaturated colours and highlights (Note: I chose these colours only from a luminance perspective as brighter colours might lead to optical vibrations. If these colours were to be used for text, the contrast ratio has to be checked before finalising)

So, here’s how the final design looks like:

All Chats Screen

Messaging screen

While I was writing this, I was wondering, there must be some reason why Snap hasn’t switched to the dark mode yet (would be news to me if there was a launch in the meantime). There were even petitions from users, asking Snap to release a dark mode. Here’s what I feel could be the reason(s):

• Content on Snapchat (Bitmojis, Cameos, GIFs, Charms, etc.) has to look good on dark backgrounds.
• Branding wise, Dark mode might require desaturating a few colours. Snapchat has always had bright and vibrant colours. To a large extent, I believe dark mode makes all the apps look very similar.

How to decide whether or not to go for dark mode?

First of all, if you’re product is a game or you’re very particular about the appearance of your app/product, then you shouldn’t go for the dark mode.

More importantly, if your app/product is more of a convenience app (Payments, Food Delivery, etc.), a dark mode wouldn’t be necessary.

Secondly, do you have user-generated content? If yes, unless you have set enough measures in place for the content optimisation for the dark mode, you shouldn’t go ahead. Here’s how a few emails look on the dark mode of various email apps.

In a later article, we will discuss in detail how to design emails keeping the dark mode in mind.

What are your thoughts on this whole dark mode trend? Have any feedback on this article? Please do respond.

If you find this article interesting, read more on NerdVolume. Follow NerdVolume on Instagram, Facebook & Twitter to get the latest updates on new articles regarding Technology, Design, Gaming, and Pop Culture.

Subscribe to our newsletter.