Author: Simona

This month Apple released dark mode on iOS 13 (see here) and with it comes a whole new trend for design. Well I say new, but before the iOS update, Twitter had dark mode on desktop since at least 2017 (see here) with YouTube following suit in 2018 (see here). While it’s still a newer trend compared to something like flat design (see here)—which as I recall became popular in the early to mid-2010s—it’s still slowly been growing in popularity.

So what is dark mode and what’s so great about it?

Dark; not black

Dark mode themes are more than just inverting your light colours and calling it a day. There are subtleties in a dark theme just as there are in a light theme—using colour to make elements like URLs stand out; not using pure black but instead an almost-black/dark colour; knowing which shade of grey to pick with a high enough contrast. According to one article (see here) this is something missing from some apps that have released a dark mode where they confuse it for a greyscale theme with no colour whatsoever (as in their Instagram example) or they don’t take colour contrast into account for active & hovered states. While this technically still a dark theme, it isn’t necessarily good design. Knowing how to make a dark theme work well is imperative for your users’ experience.

Saving your eyes & screen

Sometimes I enjoy a little night-time reading before bed but my screen feels too bright even on the lowest setting. Dark mode’s especially helpful in combatting this by reducing eye strain in a low-light area, like a dark bedroom. As a bonus, it’s also great for your screens to prevent screen burn. Screen burns (see here) are a permanent discolouration in your screen that cause a ghosting effect of what was once on your screen (#spooky). With a dark theme helping keep the overall brightness of your screen low, screen burns are less likely to occur.

Ok, let’s go dark!

Before you go turning down the proverbial lights on your website/app, it’s important to consider if this will be the right move for your company or product. A darker colour palette has certain connotations that go with it. If your company has branded itself as inviting and warm, then a dark theme may not be for you. If your product is for burly moustachioed men who own Harley Davidsons, this may be the right call to make. Colour plays an important factor in this decision, so consider your entire colour palette and your primary brand colours before you go dark.

The web is everywhere. I’d say the chances are that right now you’re reading this from an electronic device of some kind (unless some ultra-hipster who only reads web pages that have been printed, in which case… why?!). With so many browsers and operating systems it’s never been more important to make our digital experiences as simple as easy as possible. We do this in several ways, though for now I’ll talk about UI/UX design and accessibility.

UI design

The user interface (UI) is your look and feel. It’s the colours, layout and imagery you choose that give your website its appearance. Without it your site is about as visually interesting as a plain Microsoft Word document. In UI design, designers implement (sometimes subconsciously) something called Gestalt Principles (see here). These fundamentals essentially lay the groundwork for an effective UI, and yeah, using something called “Gestalt principles” makes it sound boring, but if anything it’s just putting a fancy name to all these practices.

UX design

Now UI design is great and all (not to mention fun!), but it’s worth squat without good user experience (UX). If users are confused by an interface or what actions they can make, then chances are they’ll leave and never return. Over time we’ve become used to certain expectations for how web elements will function. In fact, Bagaar created a great example of what horrendous UX looks like (see here). This is where UX design comes into play. It’s about creating a great journey for your users so they can use your site without getting lost. Little things like indicating a disabled button by lowering its opacity instead of greying it out (see here) that can make all the difference. UX is something I still have so much to learn about, but I hope you’ll stick with me as I do.

Accessibility

Finally, we have accessibility. Accessibility is all about making your website as available as possible to users with visual or hearing impairments. This means including alt text on all your images (screen readers will describe the image to users), subtitles on videos, and high contrast colours (bright yellow text on a white background is a no-no). While these may not be things able-bodied people may have to deal with, it’s simply not fair to exclude a user from your page simply because they’re deaf or colour blind. The web should be inclusive to all, and good accessibility is one step to getting there.