如何以及何时创建一个具有黑色背景设计的网站

黑色一直是设计师谈论最多的颜色——如果不是最流行的设计颜色。它是复杂的、充满活力的、神秘的、优雅的、强大的、时尚的，与默认的白色完全相反。

现在，我想要关注的是，它与白色正好相反(我将在文本中进一步讨论这个问题)，因为这是你想要的东西，在设计中需要的东西——一些不同的、有趣的东西，比如黑色。

为什么你需要它?什么时候是你为你的网站创造黑色背景的合适时间?我将在这篇文章中讨论所有这些，以及更多的警告:它将变得非常黑暗，然后比这更黑暗，最后那个黑暗的阴影甚至比#555更黑暗(我的开发者们知道我在说什么)。

那么，闲话少说，让我们进一步探索这个黑色的问题吧!

关于黑色背景设计

看到我有一些设计遗产和很多设计经验，我想先和你分享我的印象和想法。

设计师的最终目标是制作网站内容，吸引人们的注意，并从类似的网站中脱颖而出。然而，一个更大的目标(如果不是最大的目标)是创建一个服务于其目的的网站。你需要知道的是:设计师必须强调重要的元素。这是我们在做的每一件事上的目标，我们的工作就是在这个强调(为了突出网站上最重要的细节)中创建一个层级。

黑色是完美的，如果你想强调其他颜色的背景，尤其是白色的。在我们的体验中，白色代表了一个空白的开始(它代表日光、空白纸、没有内容的页面等)，而黑色被认为与其他颜色一样，如内容。这就是为什么白色是网站背景的首选。

另一方面，黑色是所有颜色中“最重”的颜色，正因为如此，我们很难突出其他元素。然而，你能做的是用这种黑色来强调其他内容。您可能已经注意到，具有黑色背景的元素总是显得更小。这种印象是由黑色的心理效应等人ー我们倾向于认为黑人没有颜色有潜在的东西。

黑暗背景下最大的用户体验问题仍然是可读性，当我们使用暗色背景时，这一问题会明显减少——不仅仅是因为我们的眼睛很难注意到颜色的差异，而且还因为屏幕上的光线使得白色的光芒。

实际上听起来是这样的:

如果内容太多，不要使用黑色。

在黑色/黑色背景上要格外小心。

您可以自由地使用黑色背景的图像和图形元素。

使用黑色背景的小元素来指出另一种颜色是可以的。

从我的经验来看，人们通常会发现那些有着黑暗背景的网站是不值得信任的，因为它们是非常规的。然而，艺术的人，哪怕是一点点，都觉得这个安排很有趣，很吸引人。所以，最后，一切都是关于观众的。

黑色背景的问题是什么

主要原因是人们发现它比其他颜色更不吸引人。

人们认为它是抑郁的，悲观的，严肃的，悲伤的，消极的颜色，看到我们在无意识的情况下对这些事情做出反应，我们不能做很多改变。

这一事实一再被证明，当人们到达一个网站时，他们会期待看到白色，他们会感到熟悉和安全。这就是为什么用户体验专家不太热衷于把标准的白色换成非传统的黑色。

正如您所看到的，黑色背景色的问题是真实的。

那么，在设计中是否有黑色背景的地方?

在设计的世界里，对于你能做什么和不能做什么没有严格的规定，同样的颜色也适用于黑色。然而，多年来，我注意到黑人的背景最好的工作如下(记住，这不是正式的名单，这是我的经验):

投资组合的网站,

设计工作室的网站,

独家产品演示,

非传统的内容。

在设计中使用黑色的技巧

首先，即使在使用黑色背景时，也要创建大量的“空白区域”，因为黑色的表面看起来更小。白色背景也起到了“休息”的作用，在黑暗的背景下，这是一种缺失的东西。更彻底地检查可用性也很重要。根据我的经验，你永远不应该使用轻字体的重量，它应该总是比在白色背景上的字体大2或3倍。

正如前面提到的，黑色背景的最大问题是可读性，每个设计师都应该知道如何处理它(提示:增加字体大小，kerning，引导)。

