Designing the Dark

Main Daniel Korpai

DESIGNING THE DARK

by Evan-Zane Green

Dark mode is really popular in design. It shows up everywhere and it is important for designers to know how to create interfaces that have light and dark modes. Why create a dark version of your product anyways? Dark mode can be used for any of the following reasons: reducing eye strain, reducing how much battery power the device uses, and facilitating the use of your device in dark areas (Unknown). Below are some things that you should take into consideration when designing darkness.

Colour

Color plays an important role in making sure that your dark mode design looks good. Dark mode is more than just flipping the colour scheme. As designers, you need to give it more thought. As such, consider these tips:

Stay away from all black. All black on top of white gives a drastic amount of contrast – too drastic. It can be “painful to look at” (Babich) and when you consider how much time people spend interacting with technology, it can impact the experience of your users and influence how they feel about your product. You can fix this by doing things like making your backgrounds a dark grey and going from there. Dark modes are built on a system of greys overlaid with white at different opacities in order to express hierarchy.

Maintain the same levels of emphasis that were in light mode. All design is layered. Some regions are more important than others. Viewers are guided to these areas in many different ways, some of which are changes in color, color saturation and shadows. These are important because the same level of depth that is portrayed in light mode should be visible in dark mode. Shadows are important to bring up as well, because people sometimes think that in dark mode the shadows should be white (or another light colour). No, keep them dark. This is one of the times when you can break the ‘avoid solid black’ rule.

Consider saturation. In general, the saturation in colors should be dropped to make it easier on the eyes since colors with high saturation levels can cause eye strain. When your product uses desaturated colours you help to make it more accessible for everyone.

Revise your colour schemes. It is important that you do not feel like you are contractually obligated to stick to the same color scheme that you used in light mode. It is important to realize that “[colors] are perceived differently depending on the background [colors]” (Priambodo). As the designer, you can and should make these decisions actively, based on what is necessary for the project.

Colour

Image by Material Design

Typography

Typography is important for every design. It is the main vehicle for conveying the information you want to share. As such, it requires the same amount of attention to detail that it was given in light mode. Designers need to consider how to show a sense of hierarchy because if everything is emphasized, then nothing is. A valuable lesson I learned from a great teacher in design school.

Managing opacity. Quick note, even though text is usually white, it usually isn’t used at 100% opacity. The level of opacity will let the viewer know how important that information is. For example, increasing the opacity so that headers are brighter than the paragraph text, or to show disabled buttons as opposed to active areas of a page.

Use font weights. Changing the font weight of a section of text isn’t new when talking about adding emphasis to typography. However, I wanted to talk about how it can differ in dark mode. Light text on a dark background “can appear more bold” (Babich) than text at the same weight that is dark on a light background. Keeping that in mind, you may consider using smaller font weights when designing for dark mode.

Typography

Image by Material Design

Iconography

Iconography is another linchpin in making a good dark mode setting. When the light mode was designed, you were looking to make the viewers feel a particular way. When designing the dark mode, make sure that you make the user feel the same “spectrum of emotions” (Babich). To do that, you need to think about the following:

The Dark Mode icon. Make sure that it is obvious. Either put it in a place that is easy to see and big enough so that it won’t be overlooked or put it in the menu where it would be reasonable to find it, but make it prominent there too.

The look of the icons. The dark mode icons do not have to look exactly like the light mode icons. We have discussed this before but “a dark theme just can’t communicate the same as the light theme” (Babich) and so it will require a different treatment.

The brand guidelines. It is important that the brand you are designing for can still be identified when you are designing for dark mode, so keep up to date and make sure that you push the boundaries of the brand guidelines without breaking them. Another thing to do is make sure that the logos in your project work in the dark mode environment. By this I mean don’t do things like have logo elements that clash with the background or that are too low contrast. Make sure that the design is harmonious.

Iconography Sten Ritterfeld

Image by Sten Ritterfeld

This was my take on how you can make your own projects with a dark mode feature that is beautiful. However, I’m only scratching the surface. You can learn all the details at Material Design

Sources

  • Babich, Nick. 8 Tips for Dark Theme Design. 30 May 2020, uxplanet.org/8-tips-for-dark-theme-design-8dfc2f8f7ab6.
  • Priambodo, Briandito. “Turn the Lights Off  -  Designing for Dark Mode 🌌🌒.” UX Collective, Medium, 6 Nov. 2019, uxdesign.cc/turn-the-lights-off-designing-the-dark-mode-of-wego-ios-app-6c4967e59dd6.
  • Unknown. Dark Theme. material.io/design/color/dark-theme.html.

Credits

  • Header image by Daniel Korpai
  • Images by Material Design and Sten Ritterfeld
