Die Dos und Don'Ts des dunklen Webdesigns
Dunkle Webdesigns sind sehr beliebt und können eine elegante und kreative Anziehungskraft haben.
Sie sind auch perfekt für viele Arten von Client-Arbeit, aber sie sind nicht für jede Website geeignet und sollten nur verwendet werden, wenn dies angemessen ist.
Trotz der auffälligen visuellen Wirkung, die diese dunklen Designs haben können, wissen viele Designer nicht, wie man sie effektiv abzieht, ohne den Besucher abzuweisen.
Mit einem dunklen Design kommt weniger Lesbarkeit , weniger Attraktivität für die meisten Leser und weniger Möglichkeiten für herkömmliche Design-Elemente.
In diesem Beitrag besprechen wir ein paar Tipps, um Ihr nächstes dunkles Website-Design für ein breiteres Publikum attraktiv zu machen , während Sie, der Designer, Ihre Kreativität ausdrücken können.
EIN letzte Umfrage schlägt vor, dass leichte Designs von dem allgemeinen Web-Publikum um sage und schreibe 47% bevorzugt werden. Der Hauptgrund ist die Lesbarkeit . Die meisten Menschen mögen es nicht, hellen Text vor einem dunklen Hintergrund auf Webseiten zu sehen, weil er ihre Augen strapaziert, was zu einer weniger angenehmen Erfahrung führt.
Im Gegensatz dazu gaben 10% der Befragten an, dass sie für Websites immer dunkle Hintergründe bevorzugen, während weitere 36% sagten, dass die beste Wahl von der Art der Website abhängen würde.
Also, was ist die richtige Antwort? Wenn es darauf ankommt, hat jeder seine eigene Meinung, und das ist es.
Aber mit einem so großen Prozentsatz von Benutzern, die sagen, dass dunkle Webseiten-Designs tolerierbar und manchmal sogar bevorzugt sind, müssen wir als Web-Designer lernen, wie wir effektive dunkle Designs für uns selbst und unsere Kunden erstellen können.
Das bedeutet, dass wir alle wahren Gläubigen mit hellem Hintergrund davon überzeugen müssen, dass dunkles Design lesbarer und benutzerfreundlicher ist.
Verwenden Sie mehr Leerraum
Oder sollte es "schwarzer Raum" genannt werden? Die effektive Verwendung von Leerraum ist für jede Art von Design wichtig, aber für Websites mit dunklem Hintergrund ist sie unerlässlich.
Dunkle Designs neigen dazu, sich "schwer" zu fühlen , und wenn man sie übereinander legt, kann dies das Gefühl verstärken. Werfen Sie einen Blick auf einige beliebte dunkle Web-Designs unten, und beachten Sie ihre liberale Verwendung von Leerraum mit großer Wirkung.
Schwarzer Nachlass ist überall im Internet in dunklen Webdesign-Vitrinen zu sehen. Es ist in der Tat ein schönes Design und der Aufmerksamkeit wert. Im gesamten Design wird viel weißer Raum verwendet. Was dieses besondere Design einzigartig macht, ist, wie der weiße Raum verwendet wird, um bestimmte Elemente so effizient zu umreißen.
Das Logo hat viel weißen Hintergrund und ist das erste, was wir als Besucher sehen. Wir sehen den Hauptinhalt und die Flasche rechts daneben. Wie Sie sehen, wird Leerraum perfekt verwendet, um den Text auf der Flasche und die Überschrift des Hauptinhalts hervorzuheben.
Der vorgestellte Inhalt in Tictoc und begleitendes Bild in diesem Design sind mit dem meisten weißen Raum umrahmt. Wenn wir nach unten gehen, sehen wir weniger Leerraum, was uns veranlasst, auf den Inhalt zu achten.
Der Punkt hier ist, dass Leerraum den Benutzer schrittweise bis zum Ende der Seite führt .
Der dunkle Hintergrund verleiht dem Design Tiefe. Da die Website so stark auf Leerraum angewiesen ist, wäre sie ohne den kreativen Effekt des dunklen Hintergrunds weniger interessant.
Das Mark Dearmman Die Website verfügt über großzügige und gleichmäßig verteilte Leerzeichen im Layout.
Der weiße Rahmen, der jedes Portfolio-Stück umrahmt, bietet viel Platz zum Atmen für den Inhalt, den es enthält, und es ist ein schöner Ruhepunkt, bevor es zum nächsten Stück geht.
Bei dunklen Designs ist viel Leerraum erforderlich, da er nicht nur das Layout entwirrt, sondern auch wichtige Elemente einrahmt und dem Gesamteindruck Eleganz verleiht.
Textueller weißer Raum
Da die Lesbarkeit das Hauptanliegen derjenigen ist, die dunkle Hintergründe nicht mögen, müssen Designer dem Text selbst besondere Aufmerksamkeit schenken.
Genau wie im gesamten Design ist eine Möglichkeit, die Lesbarkeit auf dunklen Websites zu verbessern, die Erhöhung des Leerraums durch Anpassung der Absatzgröße, Unterschneidung und Zeilenabstand .
Das folgende Beispiel zeigt, welchen Unterschied der Abstand zwischen und um Zeichen beim Vergleichen von dunklen und hellen Layouts macht.
Eine weitere Möglichkeit, die Lesbarkeit in dunklen Webdesigns zu verbessern, besteht darin , die Schriftgröße zu erhöhen . Wie die meisten anderen Regeln in diesem Beitrag bedeuten größere Schriftgrößen mehr Leerraum. Je größer die Buchstaben sind, desto mehr Leerraum wird um und in jedem Buchstaben erscheinen.
Zum Beispiel erhält der Buchstabe "a" unten mehr Leerraum, wenn er größer wird, sowohl in der Umgebung als auch in dem Raum innerhalb des Gehäuses des A und unter dem Überhang.
Beachten Sie, dass das Lesen kleiner Texte auf hellem Hintergrund so viel einfacher ist als auf dunklen. Wenn Sie die Typografie für eine neue Website festlegen, achten Sie darauf , einen Blindtext zu lesen, um sicherzustellen, dass er lesbar ist . Wenn nicht, sehen Sie, ob das Erhöhen der Textgröße hilft.
Text Kontrast
Viele Leute würden zustimmen, dass die am schlechtesten konzipierten dunklen Websites eine Belastung für die Augen verursachen. Zu viel oder zu wenig Kontrast ist normalerweise der Übeltäter. Wie findet man das perfekte Gleichgewicht?
Wenn Sie in einem Raum sind, der pechschwarz ist, ist es plötzlich nicht angenehm, direkt in das Licht zu schauen. Aber ein weniger helles Licht in einem weniger dunklen Raum zu betrachten, ist in Ordnung. Das gleiche Prinzip gilt für das Webdesign.
Den perfekten Kontrast zu finden bedeutet, die Dunkelheit des Hintergrunds mit der Leichtigkeit des Textes in Einklang zu bringen .
Unten ist eine (sehr) grobe Anleitung, die zeigt, wie der Kontrast zwischen Text und Hintergrund funktioniert. Man merkt, dass mit dem leichter werdenden Hintergrund auch der Text heller wird.
Einen angenehmen Kontrast für Text zu finden, ist mit einem reinen schwarzen Hintergrund viel schwieriger.
Um die perfekte Balance zu finden, experimentiere mit verschiedenen Farbtönen. Das beste Ergebnis ist normalerweise ein Hintergrund, der nicht reines Schwarz und Text ist, der nicht rein weiß ist.
Umgang mit Schriftarten
Fonts spielen eine große Rolle im Design und sollten bei dunklen Layouts definitiv berücksichtigt werden. Das Bild unten zeigt eine 14-Punkt-Schriftart auf einem dunklen Hintergrund in Serifen- und Sans-Serif-Schriftarten.
Die Sans-Serif-Schriftart ist offensichtlich besser lesbar . Aber viele Designer entscheiden sich immer noch für Serif-Fonts wegen ihrer Eleganz.
Der Trick besteht jedoch darin, nur einen größeren Text in Serifenschriftarten einzufügen, so dass der zusätzliche Leerraum um jedes Zeichen herum fließt und den Text sehr gut lesbar macht.
Der folgende Screenshot zeigt eine Website, die weiter oben in diesem Artikel beschrieben wurde. Es verfügt sowohl über Serifen- als auch über Sans-Serif-Schriften, verwendet diese jedoch auf intelligente Weise.
Größerer Text, wie Überschriften, Navigation und Kopfzeilen, ist in einer Serifenschrift für zusätzliche Eleganz. Für besseren Kontrast und verbesserte Lesbarkeit befindet sich der Fließtext in einer sauberen Sans-Serif-Schriftart.
Verwenden Sie minimale Farbschemata
Um ihren dunklen Designs ein sauberes und übersichtliches Aussehen zu geben, sollten Designer sich immer für minimale Farbschemata entscheiden .
Aus den wenigen Beispielen unten können wir sehen, dass ausgelastete Farbschemata dunklen Hintergründen wirklich im Wege stehen, weil der Kontrast zu scharf ist.
Bleiben Sie bei ein oder zwei Farben . Versuchen Sie einen dunkleren Hintergrund, um mehr Farbe hinzuzufügen.
Zugegeben, viele dunkle Webdesigns haben aufregendere Farbschemata. Diese Regel wird oft gebrochen, aber nur mit den richtigen Techniken.
Im Allgemeinen ist Farbe jedoch oft das, was eine Website zu beschäftigt aussehen lässt . Da dunklere Websites bereits Tiefe haben, verwenden Sie Farben mit Vorsicht.
Biete einen Style Switcher an
Während wir viele gute Praktiken zur Verfügung haben, um dunkle Web-Designs ansprechender zu gestalten, wird kein Aufwand für jeden Benutzer gerecht.
Stellen Sie sicher, dass Sie einen Stil-Switcher verwenden , damit die Benutzer letztendlich dunklen Text auf hellem Hintergrund sehen können.
Dazu sind zwei Stylesheets erforderlich, eines für das Standard-Layout dunkel und eines für das alternative Layout Licht.
SitePoint hat dazu ein hervorragendes Tutorial: Erstellen Sie einen Simple Style Switcher in CSS . Anstatt die "orange", "blau" und "weiß" Versionen im Tutorial zu verwenden, verwenden Sie einfach "light" und "dark" Stylesheets.
Wenn Dark Web Design am besten funktioniert
Wie bereits erwähnt, glaubt ein großer Teil der Internetnutzer, dass ein dunkles Webdesign für bestimmte Arten von Websites funktionieren könnte. Aber die Studie ist vage darüber, was genau diese Typen sind.
Im Allgemeinen funktioniert Dark am besten für kreative oder elegante Designs . Für moderne glatte Websites fügen dunkle Hintergründe Eleganz hinzu. Für grungy oder handgezeichnete Stile, dunkle Hintergründe verbessern die Kreativität des Layouts.
Elegantes dunkles Design
Dunkelheit kann tiefgründig, autoritativ und stark sein und sieht bei entsprechender Verwendung oft elegant aus. Hier sind ein paar Beispiele und einige Techniken, um die Eleganz in einem dunklen Design zur Geltung zu bringen.
Die Website für Larissa Meek hat ein einfaches Vintage-Stil-Muster im Hintergrund und setzt einen eleganten Ton. Andere merkwürdige Eigenschaften fügen dem Entwurf eine persönliche Note hinzu.
Diese Technik kann für viele Arten von Websites verwendet werden. Vintage oder klassische Muster und Texturen können einen eleganten und altersgerechten Look schaffen .
Die meisten von uns verbinden Vintage-Muster mit High-Class, so eine einfache Website auf diese Weise zu erstellen ist einfach.
Tiefenkern hat ein sehr sauberes Design, mit einem dunklen Hintergrund, der Stil und Klasse hinzufügt. Ein Gefühl der Autorität zeigt sich auch im Design. Diese Eleganz kann auch das Portfolio eines Designers wertvoller erscheinen lassen.
Merken Sie, dass dieses Design keine Beschaffenheit oder Bilder anders als die Portfoliostücke und das Logo hat. Ansonsten wäre das Design viel zu beschäftigt gewesen; so wie es ist, ist der Inhalt gut miteinander verbunden.
Ein guter Prozess zu folgen ist, zuerst wesentliche Inhalte hinzuzufügen und dann Designelemente nach Bedarf einzubringen . Der Designer kann dann pausieren und reflektieren, wenn jedes neue Element hinzugefügt wird. Dabei muss sichergestellt werden, dass das Layout nicht überlastet wird.
So wie Kunstwerke in einem eleganten Design wertvoller erscheinen können, so können auch Produkte. Ein dunkles und schlankes Design, wie Tapbots und so viele andere, hilft, das verkaufte Produkt zu präsentieren.
Das Design reflektiert das Gerät selbst mit seinen Farbverläufen und Lichteffekten; manche Designs ahmen sogar die Textur ihrer Hightech-Produkte nach.
Kreatives dunkles Design
Neben der eleganten Erscheinung können dunkle Website-Designs auch emotionalere Reaktionen auslösen als Standard-Lichtdesigns und sind somit ideal für kreative Projekte. Lassen Sie uns einige Beispiele für kreative Designs betrachten, die möglich sind.
Das Seite? ˅ unten hat sehr wenig Inhalt, aber hat ein einzigartiges Layout und dunkle Farben für die Tiefe. Dunkle Hintergründe sind perfekt für Webseiten mit sehr wenig Inhalt .
Und weil sie mehr Leerraum benötigen, hat der Designer mehr Platz für die Arbeit.
Grunge Webdesign kommt in vielen Formen, und weil Grunge "dunkel und schmutzig" ist, sind dunkle Hintergründe eine dieser Formen.
Dunkle Grunge-Designs wie Trozo scheinen alle Regeln zu brechen: beschäftigt Texturen, überfülltes Layout und eine breite Palette von Farben. Und dennoch funktioniert diese Website noch. Wie ist das möglich?
Mit so vielen unordentlichen Elementen zu arbeiten, kann Grunge-Design für Anfänger schwierig sein. Was dieses funktioniert, ist seine Organisation .
Der Hintergrund verfügt über übersichtliche Blöcke, die das Auge des Benutzers führen und den Inhalt in überschaubare Abschnitte unterteilen.
Zweitens hat es eine Tonne Leerraum . Der Hintergrund kann texturiert sein, aber das wiederholte Muster wird vom Benutzer als Leerraum gesehen, was hilft, das Design aufzuhellen.
Dieser weiße Bereich ist am deutlichsten links vom Logo, unter der Navigation und auf der rechten Seite.
Selbst zwischen "Exhibit 01" und "Exhibit 02" ist mehr Leerraum, als man normalerweise auf einer solchen Website findet.
Der weiße Bereich gleicht die Dinge aus, obwohl er nicht wie weißer Raum aussieht , weil er Textur hat . Der minimale Text und einige Abschnitte (nur drei) tragen ebenfalls zu dieser Einfachheit bei.
Das Design von Drew Wilson definitiv bricht die Regel der Verwendung minimaler Farbe. Es funktioniert aber immer noch, weil der bunte Header eine der wenigen Funktionen in diesem spärlichen Design ist, also übertreibt ihn nichts.
Und der dunkle Hintergrund lässt den Header noch heller und außergewöhnlicher erscheinen.
Dunkle Hintergründe werden oft verwendet, um Lichteffekte und helle Farben hervorzuheben .
Solche Designs sind eine wunderbar kreative Ausnahme von der Regel der minimalen Farbe. Aber die Regel sollte mit Vorsicht gebrochen werden: Vermeiden Sie störende Farbverläufe, Texturen und Farben auf der Seite.
Aufwickeln
Dunkle Hintergründe geben Webdesigns ein elegantes und kreatives Aussehen und eignen sich daher perfekt für einige Portfolios. Sie eignen sich jedoch nicht für alle Websites.
Für größere Websites, insbesondere für Menschen mit Sehbehinderung und anderen Behinderungen, sind dunkle Designs ein No-No, sogar mit einem Stil Switcher.
Hoffentlich, wenn die Zeit kommt, dass Sie eine Website mit einem dunklen Hintergrund entwerfen müssen, werden diese Tipps und Strategien helfen.
Geschrieben exklusiv für WDD von Kayla Ritter .
Es gibt viele weitere Techniken und Strategien, um dunkle Webdesigns zu verbessern, also teile bitte die, die du in den Kommentaren unten aufgegriffen hast.