当你选择黑暗背景作为你的基础，你需要记住你使用传统的，学习的设计元素的机会降低。除了设计师们应该对通常的元素有更大的考虑之外，他们还应该努力让内容更有趣，效果更有创意。

你需要注意的是，你要使用哪种颜色。有一些文字说明你应该如何在设计中使用有色的黑色，这个颜色应该来自你使用的主色调。我添加的例子使用了着色和真正的黑色(#000)，所以我认为这个想法是可选的。

把基本颜色染成浅色的想法来自于自然，在那里很难看到阴影#000000和#ffffff(不仅仅是因为格式)。

另一个问题在于，夜间模式正是使用了这种“有问题”的安排(黑色背景布局)。在黑暗环境中，每一个浏览器扩展和优化工具都提供了使用黑色背景和白色文本的选项。此外，如果在应用程序中有更改周围颜色的选项，则总是有黑色背景选项。

你可以使用黑色背景的情况

这篇文章可能是关于有黑色背景的网站，但我想接触一些功能强大的黑色背景的元素。很有可能你会在某一点上创建这些元素，所以以上所有的元素肯定会派上用场。我说的元素是:

强调部分,

页眉/页脚/导航,

评论,

弹出窗口。

记得我说过，在设计中，强调扮演一个巨大的角色，黑色可以帮助你做正确的事情。标题中的黑色背景并不常见，但也不完全令人惊讶。页脚也可以是深色的，因为页眉和页脚都代表了网站内容的边缘，而且颜色更暗一点也很方便。

与我提到的其他元素相同:章节、注释和弹出窗口。既然他们不是“主要内容”，他们就可以而且应该有不同的风格。

结论

如果你设法找到合适的地点和时间使用黑色背景，那就去做吧。然而，记住这些机会很少发生，如果你有机会的话，你可能需要等待下一个合适的时机来(否则你真的很幸运)。

你可以个人喜欢黑色(这没有错)，但你不应该是一个在他们的项目中使用黑色的设计师——真正的设计师知道的比这更好。真正的设计师知道如何识别时间和地点(以及如何处理它)。

这就是我现在要做的!希望这篇文章能帮助你，并为所有的设计爱好者展示了一些很好的例子。

原文：

How and When to Create a Website with a Black Background Design

Black has always been — if not the most popular design color — the color which designers talk about the most. It is sophisticated, energetic, mysterious, elegant, powerful, stylish, and the complete opposite of the default white.

Now, I want to focus on the fact that it’s the exact opposite of white (I will talk about this more further in the text) because this is the kind of thing that you want and need in design — something different and intriguing, like the color black.

Why do you need it, though? When is the right time for you to create a black background for your site? I’m going to talk about all of this and more in this post, and fair warning: it’s going to get really dark, then darker than that, and finally that murky shade that’s even darker than #555 (my fellow developers know what I’m talking about).

So, without further ado, let’s explore this black matter further!

Apple

FORMIGARI

A Bit About Black Background Designs

Seeing that I have some design legacy and a lot of design experience, I want to share my impressions and thoughts with you first.

Designers’ final goal is to make website content that attracts attention and stands out from the similar ones. However, an even greater goal (if not the greatest) is to create a website that serves its purpose. Here’s what you need to know: designers must emphasize important elements. This is our aim in almost everything we do and it’s our job to create a hierarchy in this emphasizing (in order to highlight the most important details on a website).

Black is perfect if you want to emphasize something on a background of any other color, especially on a white one. The white represents a blank start in our experience (it stands for daylight, empty paper, a page without content, etc.), while the color black is considered to be no different thanany other color, like content. That’s why the white color is the first choice for website background.

On the other hand, black is “the heaviest” color of them all and because of that, it can be difficult for us to highlight other elements. However, what you can do is use that blackness to emphasize other content. You might have noticed that elements that have a black background always seems smaller. This impression is caused by the psychological effect the color black has on peopleーwe tend to consider black like an absence of color with potentially something in it.

Upper

Spotify

The biggest user-experience problem with a dark background is still readability, which gets notably decreased when we use a dark background — not just because it is harder for our eyes to notice the color difference, but also because of the screen light that makes the white shine.

In practice it sounds like this:

Do not use the color black if you have too much content.

Be extra careful with text on a black/dark background.

You can freely use a black background for images and graphic elements.

It is fine to use a black background for smaller elements to point them out to another color.

From my experience, people usually find sites with dark backgrounds untrustworthy, because they are unconventional. However, people who are artistic, even a little bit, find this arrangement interesting and tempting. So, in the end, it’s all about the audience.

What Is the Problem with the Color Black?

The main one is that people find it less appealing than other colors.

People think of it as depressive, pessimistic, serious, sad, and the color of negativity, and seeing that we react to these types of things unconsciously, there’s not a lot we can do to change this.

It’s been proven over and over again that people expect to see white when they arrive at a website, and they feel familiar and secure with it. That’s why UX experts are not too keen on exchanging the standard white for the untraditional black.

As you can see, the problem with the black background color is real.

So, Is There a Place for Black Backgrounds in Design?

In the world of design, there are no strict rules about what you can and cannot do, and the same goes for the color black. Over the years, however, I have noticed that black backgrounds best work for the following (remember, this is not an official list, it’s from my experience only):

Portfolio websites,

Design studio websites,

Exclusive product presentations,

Unconventional content.

BASIC

NINJA TUNE

Doberman

Diego Tramontin

20jahre.stimmt.ch

Tips on Using the Color Black in Design

First things first: even when using a black background, it is important to create a lot of “white space”, too, because the black surface is visually smaller. The white background also serves as a “break” which is a thing that is missing on a dark background. It is also important to check usability more thoroughly. In my experience, you should never use a light font weight and it should always be 2 or 3 px bigger than the same one on a white background.

As already mentioned, the biggest problem with black backgrounds is readability, and every designer should know how to handle it (hint: increasing the font size, kerning, leading).

When picking dark backgrounds as your base, you need to remember that the chance for you to use conventional, learned design elements lowers. Aside from the fact that designers should think a bit harder about the usual elements, they should also put in an effort to make content more interesting and effects more creative.

What you need to pay attention to, as well, is which color shades you to use. There are text about how you should always use tinted black color in design and that this tint should come from the main color you use. Examples that I added are using tinted and true black (#000), so I think that idea is optional.

The idea to tint the base color comes from nature, where it’s very hard to see shades #000000 and #ffffff (not just because of the format).

Another problem lies in the fact that night modes use exactly this “problematic” arrangement (black background layout). Every browser extension and tool for optimization in dark surroundings offers the option for you to use a dark background and white text. Also, if there is an option to change the surrounding color in an application, there is always the black background option.

53

Situations in Which You Can Always Use a Black Background

This post may be about websites with black backgrounds, but I want to touch upon a couple of elements which function great with the black background. Chances are that you’ll be creating these elements at one point or another, so all of the above will surely come in handy. The elements I’m talking about are:

Emphasized sections,

Header/footer/navigation,

Comments,

Pop-ups.

Oui Will

STRV

OVER

ENVOY

Remember when I said how in design, emphasizing plays a huge role and black can really help you do this right. A black background in a header is not all that common, but it’s not entirely surprising, either. The footer can be darker, too, because both the header and footer symbolize the edges of website content, and it can be pretty user-friendly to color them darker.

The same goes with other elements I mentioned: sections, comments, and pop-ups. Seeing that they are not the “main content”, they can and should be styled differently.

Conclusion

If you manage to find the right place and time to use a black background, then go for it. However, bear in mind that these opportunities happen rarely and if you do get your chance, you’ll probably need to wait a lot for the next right moment to come around (otherwise you’re really lucky).

You can personally like the color black (there’s nothing wrong with that), but what you shouldn’t be is a designer who uses black in their projects — real designers know better than that. Real designers know how to recognize the time and place for it (and to deal with it along the way).

That’s it from me for now! Hope this post helped you out and showcased some nice examples for all of you design lovers out there.