Main Daniel Korpai

DESIGNING THE DARK

by Evan-Zane Green

Dark mode is really popular in design. It shows up everywhere and it is important for designers to know how to create interfaces that have light and dark modes. Why create a dark version of your product anyways? Dark mode can be used for any of the following reasons: reducing eye strain, reducing how much battery power the device uses, and facilitating the use of your device in dark areas (Unknown). Below are some things that you should take into consideration when designing darkness.

Colour

Color plays an important role in making sure that your dark mode design looks good. Dark mode is more than just flipping the colour scheme. As designers, you need to give it more thought. As such, consider these tips:

Stay away from all black. All black on top of white gives a drastic amount of contrast – too drastic. It can be “painful to look at” (Babich) and when you consider how much time people spend interacting with technology, it can impact the experience of your users and influence how they feel about your product. You can fix this by doing things like making your backgrounds a dark grey and going from there. Dark modes are built on a system of greys overlaid with white at different opacities in order to express hierarchy.

Maintain the same levels of emphasis that were in light mode. All design is layered. Some regions are more important than others. Viewers are guided to these areas in many different ways, some of which are changes in color, color saturation and shadows. These are important because the same level of depth that is portrayed in light mode should be visible in dark mode. Shadows are important to bring up as well, because people sometimes think that in dark mode the shadows should be white (or another light colour). No, keep them dark. This is one of the times when you can break the ‘avoid solid black’ rule.

Consider saturation. In general, the saturation in colors should be dropped to make it easier on the eyes since colors with high saturation levels can cause eye strain. When your product uses desaturated colours you help to make it more accessible for everyone.

Revise your colour schemes. It is important that you do not feel like you are contractually obligated to stick to the same color scheme that you used in light mode. It is important to realize that “[colors] are perceived differently depending on the background [colors]” (Priambodo). As the designer, you can and should make these decisions actively, based on what is necessary for the project.

Colour

Image by Material Design

Typography

Typography is important for every design. It is the main vehicle for conveying the information you want to share. As such, it requires the same amount of attention to detail that it was given in light mode. Designers need to consider how to show a sense of hierarchy because if everything is emphasized, then nothing is. A valuable lesson I learned from a great teacher in design school.

Managing opacity. Quick note, even though text is usually white, it usually isn’t used at 100% opacity. The level of opacity will let the viewer know how important that information is. For example, increasing the opacity so that headers are brighter than the paragraph text, or to show disabled buttons as opposed to active areas of a page.

Use font weights. Changing the font weight of a section of text isn’t new when talking about adding emphasis to typography. However, I wanted to talk about how it can differ in dark mode. Light text on a dark background “can appear more bold” (Babich) than text at the same weight that is dark on a light background. Keeping that in mind, you may consider using smaller font weights when designing for dark mode.

Typography

Image by Material Design

Iconography

Iconography is another linchpin in making a good dark mode setting. When the light mode was designed, you were looking to make the viewers feel a particular way. When designing the dark mode, make sure that you make the user feel the same “spectrum of emotions” (Babich). To do that, you need to think about the following:

The Dark Mode icon. Make sure that it is obvious. Either put it in a place that is easy to see and big enough so that it won’t be overlooked or put it in the menu where it would be reasonable to find it, but make it prominent there too.

The look of the icons. The dark mode icons do not have to look exactly like the light mode icons. We have discussed this before but “a dark theme just can’t communicate the same as the light theme” (Babich) and so it will require a different treatment.

The brand guidelines. It is important that the brand you are designing for can still be identified when you are designing for dark mode, so keep up to date and make sure that you push the boundaries of the brand guidelines without breaking them. Another thing to do is make sure that the logos in your project work in the dark mode environment. By this I mean don’t do things like have logo elements that clash with the background or that are too low contrast. Make sure that the design is harmonious.

Iconography Sten Ritterfeld

Image by Sten Ritterfeld

This was my take on how you can make your own projects with a dark mode feature that is beautiful. However, I’m only scratching the surface. You can learn all the details at Material Design

Sources

  • Babich, Nick. 8 Tips for Dark Theme Design. 30 May 2020, uxplanet.org/8-tips-for-dark-theme-design-8dfc2f8f7ab6.
  • Priambodo, Briandito. “Turn the Lights Off  -  Designing for Dark Mode 🌌🌒.” UX Collective, Medium, 6 Nov. 2019, uxdesign.cc/turn-the-lights-off-designing-the-dark-mode-of-wego-ios-app-6c4967e59dd6.
  • Unknown. Dark Theme. material.io/design/color/dark-theme.html.

