Wie wende ich mich bei einem vorgegebenen Farbschema an das Website-Design?


22

Nur um etwas Konkretes zu besprechen, sage ich, ich habe dieses Farbschema:

Farbpalette für Frühlingstöne

Quelle

Es gibt viele Artikel darüber, wie man ein kohärentes Farbschema basierend auf Komplementärfarben, monochromen Farben usw. auswählt. Wenn ich jedoch eine Reihe von Farben habe, wie entscheide ich, welche Farbe die Überschrift ist, welche Farbe der Link ist, welche der Hintergrund ist und Text. Auch wenn ich mich für ein Hell-Dunkel-Schema oder ein Hell-Dunkel-Schema entscheide, kann das Anzeigen der restlichen Farben auf dem Bildschirm die Site hässlich erscheinen lassen.

Gibt es Faustregeln oder allgemeine Richtlinien, anhand derer man entscheiden kann, welche Farben wohin gehen?


2
Die Antwort ist, dass Sie sie basierend auf dem, was gut aussieht, auswählen und die Designziele erreichen. Leider gibt es keine Formel dafür.
DA01

Nun, @ DA01 hat es bereits gesagt. Außerdem können Sie auf keine Website ein bestimmtes Farbschema anwenden. Vielmehr bestimmen Sie das Farbschema nach der Webseite.
ikartik90

1
Gute Frage! Leider ist dieses Bild jetzt 404.
Animesh

Für die, die sich wundern, habe ich das Farbschema vom toten Link oben neu erstellt. Wenn ich Farbcodes aus den Antworten und Kommentaren auswähle,
erhalte

Antworten:


13

Ich sehe viele Leute, die Dinge wie "Es gibt keine richtige Antwort" kommentieren, mit denen ich (irgendwie) nicht einverstanden bin ... Es gibt mit Sicherheit mindestens eine richtige Antwort, vielleicht ein paar, und ich bin mir sicher, dass es auch eine Reihe falscher Antworten gibt. Bei gutem Design geht es darum, basierend auf den verfügbaren Ressourcen und der verfügbaren Zeit die bestmögliche Lösung zu finden. Eine solche Lösung wird mit Sicherheit mehrere Alternativen überwiegen. Sie haben uns zu Diskussionszwecken eine Farbpalette gegeben. Deshalb werde ich genau das tun und Ihre Frage anhand der mitgelieferten Farbpalette beantworten. (Da ich das Layout, mit dem Sie arbeiten, noch nicht gesehen habe, wird es immer noch ziemlich umfangreich sein, aber es wird einen Prozess geben, dem Sie folgen müssen.)

Die ersten Farben, die ich beim Erstellen eines Farbschemas in einem Webprojekt auswähle, sind der Hintergrund für den Textkörper und die Haupttextfarbe. Normalerweise ist es eine gute Idee, die beiden kontrastreichsten Farben auszuwählen, um diese Rollen zu füllen, und Ihre Beispielpalette ist keine Ausnahme. In diesem Fall lauten die Farben also # DEE1DD und # 28363D. Jetzt müssen wir uns entscheiden, welche für den Text und welche für den Hintergrund verwendet werden sollen, und in den meisten Fällen versuche ich, die hellere Farbe für den Hintergrund und die dunklere für den Text zu verwenden. Es wurde viel recherchiert, um zu zeigen, dass wir eine dunkle Farbe auf einer hellen Farbe leichter lesen können als eine helle Farbe auf einer dunklen. Das ist also das, was ich im Allgemeinen als Standard bezeichne, es sei denn, es gibt einen Grund für einen dunkleren Look (als würden Sie eine Website für einen Heavy Metal erstellen) Band oder so ... Ich gehe mal davon aus, dass das hier nicht der Fall ist. So,

Als nächstes möchte ich auf das eingehen, was ich für das nächstwichtigste Element halte, nämlich die Hyperlinks. Sie möchten eine Farbe, die vom Hintergrund genug kontrastiert, um nicht schwer zu lesen, sondern auch genug vom Text, um wahrgenommen zu werden. In diesem Beispiel sind die meisten helleren Grüns auf hellem Hintergrund unleserlich, daher lautet die naheliegendste Antwort # 2F575D.

Als nächstes haben Sie auf eine Überschrift angespielt, die gefärbt werden musste, und wir müssen sie wieder vom Hintergrund abheben. Im Interesse des Minimalismus versuche ich, die Farben, die ich bereits im Körper verwendet habe, wiederzuverwenden. In diesem Fall ist die Textfarbe wahrscheinlich zu dunkel, um große Mengen an Platz auszufüllen Aus all den oben genannten Gründen würde ich die Hintergrundfarbe # DEE1DD verwenden, um Text oder Links in die Kopfzeile einzufügen.

Schließlich beschreibe ich nicht wesentliche Gestaltungselemente wie den letzten Schwebezustand und wir haben noch ein paar verschiedene Grüns zur Auswahl. Auch dies muss wahrscheinlich vom Hintergrund genug kontrastieren, da die Links beim Überrollen nicht verschwinden. Wenn Sie also geneigt sind, mit # 658B6F zu gehen ...

