Good design can really get you in the mood. Today, we’ve got a collection of dark and moody website designs that will help inspire you to create a distinct atmosphere in your design work.
While most dark collections have a bit of a “downer” vibe, not all of these designs have that feel (although color has a lot to do with how you feel when you look at them). This showcase is more than a gallery, we hope it inspires you to create a dark, moody design of your own.
A dark color palette immediately sets a certain tone for a design. What’s important to consider that darkdoesn’t always mean black. It’s often colors that are toned (addition of black) or shaded (addition of gray).
Examining the design above for Hooligan, the overall mood is a little somber and dark thanks to the blackish background, but what really does it is the accent color. The deep yellow-gold has been toned to fit the mood of the background video. The result is serious but visually intriguing.
Shadows emanate mystery. That’s one of the key reasons designers use dark and moody design patterns. They create interest and curiosity in the user.
The shadows surrounding the car in the Clear Motion website, above, almost force you to read the copy. Why does the car look this way? What is important about it? The dark aesthetic contributes with a mood that centers around a curiosity to learn more.
A black overlay is one of the most common ways to create a dark mood. But the kind of black you choose can give it more meaning. Is it darker or more transparent? How much of the image or background can the user see through the overlay?
Darker overlays with less transparency almost hide what’s happening in the background so that it’s not a central part of the design. More transparent black overlays allow the visuals to come through as part of the main design while providing contrast to primary elements such as text or calls to action.
Fhoke, above, uses this technique well. You can see the action in the background video, but the real focus is on the headline and scroll action.
Stark: Severe or bare in appearance or outline.
With many designs filled with elements to make you look, a more stark design creates a feeling of nothingness, almost forcing the user to examine it more deeply. Again, darkness and a starker background create a mystery that the user wants to solve.
Dubois, while not as stark as designs with nothing in the background, creates this sense of wonder. The pattern of dots actually contribute to the mystery – look closely and some of them include hints of color.
But what the design does is force the eye to the text, which is in an unfamiliar location on the screen for most users. Branding and the main headline are at the bottom of the first scroll rather than in the top half of the design.
Punk is Not Dead probably makes you feel something right away. The experience is sharp and highly visual, and if you click on the link to the site there’s an audio component as well. It will make you feel a certain way. What associations do you already have with “punk?” Does it put you in a tizzy of excitement or in a more angry mood?
The dark background and bright pops of color contribute, but what really sets the mood here is the typography choice. (Just imagine it with a light script – totally different.) The sharp, ragged edges of the font and almost troublesome readability factor into how you feel when viewing it.
The result is interesting, but difficult and comes with a sense of unease.
Black and White
How do you feel when a design has a complete lack of color? What if it’s mostly black and white with a few colorful elements?
While a black and white design doesn’t have the same high-drama feel as an all dark design, it can be quite interesting. There’s conflict built into the design itself with so many contrasting elements and color areas.
It can cause the eye to move in a flurry across the design and to different elements in a whirlwind, much as what happens when you look at Super Rebel. The eye goes to the top right away with the large black and white image but then pops to all the other magazine-style blocks, never really landing in one spot.
The feeling is a little bit of information overload.
The chiseled look in Jimmy Chin’s image on his portfolio “About” page gives you an impression of the man. And that’s exactly what the dark, black and white imagery is supposed to do.
The choices you make with color and lighting and photo use contribute to the overall mood of the design. Here, the result is dark and strong. But imagine if he were wearing a soft yellow shirt and lime green pants; the mood would be quite different.
The image creates a distinct emotional connection with the user that was intentional on the part of the designer.
Dark with a “Light” Mood
While we’ve looked at a lot of moody designs here, dark doesn’t have to equate to a dark mood. A dark aesthetic can actually result in a rather light and energetic feeling. It’s all about how you put the parts together.
Atom uses a darker background, but with a cartoon-style figure to set a tone that’s visually interesting and dark, but emotionally light. The yin and yang juxtaposition creates that same sense of visual wonder as darker designs but without intimidating the user on a website that’s asking for something of visitors (to download a digital product).
The lighter overall emotional connection between the design and user feels a little more trustworthy and less dramatic, which might actually make you feel more comfortable with the download.
Do you like a design with a moody appeal?
This technique can work for certain types of projects. But might be more disastrous for others – note there are no e-commerce sites in this collection. Darker, moodier projects are mysterious and interesting, but they don’t always communicate credibility and trust to users.
It can be a delicate balance and that’s why you often see moody, dark schemes more often with a portfolio or informational website designs.