Credits

  • Header image by Daniel Korpai
  • Images by Material Design and Sten Ritterfeld
Main Daniel Korpai

DESIGNING THE DARK

by Evan-Zane Green

Dark mode is really popular in design. It shows up everywhere and it is important for designers to know how to create interfaces that have light and dark modes. Why create a dark version of your product anyways? Dark mode can be used for any of the following reasons: reducing eye strain, reducing how much battery power the device uses, and facilitating the use of your device in dark areas (Unknown). Below are some things that you should take into consideration when designing darkness.

Colour

Color plays an important role in making sure that your dark mode design looks good. Dark mode is more than just flipping the colour scheme. As designers, you need to give it more thought. As such, consider these tips:

Stay away from all black. All black on top of white gives a drastic amount of contrast – too drastic. It can be “painful to look at” (Babich) and when you consider how much time people spend interacting with technology, it can impact the experience of your users and influence how they feel about your product. You can fix this by doing things like making your backgrounds a dark grey and going from there. Dark modes are built on a system of greys overlaid with white at different opacities in order to express hierarchy.

Maintain the same levels of emphasis that were in light mode. All design is layered. Some regions are more important than others. Viewers are guided to these areas in many different ways, some of which are changes in color, color saturation and shadows. These are important because the same level of depth that is portrayed in light mode should be visible in dark mode. Shadows are important to bring up as well, because people sometimes think that in dark mode the shadows should be white (or another light colour). No, keep them dark. This is one of the times when you can break the ‘avoid solid black’ rule.

Consider saturation. In general, the saturation in colors should be dropped to make it easier on the eyes since colors with high saturation levels can cause eye strain. When your product uses desaturated colours you help to make it more accessible for everyone.

Revise your colour schemes. It is important that you do not feel like you are contractually obligated to stick to the same color scheme that you used in light mode. It is important to realize that “[colors] are perceived differently depending on the background [colors]” (Priambodo). As the designer, you can and should make these decisions actively, based on what is necessary for the project.

Colour

Image by Material Design

Typography

Typography is important for every design. It is the main vehicle for conveying the information you want to share. As such, it requires the same amount of attention to detail that it was given in light mode. Designers need to consider how to show a sense of hierarchy because if everything is emphasized, then nothing is. A valuable lesson I learned from a great teacher in design school.

Managing opacity. Quick note, even though text is usually white, it usually isn’t used at 100% opacity. The level of opacity will let the viewer know how important that information is. For example, increasing the opacity so that headers are brighter than the paragraph text, or to show disabled buttons as opposed to active areas of a page.

Use font weights. Changing the font weight of a section of text isn’t new when talking about adding emphasis to typography. However, I wanted to talk about how it can differ in dark mode. Light text on a dark background “can appear more bold” (Babich) than text at the same weight that is dark on a light background. Keeping that in mind, you may consider using smaller font weights when designing for dark mode.

Typography

Image by Material Design

Iconography

Iconography is another linchpin in making a good dark mode setting. When the light mode was designed, you were looking to make the viewers feel a particular way. When designing the dark mode, make sure that you make the user feel the same “spectrum of emotions” (Babich). To do that, you need to think about the following:

The Dark Mode icon. Make sure that it is obvious. Either put it in a place that is easy to see and big enough so that it won’t be overlooked or put it in the menu where it would be reasonable to find it, but make it prominent there too.

The look of the icons. The dark mode icons do not have to look exactly like the light mode icons. We have discussed this before but “a dark theme just can’t communicate the same as the light theme” (Babich) and so it will require a different treatment.

The brand guidelines. It is important that the brand you are designing for can still be identified when you are designing for dark mode, so keep up to date and make sure that you push the boundaries of the brand guidelines without breaking them. Another thing to do is make sure that the logos in your project work in the dark mode environment. By this I mean don’t do things like have logo elements that clash with the background or that are too low contrast. Make sure that the design is harmonious.

Iconography Sten Ritterfeld

Image by Sten Ritterfeld

This was my take on how you can make your own projects with a dark mode feature that is beautiful. However, I’m only scratching the surface. You can learn all the details at Material Design

Sources

  • Babich, Nick. 8 Tips for Dark Theme Design. 30 May 2020, uxplanet.org/8-tips-for-dark-theme-design-8dfc2f8f7ab6.
  • Priambodo, Briandito. “Turn the Lights Off  -  Designing for Dark Mode 🌌🌒.” UX Collective, Medium, 6 Nov. 2019, uxdesign.cc/turn-the-lights-off-designing-the-dark-mode-of-wego-ios-app-6c4967e59dd6.
  • Unknown. Dark Theme. material.io/design/color/dark-theme.html.

