17.05.06Was ist das schwere an dunklen Designs?
Auch beim letzten CSS-Reboot war es zu sehen. Dunkle Websitedesigns sind schwer im Trend - im Kontrast dazu sehr helle übrigens auch. Aber worin bestehen die Schwierigkeiten darin, gerade dunkle Websites ansprechend zu gestalten?
- So freundlich zu sein wie Veerle,
- so edel zu sein wie Dragon Labs
- und so ästhetisch zu sein wie CK Underwear.
Ich habe mich bereits an dunklen Hintergründen versucht, aber oft feststellen müssen, dass man dazu noch was anderes braucht. Nur was? Eine mir persönlich sympathische Variante ist helles Oberteil, dunkler Unterbau. Ich glaube in diese Richtung wirds gehen, das ist gut machbar.
Rico am Mai 17, 2006 | Reply
ich persönlich hatte mit dunklen Hintergründen auch immer so meine Probleme. Entweder passen die Buttons nicht dazu, ist schlecht lesbar oder es gefiel mir einfach nicht. Durch die vielen neuen Websites mit dunklen Hintergründen habe ich mich inspirieren lassen. Ich habe bei meinem neuen Theme die von Dir genannte Variante gewählt, helles Oberteil, dunkler Unterbau und ein bischen moo.fx :) .
Bin allerdings noch nicht ganz fertig.
Björn am Mai 17, 2006 | Reply
Engelbert am Mai 17, 2006 | Reply
Ich glaube, das Wichtigste ist ausreichender Kontrast. Es tun auch dezente Farbverläufe gut - wie zB bei Dragon Labs - Veerle hingegen setzt auf knallige Solitärfarben. Bei Ihr gefällt mir übrigens das bunte Kopfband nicht. Witzig: das irritiert mich total. Sonst ist die Seite klasse.
Ein Patentrezept für dunkel gehaltene Websites gibt es glaube ich (noch) nicht? Naja…. hilft nur try & error.
By the way: wo kann ich mich denn ins Thema moo.fx reinlesen? Any hints?
Pablo am Mai 18, 2006 | Reply
http://www.ajax-info.de/moo-fx-tutorial
und dann wenn du das Grundprinzip kapiert hast: http://moofx.mad4milk.net/documentation/ (oder selbst in die JS Dateien gucken, da lernt man auch einiges draus - vorrausgesetzt man kann etwas JS)
Zum eigentlichen Thema: Das Problem habe ich bei jedem Design mit schwarzem Hintergrund dass ich anfange. Und möchte ich mich von anderen schönen Seiten inspirieren lassen habe ich immer ein schlechtes Gewissen weil ich entweder die Ideen klaue oder es einfach scheiße aussieht.
Meines Erachtens eines der gelungensten dunklen Designs:
bartelme.at
Vielleicht auch, weil man den (wichtigen) Text dank des anderen Hintergrundes sehr gut lesen kann.
Siegfried am Mai 18, 2006 | Reply
Veerle ist mir zu bunt. Das passt nicht zu Schwarz. Dragon Labs ist beinahe o.k., aber immer noch ein Wenig zu bunt. Die blaue Farbe macht sich gut zusammen mit dem Schwarz. Das Gold/Orange wäre auch gut, aber beides zusammen macht sich nicht so gut. Das würde ich durch verschiedene Blautöne ersetzen. Das einzige akzeptable Orange wäre für mich die Flamme im Logo.
Es ist nützlich, wenn man sich mal ein bisschen um Farbbedeutung kümmert. Das fängt an mit der farbsymbolik in der Heraldik und endet derzeit bei aktueller Farbpsychologie. Schwarz wird assoziiert mit seelischer Tiefe, Seriösität, Weisheit und Zurückhaltung. Diese Symbolik kann mit _genau einer_ weiteren Farbe akzentuiert werden. Alles Weitere an Farben läuft der Bedeutung von Schwarz zuwieder.
Die Unterwäsche-Seite treibt das auf die Spitze. Das kann sehr sehr seriös wirken, ist aber kritisch: Eine Beschränkung auf Schwarz/Grau kann sehr leicht langweilig wirken. Es schafft größtmögliche Distanz und Ruhe. Das ermöglicht die Konzentration auf den Inhalt. Allerdings muß dann auch Inhalt vorhanden sein, auf den zu konzentrieren es sich lohnt. Und es darf nicht zu viel Inhalt sein, sonst kann man sich wieder nicht konzentrieren. Der von Dir genannten Seite ist mMn dieser Balanceakt gelungen.
Heiko am Mai 18, 2006 | Reply
Es gab auch schon früher zahlreiche dunkle Designs, aber jetzt kommen sie anscheinend in Mode und werden deshalb häufiger gesichtet.
Alexander Geilhaupt am Mai 18, 2006 | Reply
Ein weiteres Problem ist für mich auch die Lesbarkeit von weißer Schrift auf schwarzem Hintergrund.
Peter am Mai 18, 2006 | Reply
Da würde mich einfach mal interessieren, ob Designs mit dunklen Farben genau so intensiv gelesen werden wie Designs mit hellen Farben bzw. dem üblichen Kontrast dunkler Text auf hellem Hintergrund. Ich glaube nicht, aber ich schließe von mir auf andere, heißt, ich kann mich täuschen.
Christine am Mai 18, 2006 | Reply
Aber ich mag es wohl eh schon lange.
Ich denke aber trotzdem, man sollte sich nicht so sehr an Trends fest beißen.
Dunkle Seiten - besonders mit ganz schwarzem Grund - wirken wohl besonders gut, wenn etwas präsentiert wird, z.B. Bilder. Sicher ist das auch bei der Seite zu Calvib Klein so, die Fotos kommen einfach gut, machen die Unterwäsche irgendwie edler.
Veerle ist auch mir übrigens zu bunt.
Problematisch dabei ist für mich tatsächlich weiße oder eben helle Schrift auf dunklem Grund.
Ich favorisiere in dem Fall auch so etwas, wie es die Unterwäsche-Site bietet: den Text eben doch (besser lesbar) dunkel auf hell.
Keinen dunklen Grund will ich sehen, wenn es um klare Fakten geht. Ich denke an Anleitungen, Dokumentationen und Ähnliches. Bei solchen Seiten ist noch immer weißer Grund mit möglichst wenig Schnickschnack das beste, denke ich.
Auch Firmenseiten, die sich an die jeweilige CI halten müssen, bieten sicher wenig Möglichkeiten für dunklen Grund - Papier ist nun mal vorzugsweise weiß. :-)
Hier bieten sich sicher noch immer die bewährten Akzente (Navigationen, Köpfe etc.) in Farben des Firmenlogos
an. Gut gemacht, sind auch die nicht langweilig.
Mein Fazit:
Trends gut und schön.
Anregungen - immer her damit.
Aber unbedingt nachdenken, was passt für den jeweiligen Zweck.
Björn am Mai 18, 2006 | Reply
Siegfried am Mai 20, 2006 | Reply
Ich habe auch mit dunklem Design experimentiert und habe dabei festgestellt, daß die Lesbarkeit des Textes besser wird, wenn der Text nicht komplett Weiß ist. Die Farbe, die unter dem Namen “silver” standardisiert ist, ergibt in de Fall bessere Lesbarkeit. Es ermüdet die Augen weniger. Vermutlich ist das auch mit anderen farben ähnlich: Ein bisschen die Intensität zurücknehmen, und schon wird’s lesbarer.
Björn am Mai 20, 2006 | Reply
Ich plane zwar keine komplette Seite in schwarz, aber den unteren Bereich. Quasi als Keller in dem die Vorräte lagern ;-)
Siegfried am Mai 21, 2006 | Reply
probier’s mal so, wie in mittelalterlicher Heraldik. Du nimmst zwei Farben. In einem Teil ist Farbe A der Hintergrund und Farbe B der Vordergrund, im anderen Teil genau umgekehrt. Ebenfalls sehr interessant ist dann, wenn Du genau auf die Grenzlinie eine Figur resp. ein Symbol legst aus diesen beiden Farben, an der Grenzlinie gespalten und wieder in invertierten Farben. Genau so wurden zur Ritterzeit die jeweiligen Hoheitssymbole erstellt. Neben schwarz würde ich in diesem Fall eine “reine” Farbe als zweite Farbe wählen. Auch hierbei kannst Du Dich an der Heraldik orientieren. Mögliche “reine” Farben sind blau, grün oder rot. Auch interessant: In der Heraldik gab es die Unterscheidung zwischen Farben (damals “Tinkturen” genannt, und Metallen. Man hat niemals Farben mit Farben kombiniert oder Metalle mit Metallen, sondern immer nur Farben mit Metallen. Dabei zählten Gold und Silber zu den Metallen. Gold wurde auch gelb dargestellt, das ist daher das Gleiche. Silber wurde auch weiß dargestellt, ist also auch das Gleiche. Schwarz ist danach ebenfalls ein Metall, und zwar geschwärztes Silber. Es dürfte auch heute noch inteessant sein, sich an diesen uralten Gepflogenheiten zu orientieren, auch, wenn wir heute mehr Möglichkeiten haben. Verschiedene Farbabstufungen waren in der Heraldik unbekannt resp. irrelevant. Das ist Etwas, was wir heute zusätzlich haben.
Gerade dann, wenn man als Grundfarbe eine der alten heraldischen Farben wählt, sollte man den Rest der Seite ebenfalls nach den alten heraldischen Prinzipien gestalten. Es wirkt einfach :)
Till Marsel am Mai 21, 2006 | Reply
Die Designs von Veerle, Dragonlabs, usw. sind zwar auf keinen Fall schlechte Arbeit und sehen toll aus, aber das wirkt sich dann eben auf die Lesequalität der Inhalte negativ aus.
Gute Beispiele für dunkle Designs mit hellem Content-Bereich sind auf jeden Fall bartelme.at und ifelse.co.uk. Die Texte haben eine angenehme, nicht zu stechende Schriftfarbe (ich bevorzuge z.B. ein dunkelgrau anstatt dem klassischen schwarz) und liegen auf weißem Hintergrund. Noch dazu ist die Textbreite bei beiden Seiten angenehm gewählt. Und das dunkle Design rund um den Inhalt hebt die Texte hervor und richtet die Aufmerksamkeit des Lesers darauf - so kann man optimal Inhalte transportieren.
“Nebenbei”-Elemente, die also nicht direkt den Inhalt betreffen, kann man dann ruhig auf dunkle Hintergründe setzen. Es sollte sich dann allerdings nur um einzelne Wörter/Links oder ganz kurze Texte handeln.
Bei den meisten “volldunklen” Seiten verliert sich der Inhalt im Design, da er sich farblich (z.B. Hintergrundfarbe) kaum vom Rest abhebt. Noch dazu wählen viele Webmaster in Folge des dunklen Hintergrunds grelle Schriftfarben und das fängt nach kurzer Zeit an in den Augen regelrecht zu schmerzen.
Dunkle Designs (also auch mit dunklen Content-Bereichen) sind meiner Meinung nach eher für Projekte gedacht, bei denen es um reine Präsentation geht, sprich: Bildergalerien, Portfolios, u.ä.
Wenn es um Texte geht, dann sollte man doch lieber beim klassischen Konzept bleiben, welches ja auch bei den alltäglichen Printmedien seit Ewigkeiten angewendet wird: Schwarz auf Weiß. Oder hat jemand schon mal die aktuellen Nachrichten in einer schwarzen Tageszeitung mit giftgrüner Schrift gelesen…?
Siegfried am Mai 22, 2006 | Reply
das würde ich nicht _generell_ so sehen. Immerhin ist ein Bildschirm kein Printmedium. Die üblichen Zeitungsfarben als Argument heranzuziehen ist etwas gewagt. Allenfalls kann man damit argumentieren, daß Webseitenbesucher auf dieser Webseite auch gerne eine ihnen vertraute Umgebung vorfinden. Und schwarz auf weiß ist eben vertraut. Ebenfalls in diese Kategorie fallen dreidimensionale Objekte, denn in der vertrauten Umwelt kann man Objekte anfassen, sie haben alle ein Volumen und ein Gewicht. Webseiten, die Bedienelemente gestalten wie Objekte der natürlichen Umgebung haben da Vorteile.
Andererseits ist es so, daß z.B. eine große weiße Fläche in den Augen schmerzt. Jeder kennt das Phänomen der Schneeblindheit. Deswegen kommt viel schwarzer Text auf solch einer großen weißen Fläche besser: Der Text bietet dem Auge jede Menge Orientierungs- und Erhohlungspunkte. Bei schwarzen Hintergründen muß man umgekehrt vorgehen. Hier ist es nicht nur nicht notwendig,viele Orientierungspunkte zu bieten, sondern eher sogar schädlich resp. verwirrend. Bei dunklen Hintergründen muß man sich auf wenigen aber knackigen Inhalt konzentrieren. Deshalb kommen Präsentationen auf dunklen Hintergründen auch so gut rüber: Da wird ein einzelnes Bild (aka konzentrierter Inhalt) auf einem schwarzen Hintergrund erstklassig in Scene gesetzt.
Schwarz als Hintergrund ist extrem zurückgenommen. Ich glaube, die Budhisten würden das mit “Leere” umschreiben. Da wirkt bereits geringster Inhalt. Das ist wie in der Nacht, wo man das Fallen einer Stecknadel meilenweit hört. Weiß als Hintergrund strahlt von sich aus sehr stark. Wie am Tag, wo man grundsätzlich mit einem erheblichen Geräuschpegel konfrontiert ist. Geräusche, die am Tag wahrnehmbar sein sollen, müssen schon eine gewisse Mindestintensität haben. Inhalt auf weißen Hintergründen ähnlich: Eine gewisse Mindetsmenge.
Dunkle Webseiten sind durchaus möglich, man muß an dunkle Hintergründe nur ganz anders herangehen als an helle Hintergründe. In erheblich weniger krasser Form gild das übrigens auch für jede andere Farbe, wobei man allerdings wohl nur in Ausnamefällen einen intensiven Hintergrund mit einem zurückgenommenen Vordergrund kombiniert. Ich erinnere mich da noch an ein Wallpaper von SuSE Linux (ist schon eine Weile her), wo für den root-Account ein roter Hintergrund mit schwarzen Symbolen gewählt wurde. Das sollte visualisieren, daß man sich gerade auf sehr gefährlichem terrain bewegt. Möglich ist Sowas also schon, für Webseiten aber wohl eher die Ausname.
Siegfried am Mai 22, 2006 | Reply
BTW, ich bin grade über BasicThinking auf die Seite des Designers der Dragon Labs Seite gestoßen. Interessant, er vreöffentlicht auch die “Evolution” dieser Seite. Und wenn man diese Evolution verfolgt, kann man prima sehen, wie er immer weiter reduziert.
Übrigens, selbiger Designer ist grade mal 16 Jahre alt!