Und ... Voila! Sie haben jetzt ein (grundlegendes) 4-Farben-Schema. Ich hoffe, dieser Prozess hilft dir genauso wie mir :)!


3

Die Website, auf die Sie verlinkt haben, zeigt Ihnen, wie Sie diese Farben verwenden:

#28363D for the active state 
#2F575D as the navigation background 
#DEE1DD as background 
#C4CDC1 as banner ...

Normalerweise spritze ich meine eigene Farbe in das Design - auch wenn ich weiß, dass sie etwas falsch sind - mindestens habe ich ungefähr zwei Volltonfarben oder mindestens eine. Wenn ich dann meine Idee entworfen habe, nehme ich meine Primärfarbe (die, die ich am häufigsten verwendet habe) und füge sie einem Farbkreis hinzu. Auf diese Weise ersetze ich meine anderen Farben. Oder ich versuche einige Bilder zu finden, die die meisten meiner Originalfarben haben.

Ich habe Artikel gelesen, die sagen, mache ein Bild und gestalte deine Arbeit auf der Basis dieser Farben, das kann ich nicht. Ich erstelle mein eigenes Design mit mindestens einer Farbe und benutze dann die Techniken der Farbtheorie

ich hoffe es hilft


> Die Website, auf die Sie verlinkt haben, zeigt Ihnen, wie Sie diese Farben verwenden können: Richtig, das ist meine Frage, was ist der Algorithmus, um das selbst herauszufinden?
Shahbaz

Ich glaube nicht, dass es einen gibt. Wenn ich zum Beispiel diese Farben zu dieser Website hinzufügen müsste, hätte ich sie nicht so angeordnet. Zum Beispiel ist die Art und Weise, wie sie die Farben hier verwendet haben, meiner Meinung nach schrecklich, obwohl die Farben sehr schön, aber meiner Meinung nach schlecht arrangiert sind. Sie müssen also mit Farben spielen. Ich glaube nicht, dass es einen mechanischen Weg gibt - wenn es einen gibt, würde ich empfehlen, dass Sie mit Ihren Designs spielen und es nicht verwenden!
Aurel

3

Es gibt keine Formel für das, was genommen werden soll, der Hintergrund und so weiter, deshalb ist Design eine Kunst.

Normalerweise werde ich viele Versuche mit den Farben machen, die ich habe, zum Beispiel, welche Schriftfarbe auf welchem ​​Hintergrund besser aussieht.

Es gibt zwar eine Faustregel, die den Kontrast der verwendeten Farben bestimmt, aber die meisten Leute werden sagen, dass dies ein gesunder Menschenverstand ist, z. B. helle Schrift mit dunklem Hintergrund. Dann kann es vorkommen, wie Sie die Farbe für Unterkomponenten bestimmen, wie z. B. Warnfelder, Navigation und so weiter.

Nach meinem Dafürhalten sollten Sie Ihre reine Struktur für die Website bereithalten. Anschließend müssen Sie festlegen, welche Inhalte Ihre Hauptinhalte sind und wie Sie sie präsentieren möchten. Möglicherweise eine weichere Farbe bei Unterkomponenten, die nicht sofort beachtet werden muss.

Woher weißt du, ob es gut ist oder nicht? Einfach, sobald Sie sagen "Das ist schön", dann ist es gut. Es hilft immer, von anderen Leuten eine zweite Meinung zu bekommen.

Alles in allem, versuchen Sie es mit der Farbkombination, bleiben Sie nicht bei nur einer, und Sie könnten überrascht sein, welche Zusammensetzung Sie am Ende erreichen könnten.

@Color-Kombination: Die auf der Website bereitgestellte Kombination ist für den Anfang gut genug.


2

Ich erinnere mich an eine Zeit, als meine erste Frau und ich eine große Leinwandtafel und mehrere Tuben Acrylfarbe bekamen. Wir legen die Leinwand auf den Boden und spritzen ziellos zufällige Farben darauf. Wir ließen es trocknen und hängten es dann über unseren Kamin. Im Laufe der Zeit äußerten sich mehrere Gäste zu dem wundervollen Aussehen und hielten es für ein teures Kunstwerk ... bis wir ihnen erklärten, wie es gemalt wurde. Es liegt alles im Auge des Betrachters.

Nachdem ich diese Geschichte erzählt habe, muss ich sagen, dass ich damit einverstanden bin, dass es inkompatible Farbkombinationen gibt, die für die Mehrheit der Zuschauer hässlich sind. Es gibt jedoch nicht viele von ihnen. Ich denke nicht, dass Sie zu viel Stress machen sollten, wenn es darum geht , es richtig zu machen . Was auf der Website enthalten ist, kann eine ganze Reihe schlechter Farbwahlen ausgleichen. Der Inhalt wird das Design immer übertreffen.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.