Credits

  • Header image by Daniel Korpai
  • Images by Material Design and Sten Ritterfeld

DESIGNING THE DARK

by Evan-Zane Green

Dark mode is really popular in design. It shows up everywhere and it is important for designers to know how to create interfaces that have light and dark modes. Why create a dark version of your product anyways? Dark mode can be used for any of the following reasons: reducing eye strain, reducing how much battery power the device uses, and facilitating the use of your device in dark areas (Unknown). Below are some things that you should take into consideration when designing darkness.

Colour

Color plays an important role in making sure that your dark mode design looks good. Dark mode is more than just flipping the colour scheme. As designers, you need to give it more thought. As such, consider these tips:

Stay away from all black. All black on top of white gives a drastic amount of contrast – too drastic. It can be “painful to look at” (Babich) and when you consider how much time people spend interacting with technology, it can impact the experience of your users and influence how they feel about your product. You can fix this by doing things like making your backgrounds a dark grey and going from there. Dark modes are built on a system of greys overlaid with white at different opacities in order to express hierarchy.

Maintain the same levels of emphasis that were in light mode. All design is layered. Some regions are more important than others. Viewers are guided to these areas in many different ways, some of which are changes in color, color saturation and shadows. These are important because the same level of depth that is portrayed in light mode should be visible in dark mode. Shadows are important to bring up as well, because people sometimes think that in dark mode the shadows should be white (or another light colour). No, keep them dark. This is one of the times when you can break the ‘avoid solid black’ rule.

Consider saturation. In general, the saturation in colors should be dropped to make it easier on the eyes since colors with high saturation levels can cause eye strain. When your product uses desaturated colours you help to make it more accessible for everyone.

Revise your colour schemes. It is important that you do not feel like you are contractually obligated to stick to the same color scheme that you used in light mode. It is important to realize that “[colors] are perceived differently depending on the background [colors]” (Priambodo). As the designer, you can and should make these decisions actively, based on what is necessary for the project.

Image by Material Design

Typography

Typography is important for every design. It is the main vehicle for conveying the information you want to share. As such, it requires the same amount of attention to detail that it was given in light mode. Designers need to consider how to show a sense of hierarchy because if everything is emphasized, then nothing is. A valuable lesson I learned from a great teacher in design school.

Managing opacity. Quick note, even though text is usually white, it usually isn’t used at 100% opacity. The level of opacity will let the viewer know how important that information is. For example, increasing the opacity so that headers are brighter than the paragraph text, or to show disabled buttons as opposed to active areas of a page.

Use font weights. Changing the font weight of a section of text isn’t new when talking about adding emphasis to typography. However, I wanted to talk about how it can differ in dark mode. Light text on a dark background “can appear more bold” (Babich) than text at the same weight that is dark on a light background. Keeping that in mind, you may consider using smaller font weights when designing for dark mode.

Image by Material Design

Iconography

Iconography is another linchpin in making a good dark mode setting. When the light mode was designed, you were looking to make the viewers feel a particular way. When designing the dark mode, make sure that you make the user feel the same “spectrum of emotions” (Babich). To do that, you need to think about the following:

The Dark Mode icon. Make sure that it is obvious. Either put it in a place that is easy to see and big enough so that it won’t be overlooked or put it in the menu where it would be reasonable to find it, but make it prominent there too.

The look of the icons. The dark mode icons do not have to look exactly like the light mode icons. We have discussed this before but “a dark theme just can’t communicate the same as the light theme” (Babich) and so it will require a different treatment.

The brand guidelines. It is important that the brand you are designing for can still be identified when you are designing for dark mode, so keep up to date and make sure that you push the boundaries of the brand guidelines without breaking them. Another thing to do is make sure that the logos in your project work in the dark mode environment. By this I mean don’t do things like have logo elements that clash with the background or that are too low contrast. Make sure that the design is harmonious.

Image by Sten Ritterfeld

This was my take on how you can make your own projects with a dark mode feature that is beautiful. However, I’m only scratching the surface. You can learn all the details at Material Design

Sources

  • Babich, Nick. 8 Tips for Dark Theme Design. 30 May 2020, uxplanet.org/8-tips-for-dark-theme-design-8dfc2f8f7ab6.
  • Priambodo, Briandito. “Turn the Lights Off  -  Designing for Dark Mode 🌌🌒.” UX Collective, Medium, 6 Nov. 2019, uxdesign.cc/turn-the-lights-off-designing-the-dark-mode-of-wego-ios-app-6c4967e59dd6.
  • Unknown. Dark Theme. material.io/design/color/dark-theme.html.

Credits

  • Header image by Daniel Korpai
  • Images by Material Design and Sten Ritterfeld