Eine kurze Diskussion über die Farbabstimmungsfähigkeiten von Webseiten (ein Muss für Front-End-Entwickler)

Im Allgemeinen sollte die Hintergrundfarbe einer Webseite weicher, schlichter und heller sein und mit dunklem Text gepaart sein, damit die Seite natürlich und angenehm wirkt. Für einen eindrucksvollen visuellen Effekt verwenden Sie für den Titel eine dunklere Farbe. Im Folgenden finden Sie meine Erfahrungen mit der Anpassung von Hintergrundfarben und Textfarben von Webseiten beim Erstellen von Webseiten und beim Durchsuchen von Webseiten anderer Personen. Diese Farben können als Hintergrundfarbe des Textes oder als Hintergrundfarbe des Titels verwendet werden. In Kombination mit verschiedenen Schriftarten erzielen sie definitiv gute Effekte. Ich hoffe, dass sie jedem beim Erstellen von Webseiten nützlich sein werden.

BgcolorΚ″#F1FAFA″——Gute Hintergrundfarbe für Text, elegant
BgcolorΚ″#E8FFE8″———Es ist besser, es als Hintergrundfarbe des Titels zu verwenden
BgcolorΚ″#E8E8FF″———Es ist besser, es als Hintergrundfarbe des Textes zu verwenden, und die Textfarbe sollte mit Schwarz übereinstimmen
BgcolorΚ″#8080C0″——Es ist besser, Gelb mit weißem Text abzustimmen
BgcolorΚ″#E8D098″——Vorzugsweise mit hellblauem oder blauem Text
BgcolorΚ″#EFEFDA″ ———Es ist besser, es mit hellblauem oder rotem Text abzugleichen
BgcolorΚ″#F2F1D7″——Elegant mit schwarzem Text, auffällig mit Rot
BgcolorΚ″#336699″——sieht mit weißem Text besser aus
BgcolorΚ″#6699CC″——sieht mit weißem Text besser aus, kann als Titel verwendet werden
BgcolorΚ″#66CCCC″——sieht mit weißem Text besser aus, kann als Titel verwendet werden
BgcolorΚ″#B45B3E″——sieht mit weißem Text besser aus, kann als Titel verwendet werden
BgcolorΚ″#479AC7″——sieht mit weißem Text besser aus, kann als Titel verwendet werden
BgcolorΚ″#00B271″——sieht mit weißem Text besser aus, kann als Titel verwendet werden
BgcolorΚ″#FBFBEA″———sieht mit schwarzem Text besser aus, wird normalerweise als Fließtext verwendet
BgcolorΚ″#D5F3F4″——sieht mit schwarzem Text besser aus, wird normalerweise als Haupttext verwendet
BgcolorΚ″#D7FFF0″——sieht mit schwarzem Text besser aus, wird normalerweise als Haupttext verwendet
BgcolorΚ″#F0DAD2″——sieht mit schwarzem Text besser aus, wird normalerweise als Haupttext verwendet
BgcolorΚ″#DDF3FF″——sieht mit schwarzem Text besser aus, wird normalerweise als Fließtext verwendet

Ein hellgrüner Hintergrund mit schwarzem Text oder ein weißer Hintergrund mit blauem Text sind beide auffällig, aber ersterer hebt den Hintergrund hervor, während letzterer den Text hervorhebt. Roter Hintergrund mit weißem Text und dunklerer Hintergrund mit gelbem Text sind sehr effektiv.
Dieser Artikel ist nur ein Ausgangspunkt. Sie können Ihrer Fantasie freien Lauf lassen und innovativere und auffälligere Farben verwenden, um die Webseite attraktiver zu gestalten.

Heutzutage rückt das Internet immer näher an unser Leben heran und das Surfen im Internet ist nach und nach zu einem unverzichtbaren Teil unseres Lebens geworden. Die Internetwelt ist bunt und es sind zahlreiche hervorragende und exquisite Webseiten entstanden. Viele Online-Informationen werden durch Text, Bilder, Flash-Animationen usw. präsentiert. Text ist dabei das wichtigste Designelement von Webseiten. Für Anfänger im Webdesign ist es besonders wichtig, die Textlayoutgestaltung im Webdesign zu verstehen und zu beherrschen. Der Autor möchte im Folgenden seine persönliche Meinung dazu teilen.
Textformatierung

Schriftgröße, Schriftart, Zeilenabstand

Die Schriftgröße kann auf verschiedene Arten berechnet werden, beispielsweise in Punkten oder Pixeln. Da beim Drucken auf Basis der Pixeltechnologie eine Umrechnung der Einheit in Punkte erforderlich ist, wird empfohlen, als Einheit Punkte zu verwenden.
Die am besten geeignete Schriftgröße für die Anzeige des Haupttextes einer Webseite beträgt etwa 12 Pfund. Heutzutage verwenden viele umfangreiche Websites normalerweise eine Schriftgröße von 9 Pfund, da sie viel Inhalt auf einer Seite unterbringen müssen. Größere Schriftarten können für Überschriften oder andere Bereiche verwendet werden, die hervorgehoben werden müssen, während kleinere Schriftarten für Fußzeilen und Zusatzinformationen verwendet werden können. Zu beachten ist, dass kleine Schriftgrößen zwar leicht einen Eindruck von Integrität und Vornehmheit vermitteln, die Lesbarkeit jedoch schlecht ist.
Webdesigner können Schriftarten verwenden, um die Emotionen, die sie mit ihrem Design vermitteln möchten, besser einzufangen. Die Auswahl der Schriftart ist ein emotionaler, intuitiver Akt. Doch egal, für welche Schriftart Sie sich entscheiden, sie sollte auf dem Gesamtkonzept der Webseite und den Bedürfnissen der Betrachter basieren. Zum Beispiel: Fette Schriftarten sind stark und kraftvoll, haben maskuline Charakteristika und eignen sich für Inhalte aus der Maschinenbau- und Baubranche usw.; dünne Schriftarten sind elegant und filigran, haben feminine Charakteristika und eignen sich eher für Inhalte aus der Bekleidungs-, Kosmetik- und Nahrungsmittelbranche und anderen Branchen. Auf derselben Seite wirkt das Layout elegant und stabil, wenn weniger Schriftarten verwendet werden; wenn mehr Schriftarten verwendet werden, wirkt das Layout lebendig und farbenfroh. Entscheidend ist, wie man dieses Verhältnis anhand des Seiteninhalts erfasst.

Aus Sicht einer verbesserten Plattformunabhängigkeit ist es am besten, für den Textinhalt die Standardschriftart zu verwenden. Denn zur Darstellung der Seiteninhalte nutzt der Browser die Schriftbibliothek auf dem lokalen Rechner. Als Webdesigner müssen Sie berücksichtigen, dass auf den Rechnern der meisten Viewer lediglich drei Schriftarten und einige entsprechende Spezialschriften installiert sind. Es kann jedoch sein, dass die angegebene Schriftart auf dem Rechner des Betrachters nicht vorhanden ist, was die Möglichkeiten zum Webdesign erheblich einschränkt. Die Lösung des Problems: Dort, wo es unbedingt nötig ist, eine spezielle Schriftart zu verwenden, kann man den Text auch in ein Bild umwandeln und dieses dann in die Seite einfügen.

Auch Variationen im Zeilenabstand können die Lesbarkeit Ihres Textes stark beeinträchtigen. Für den Haupttext ist grundsätzlich ein Zeilenabstand nahe der Schriftgröße besser geeignet. Das normale Zeilenabstandsverhältnis beträgt 10:12, das heißt, wenn die Schriftgröße 10 Punkt beträgt, sollte der Zeilenabstand 12 Punkt betragen. Dies ist vor allem auf folgende Überlegungen zurückzuführen: Ein angemessener Zeilenabstand erzeugt einen deutlich erkennbaren horizontalen Leerstreifen, der die Augen des Betrachters leitet, wohingegen ein zu großer Zeilenabstand dazu führt, dass eine Textzeile ihre gute Kontinuität verliert.

Neben seiner Auswirkung auf die Lesbarkeit ist der Zeilenabstand selbst auch eine sehr ausdrucksstarke Designsprache. Um die dekorative Wirkung des Layouts zu verstärken, kann der Zeilenabstand bewusst erweitert oder verengt werden, um ein einzigartiges ästhetisches Interesse widerzuspiegeln. So kann beispielsweise ein größerer Zeilenabstand eine entspannte und angenehme Stimmung ausdrücken und eignet sich gut für unterhaltsame und lyrische Inhalte. Darüber hinaus kann durch sorgfältige Anordnung das Nebeneinander von großen und kleinen Zeilenabständen die räumliche Hierarchie und Flexibilität des Layouts verbessern und so ein einzigartiges Einfallsreichtums unter Beweis stellen.

Der Zeilenabstand kann mit der Eigenschaft „Zeilenhöhe“ festgelegt werden. Es wird empfohlen, Punkte oder einen Prozentsatz der Standardzeilenhöhe zu verwenden. Beispiel: {line-height: 20pt}, {line-height: 150%}.

Gesamtlayout des Textes

Der Hauptteil der Seite ist eine Gruppe vieler einzelner Wörter, die zusammen angeordnet sind. Die Rolle dieser Gruppenform im Gesamtlayout der Seite sollte voll ausgenutzt werden. Aus künstlerischer Sicht können Schriftarten als eine eigenständige Kunstform betrachtet werden, die einen großen Einfluss auf die Persönlichkeit und Emotionen der Menschen hat. Beim Webdesign ist der Umgang mit Schriftarten ebenso wichtig wie der Umgang mit anderen Designelementen wie Farbe, Typografie und Grafiken. In gewissem Sinne können alle Designelemente als Grafiken verstanden werden.

1. Grafische Darstellung von Text

Schriftarten haben zwei Funktionen: Zum einen sollen sie die Bedeutung und Semantik der Zeichen vermitteln, zum anderen sollen sie eine ästhetische Wirkung erzielen. Die sogenannte Grafik eines Textes betont dessen ästhetische Wirkung, bringt symbolischen Text als grafisches Element zum Ausdruck und verstärkt gleichzeitig seine ursprünglichen Funktionen. Als Webdesigner können Sie Schriften auf herkömmliche Weise setzen oder auf künstlerische Art und Weise gestalten. Egal was passiert, alles sollte sich darum drehen, wie Sie Ihre Designziele besser erreichen können.
Indem wir Text in Grafiken und Bilder umwandeln und tiefgründige Designideen in einer kreativeren Form zum Ausdruck bringen, können wir die Monotonie und Langeweile von Webseiten überwinden und die Herzen der Menschen berühren.

2. Überlagerung von Text

Wenn Text und Bilder oder Text und Text überlagert werden, können sie ein Gefühl von Raum, Springen, Transparenz, Rauschen und Erzählung erzeugen und so zu aktiven und auffälligen Elementen auf der Seite werden. Obwohl die Überlappungstechnik die Lesbarkeit des Textes beeinträchtigt, kann sie auf der Seite einen einzigartigen visuellen Effekt erzeugen. Diese Ausdrucksweise, die nicht auf Lesbarkeit abzielt, sondern bewusst auf „Lärm“ abzielt, verkörpert einen künstlerischen Trend. Daher wird es nicht nur häufig im traditionellen Layoutdesign verwendet, sondern auch häufig im Webdesign eingesetzt.

3. Titel und Text

Beim Anordnen von Titel und Text können Sie zunächst darüber nachdenken, den Text in zwei, drei oder vier Spalten anzuordnen und dann den Titel zu platzieren. Der Haupttext ist in Spalten unterteilt, um Platz und Flexibilität auf der Seite zu gewinnen und die Eintönigkeit einer ganzspaltigen Seite und die Monotonie der Titeleinfügung zu vermeiden. Obwohl der Titel die Überschrift des gesamten Absatzes bzw. des gesamten Artikels ist, steht er nicht zwingend am Anfang des Absatzes. Es kann zentriert, horizontal, vertikal oder seitlich angeordnet und sogar direkt in eine Wortgruppe eingefügt werden, um mit einem neuartigen Layout die alten Regeln zu brechen.

4. Vier Grundformen der Textanordnung

Der Hauptteil der Seite ist eine Gruppe vieler einzelner Wörter, die zusammen angeordnet sind. Die Rolle dieser Gruppenform im Gesamtlayout der Seite sollte voll ausgenutzt werden.
An beiden Enden gleichmäßig: Die Länge des Textes von links nach rechts ist gleichmäßig und die Zeichengruppe bildet eine quadratische Fläche, die korrekt, streng und schön aussieht.
Zentrierte Anordnung: Bei gleichem Zeichenabstand wird der Text mit der Seitenmitte als Achse angeordnet. Diese Anordnung hebt den Text hervor und erzeugt eine symmetrische, formale Schönheit.
Links- oder Rechtsausrichtung: Durch die Links- oder Rechtsausrichtung bilden der Anfang oder das Ende der Zeile auf natürliche Weise eine klare vertikale Linie, die sich leicht mit Grafiken abgleichen lässt. Dieses Arrangement ist locker und straff, virtuell und real, springend und fließend und erzeugt eine formale Schönheit aus Rhythmus und Reim. Die Linksbündigung entspricht den Lesegewohnheiten der Menschen und wirkt natürlich; die Rechtsbündigung wird weniger verwendet, da sie nicht den Lesegewohnheiten entspricht, aber neuartig wirkt.
Um Bild anordnen: Text um den Bildrand herum anordnen. Wenn die Hintergrundkarte in den Text eingefügt wird, wirkt dieser harmonisch und natürlich.

Betonung des Textes

1. Betonung am Zeilenanfang <br />Das Vergrößern und Verzieren des ersten Wortes oder Buchstabens eines Textes sowie dessen anschließendes Einfügen am Absatzanfang wird im traditionellen Medienlayout-Design als „Dropping“ bezeichnet. Die Erfindung dieser Technik geht auf die Manuskriptkopisten im mittelalterlichen Europa zurück. Da es die Aufmerksamkeit auf sich ziehen, das Layout schmücken und aktivieren kann, wird es im Textlayout von Webseiten verwendet. Der Abstand sollte sich über den oberen und unteren Bereich einer vollständigen Textzeile erstrecken. Wie stark die Vergrößerung erfolgen soll, hängt von der Umgebung der Webseite ab.
2. Hervorhebung von Zitaten <br />Beim Formatieren des Textes einer Webseite stößt man häufig auf zusammenfassende Texte, nämlich Zitate. Ein Zitat fasst die Hauptidee eines Absatzes, eines Kapitels oder des gesamten Textes zusammen. Daher sollte ihm eine besondere Seitenposition und Platz im Layout zugewiesen werden, um es hervorzuheben. Zitate können auf vielfältige Weise angeordnet werden, etwa links oder rechts, über, unter oder mittig in den Haupttext eingebettet werden und sich durch eine Veränderung der Schriftart oder -größe vom Haupttext abheben.
3. Betonung einzelner Wörter <br />Werden einzelne Wörter in den Mittelpunkt der Seite gestellt, kann die optische Wirkung der Wörter durch Fettung, Einrahmung, Unterstreichung, Hinzufügen von Hinweiszeichen, Kursivierung der Schrift etc. bewusst verstärkt werden, sodass die Wörter auf der Gesamtseite hervorstechen und ins Auge fallen. Darüber hinaus können Sie durch Ändern der Farbe bestimmter Texte diesen Teil des Textes hervorheben. Tatsächlich machen sich diese Methoden alle das Gesetz des Kontrastes zunutze.

Textfarbe

Beim Webdesign können Designer verschiedene Farben für Text, Textlinks, besuchte Links und aktuell aktive Links auswählen. Wenn Sie beispielsweise den FrontPage-Editor verwenden, sind die Standardeinstellungen wie folgt: Die normale Schriftfarbe ist schwarz, die Standard-Linkfarbe ist blau und nach einem Mausklick wird der Link violett. Die Verwendung von Text in verschiedenen Farben kann den Teil, den Sie hervorheben möchten, auffälliger machen. Beachten Sie jedoch, dass die Farbe des Textes nur in geringen Mengen verwendet werden sollte. Wenn Sie alles hervorheben möchten, betonen Sie tatsächlich nichts. Darüber hinaus beeinträchtigt die Verwendung zu vieler Farben auf einer Seite die Lesbarkeit des Seiteninhalts durch den Betrachter, sofern Sie keinen besonderen Designzweck verfolgen.

Der Einsatz von Farbe hebt nicht nur bestimmte Teile des Gesamttextes hervor, sondern beeinflusst auch den emotionalen Ausdruck des gesamten Textes. Hierbei geht es um die emotionale Symbolik der Farbe, auf die hier aus Platzgründen nicht näher eingegangen wird.

Ein weiterer zu beachtender Punkt ist der Kontrast der Textfarbe, der den Helligkeitskontrast, den Reinheitskontrast und den Kontrast zwischen kalten und warmen Farben umfasst. Diese wirken sich nicht nur auf die Lesbarkeit des Textes aus, sondern, was noch wichtiger ist, Sie können durch den Einsatz von Farbe den gewünschten Designeffekt, die gewünschte Designemotion und die gewünschte Designidee erzielen.

1. Farbverarbeitung

Für das menschliche Auge ist Farbe die empfindlichste Wahrnehmungssache. Eine gelungene Farbgebung der Homepage kann das i-Tüpfelchen sein und mit halbem Aufwand das doppelte Ergebnis erzielen. Der allgemeine Grundsatz der Farbanwendung sollte „Gesamtabstimmung, lokaler Kontrast“ sein, das heißt: Die Gesamtfarbwirkung der Homepage sollte harmonisch sein und nur lokale und kleine Bereiche können einen starken Farbkontrast aufweisen. Beim Einsatz von Farben können Sie je nach Bedarf des Homepage-Inhalts unterschiedliche Hauptfarben verwenden. Denn Farben haben eine symbolische Bedeutung: Hellgrün, Smaragdgrün, Goldgelb und Graubraun können beispielsweise jeweils Frühling, Sommer, Herbst und Winter symbolisieren. Zweitens gibt es die symbolischen Farben der Berufe, wie etwa Olivgrün für Militär und Polizei, Weiß für Medizin und Gesundheitswesen usw. Farben haben auch offensichtliche psychologische Gefühle, wie Kälte- und Wärmegefühle, Vorwärts- und Rückwärtseffekte usw. Darüber hinaus haben Farben auch nationale Besonderheiten. Aufgrund des Einflusses von Faktoren wie Umwelt, Kultur und Tradition weisen verschiedene ethnische Gruppen große Unterschiede in ihren Farbpräferenzen auf. Wenn wir diese Farbeigenschaften voll ausnutzen, können wir unserer Homepage eine tiefgreifende künstlerische Konnotation verleihen und so den kulturellen Charakter der Homepage verbessern. Hier sind einige häufig verwendete Farbschemata:

1. Warme Farben. Also die Kombination aus Rot, Orange, Gelb, Ocker und anderen Farben. Durch die Verwendung dieses Farbtons kann die Homepage eine warme, sanfte und enthusiastische Atmosphäre erzeugen.

2. Coole Farben. Das heißt, die Kombination von Farben wie Cyan, Grün und Lila. Durch die Verwendung dieses Farbtons kann der Homepage eine ruhige, kühle und elegante Atmosphäre verliehen werden.

3. Kontrasttöne. Dabei werden Farben mit völlig entgegengesetzten Farbtönen in denselben Raum gebracht. Zum Beispiel: Rot und Grün, Gelb und Lila, Orange und Blau usw. Diese Farbkombination kann einen starken visuellen Effekt erzeugen und den Menschen ein helles, lebendiges und festliches Gefühl vermitteln. Natürlich erzielen Kontrastfarben, wenn sie nicht richtig eingesetzt werden, den gegenteiligen Effekt und führen zu kitschigen, grellen und unerwünschten Effekten. Hierzu ist das wichtige Prinzip „Große Harmonie, kleiner Kontrast“ zu verstehen. Das heißt, der Gesamtfarbton sollte einheitlich und harmonisch sein, während in lokalen Bereichen einige kleine, starke Kontraste vorhanden sein können.

Schließlich müssen Sie auch die Tiefe und Helligkeit der Hintergrundfarbe der Homepage berücksichtigen. Hier leihen wir uns einen Begriff aus der Fotografie, nämlich „High Key“ und „Low Key“. Ein heller Hintergrund wird als „High Key“ bezeichnet, ein dunkler Hintergrund als „Low Key“. Wenn die Hintergrundfarbe dunkel ist, sollte die Farbe des Textes hell sein und der dunkle Hintergrund sollte den hellen Inhalt (Text oder Bild) hervorheben. Umgekehrt gilt: Wenn die Hintergrundfarbe hell ist, sollte die Farbe des Textes dunkler sein und der helle Hintergrund sollte den dunklen Inhalt (Text oder Bild) hervorheben. Dieser Farbtonwechsel wird in der Farbwissenschaft als „Helligkeitsänderung“ bezeichnet. Manche Homepages haben einen schwarzen Hintergrund, der Text ist aber auch in einer dunkleren Farbe geschrieben. Da die Helligkeit der Farben ähnlich ist, werden die Augen des Lesers beim Lesen angestrengt, was den Leseeffekt beeinträchtigt. Natürlich darf sich die Helligkeit der Farbe nicht zu stark verändern, da sonst der Helligkeitskontrast auf dem Bildschirm zu stark wird, was auch für die Augen des Lesers unerträglich wird.

Farbabstimmung für Webseiten

Die Farbe einer Webseite ist entscheidend für das Image einer Website, doch die Farbabstimmung bereitet den Internetnutzern Kopfschmerzen. Welche Farben sollten für den Hintergrund, den Text, die Symbole, die Rahmen, die Hyperlinks usw. einer Webseite verwendet werden und welche Farben sollten aufeinander abgestimmt werden, um die beabsichtigte Konnotation am besten zum Ausdruck zu bringen? Ajie möchte hier einige seiner Erfahrungen teilen und hofft, dass sie für Sie eine Inspiration sein werden.

Lassen Sie uns zunächst einige Grundlagen über Farben erlernen:

1. Farbe entsteht durch die Brechung des Lichts.

2. Rot, Gelb und Blau sind die drei Grundfarben. Mit diesen drei Farben können andere Farben gemischt werden. Der Farbausdruck in der HTML-Sprache von Webseiten wird durch die numerischen Werte dieser drei Farben dargestellt. Beispielsweise ist Rot die Farbe (255,0,0) und seine hexadezimale Darstellung ist (FF0000) und Weiß ist (FFFFFF). Das „bgColor=#FFFFFF“, das wir oft sehen, bedeutet, dass die Hintergrundfarbe weiß ist.

3. Farben werden in zwei Kategorien unterteilt: Nichtfarben und Farben. Unter Nicht-Farbe versteht man die Systemfarben Schwarz, Weiß und Grau. Der Begriff „Farbe“ bezieht sich auf alle Farben außer Nichtfarben.

4. Jede Farbe hat die Eigenschaften Sättigung und Transparenz. Änderungen dieser Eigenschaften erzeugen unterschiedliche Farbtöne, sodass mindestens Millionen von Farben erzeugt werden können.

Ist es beim Erstellen von Webseiten besser, Farbe oder keine Farbe zu verwenden? Untersuchungen professioneller Forschungsinstitute zufolge ist der Memory-Effekt von Farbe 3,5-mal so stark wie der von Schwarzweiß. Das heißt, Farbseiten sind im Allgemeinen ansprechender als komplett schwarzweiße Seiten.

Unsere übliche Vorgehensweise ist: Verwenden Sie für den Hauptinhaltstext keine Farbe (Schwarz) und für Ränder, Hintergründe und Bilder Farbe. Auf diese Weise wirkt die Seite insgesamt nicht eintönig und der Hauptinhalt wird nicht zu verwirrend.

● Keine Farbanpassung

Schwarz und Weiß ist die grundlegendste und einfachste Kombination. Weißer Text auf schwarzem Hintergrund oder weißer Text auf schwarzem Hintergrund sind beide sehr klar und deutlich. Grau ist eine universelle Farbe, die mit jeder Farbe kombiniert werden kann und auch dabei hilft, einen harmonischen Übergang zwischen zwei gegensätzlichen Farben herzustellen. Sollten Sie wirklich keine passende Farbe finden, dann versuchen Sie es doch einmal mit Grau, die Wirkung wird bestimmt nicht allzu übel sein.

●Farbkombination

Farben verändern sich ständig und die Farbabstimmung steht im Mittelpunkt unserer Forschung. Wir müssen noch etwas mehr über Farben lernen.

1. Farbkreis. Wir können einen Farbring erhalten, indem wir die Farben schrittweise der Reihe nach von „Rot->Gelb->Grün->Blau->Rot“ ändern. Die beiden Enden des Farbkreises sind warme und kalte Farben, und in der Mitte liegen neutrale Farben. (Wie unten gezeigt)

Rot, Orange, Orangegelb, Gelb, Gelbgrün, Grün, Cyan, Blaugrün, Blau, Blauviolett, Violett, Violettrot, Rot

|___________| |____| |_________| |_________| | | | |

Warme neutrale FarbenKalte neutrale Farben

2. Das psychologische Gefühl der Farbe. Verschiedene Farben rufen beim Betrachter unterschiedliche psychologische Gefühle hervor.

Rot – ist eine aufregende Farbe. Die stimulierende Wirkung kann dazu führen, dass Menschen impulsiv, wütend, enthusiastisch und energiegeladen sind.

Grün – eine Mischung aus kalter und warmer Farbe – vermittelt ein Gefühl von Harmonie, Ruhe, Gesundheit und Sicherheit. In Kombination mit Gold und hellem Weiß kann es eine elegante und gemütliche Atmosphäre schaffen.

Auch Orange ist eine spannende Farbe mit leichter, fröhlicher, warmer, gemütlicher und modischer Wirkung.

Gelb – steht für Glück, Hoffnung, Weisheit und eine fröhliche Persönlichkeit und hat die höchste Helligkeit.

Blau – ist die coolste, frischeste und professionellste Farbe. In Kombination mit Weiß kann es eine sanfte, elegante und romantische Atmosphäre schaffen (wie die Farbe des Himmels:)

Weiß – vermittelt das Gefühl von Weiße, Helligkeit, Reinheit und Sauberkeit.

Schwarz – vermittelt ein Gefühl von Tiefe, Geheimnis, Stille, Traurigkeit und Depression.

Grau – es steht für Mäßigung, Gewöhnlichkeit, Sanftheit, Bescheidenheit, Neutralität und Eleganz.

Leichte Änderungen der Sättigung und Transparenz jeder Farbe erzeugen unterschiedliche Gefühle. Am Beispiel der Farbe Grün zeigt Gelbgrün eine jugendliche und kräftige optische Wirkung, während Blaugrün ruhig und tief wirkt.

●Grundsätze zur Farbabstimmung auf Webseiten

1. Lebendigkeit der Farben. Die Farben der Webseite sollten hell und auffällig sein.

2. Die Einzigartigkeit der Farbe. Wählen Sie eine unverwechselbare Farbe, damit die Leute einen starken Eindruck von Ihnen bekommen. (Siehe den Abschnitt zu Standardfarben für die Website-CI im zweiten Artikel von Design Thinking)

3. Die Eignung der Farbe. Das heißt, die Farbe sollte zur Atmosphäre des Inhalts passen, den Sie ausdrücken möchten. Beispielsweise wird Pink verwendet, um die Flexibilität weiblicher Websites widerzuspiegeln.

4. Die assoziative Natur der Farben. Verschiedene Farben erzeugen unterschiedliche Assoziationen. Blau erinnert uns an den Himmel, Schwarz an die Nacht, Rot an glückliche Ereignisse usw. Die von Ihnen gewählte Farbe sollte mit dem Inhalt Ihrer Webseite in Zusammenhang stehen.

●Der Prozess der Beherrschung von Webseitenfarben

Mit zunehmender Erfahrung in der Erstellung von Webseiten ist ein Trend zur Verwendung von Farben aufgetreten: monochrom -> bunt -> Standardfarbe -> monochrom. Aufgrund fehlender Technologie und Kenntnisse konnten zunächst nur einfache Webseiten mit einzelnen Farben erstellt werden. Nachdem man eine gewisse Grundlage und Materialien hatte, hoffte man, eine schöne Webseite zu erstellen, indem man die besten Bilder, die man gesammelt hatte, und die zufriedenstellendsten Farben auf der Seite anhäufte. Doch nach langer Zeit stellte man fest, dass die Farben chaotisch waren und weder Persönlichkeit noch Stil hatten. Als man seine Website zum dritten Mal neu positionierte, wählte man Farben, die zu ihnen passten, und die Websites, die man startete, waren oft erfolgreicher. Als das endgültige Designkonzept und die Technologie ihren Höhepunkt erreicht hatten, kehrte man zur Einfachheit zurück und verwendete einzelne Farben oder sogar Nicht-Farben, um einfache und exquisite Websites zu gestalten.

○Fähigkeiten zur Farbabstimmung im Web

An dieser Stelle des Artikels fragen sich einige besorgte Internetnutzer möglicherweise: „Welche Farbkombination sieht gut aus? Können Sie ein paar Farbschemata empfehlen?“ Keine Sorge, hier sind einige Tipps, die Ihnen helfen können, schnell zum Farbmeister zu werden :)

1. Verwenden Sie eine Farbe. Hier bedeutet es, zunächst eine Farbe auszuwählen und dann die Transparenz oder Sättigung anzupassen (für Laien ausgedrückt: die Farbe aufzuhellen oder abzudunkeln), um eine neue Farbe für die Verwendung auf der Webseite zu erstellen. Eine solche Seite weist eine einheitliche Farbgebung und eine gewisse Hierarchie auf.

2. Verwenden Sie zwei Farben. Wählen Sie zuerst eine Farbe und dann die Kontrastfarbe aus (drücken Sie in Photoshop Strg+Umschalt+I). So habe ich die Farben Blau und Gelb für meine Homepage festgelegt. Die gesamte Seite ist bunt, aber nicht zu bunt.

3. Verwenden Sie ein Farbschema. Einfach ausgedrückt geht es darum, eine Farbe zu verwenden, die ein Gefühl widerspiegelt, wie etwa Hellblau, Hellgelb, Hellgrün oder Khaki, Erdgrau, Erdblau. Die Methode zur Bestimmung der Farbe ist bei jedem anders. Ich klicke in Photoshop auf das Vordergrundfarbfeld, wähle im angezeigten Farbauswahlfenster „Benutzerdefiniert“ und wähle es dann in der „Farbbibliothek“ aus :)

4. Verwenden Sie Schwarz und eine Farbe. Beispielsweise wirken knallrote Schriften mit schwarzem Rand sehr „sprunghaft“.

Bei der Farbabstimmung auf Webseiten ist Folgendes tabu:

1. Verwenden Sie nicht alle Farben, versuchen Sie, sich auf drei Farben zu beschränken.

2. Der Kontrast zwischen dem Hintergrund und dem vorherigen Text sollte so groß wie möglich sein (verwenden Sie niemals komplizierte Muster als Hintergrund), um den Hauptinhalt des Textes hervorzuheben

Farbabstimmung

1. Rot hat ein warmes Farbgefühl, einen starken und extrovertierten Charakter und ist eine Farbe, die auf Menschen sehr anregend wirkt. Rot zieht leicht die Aufmerksamkeit der Menschen auf sich, kann Menschen aber auch aufgeregt, aufgeregt, nervös und impulsiv machen. Es ist auch eine Farbe, die leicht zu visueller Ermüdung führen kann.

a) Wenn man Rot eine kleine Menge Gelb beifügt, wirkt es heißer, aufgeregter und unruhiger.

b) Wenn Sie dem Rot eine kleine Menge Blau hinzufügen, wird die Schärfe reduziert und das Rot wird eleganter und weicher.

c) Wenn man Rot eine kleine Menge Schwarz hinzufügt, wirkt der Charakter ruhig, schwer und einfach.

d) Durch die Beimengung einer kleinen Menge Weiß zu Rot wird der Charakter sanfter, er tendiert ins Zurückhaltende, Schüchterne und Zarte.

2. Der Charakter von Gelb ist kalt, arrogant, sensibel und vermittelt optisch den Eindruck von Ausdehnung und Ruhelosigkeit. Gelb ist die zarteste Farbe aller Farben. Sobald dem reinen Gelb eine kleine Menge anderer Farben beigemischt wird, verändern sich Farbton und Farbcharakter erheblich.

a) Wenn man Gelb eine kleine Menge Blau beifügt, entsteht daraus ein frisches Grün. Auch sein arroganter Charakter verschwindet und es weicht einem friedlichen und feuchten Gefühl.

b) Wenn Sie dem Gelb eine kleine Menge Rot hinzufügen, erhält es einen deutlichen Orangeton und sein Charakter ändert sich von kalt und arrogant zu maßvollem Enthusiasmus und Wärme.

c) Die größte Veränderung der Farbwahrnehmung und der Farbeigenschaften wird durch die Zugabe einer kleinen Menge Schwarz zu Gelb erreicht. Es entsteht ein komplexer Farbeindruck mit einem deutlichen Olivgrün. Auch seine Farbe und Persönlichkeit werden reif und gelassen.

d) Durch die Zugabe einer kleinen Menge Weiß zu Gelb wird die Farbe weicher und ihre Kälte und Arroganz werden abgeschwächt, wodurch sie subtiler und zugänglicher wird.

3. Die Farbe Blau hat einen kalten Charakter, ist schlicht und introvertiert. Sie hilft, den Geist der Menschen zu beruhigen. Die Einfachheit und der introvertierte Charakter der Farbe Blau bieten den Farben mit aktiver Persönlichkeit und starker expansiver Kraft häufig einen tiefen, weiten und friedlichen Raum und werden so zu einem freundlichen und bescheidenen Freund, der die aktiven Farben in Szene setzt. Blau ist außerdem eine Farbe, die selbst nach Verdünnung ihre starke Persönlichkeit zu behalten scheint. Wenn Sie Blau eine kleine Menge Rot, Gelb, Schwarz, Orange, Weiß oder andere Farben hinzufügen, hat dies keine nennenswerten Auswirkungen auf den Charakter von Blau .

a) Wenn Orange einen höheren Gelbanteil hat, tendiert sein Charakter in Richtung süß, leuchtend und wohlriechend.

b) Das Mischen einer kleinen Menge Weiß mit Orange kann dazu führen, dass die Farbe Orange ängstlich und schwach erscheint.

4. Grün ist eine Farbe, die aus zwei Komponenten besteht: Gelb und Blau. Bei Grün gleichen sich die Ausdehnung des Gelbs und die Kontraktion des Blaus aus, und die Wärme des Gelbs und die Kälte des Blaus werden ausgeglichen. Dies macht den grünen Charakter zum friedlichsten und stabilsten. Es ist eine sanfte, ruhige, friedliche und schöne Farbe.

a) Wenn Grün einen höheren Gelbanteil hat, tendiert der Charakter dazu, lebhaft, freundlich und kindlich zu sein.

b) Wenn Sie Grün eine kleine Menge Schwarz hinzufügen, verleiht dies seinem Charakter einen feierlicheren, kultivierteren und reiferen Charakter.

c) Wenn Sie Grün eine kleine Menge Weiß hinzufügen, wirkt der Charakter sauber, erfrischend und frisch.

5. Die Helligkeit von Lila ist von allen Farbpigmenten die geringste. Die geringe Helligkeit von Lila vermittelt den Menschen ein trübes und geheimnisvolles Gefühl.

a) Ist der Rotanteil in Violett höher, wirkt die Wahrnehmung beklemmend und bedrohlich.

b) Wenn Sie Lila eine kleine Menge Schwarz hinzufügen, wirkt die Farbe matt, traurig und beängstigend.

c) Durch die Zugabe von Weiß zu Lila kann der stumpfe Charakter von Lila verschwinden und es wird elegant, zart und voller femininem Charme.

6. Die Farbe Weiß ist hell und hat einen einfachen, reinen und fröhlichen Charakter. Weiß ist heilig und unantastbar. Wenn Weiß eine andere Farbe hinzugefügt wird, beeinträchtigt dies seine Reinheit und lässt seinen Charakter subtiler werden.

a) Wenn Sie eine kleine Menge Rot mit Weiß mischen, entsteht ein hellrosa Farbton, der frisch und verführerisch ist.

b) Wenn Sie eine kleine Menge Gelb mit Weiß mischen, erhalten Sie eine cremige gelbe Farbe, die duftend und fettig wirkt.

c) Das Mischen einer kleinen Menge Blau mit Weiß vermittelt den Menschen ein kühles und sauberes Gefühl.

d) Weiß wird mit einer kleinen Menge Orange vermischt, was ihm eine trockene Atmosphäre verleiht.

e) Das Mischen einer kleinen Menge Grün mit Weiß vermittelt den Menschen ein zartes und weiches Gefühl.

f) Das Mischen einer kleinen Menge Lila mit Weiß kann dazu führen, dass Menschen es mit einem schwachen Duft assoziieren.

Der obige Artikel, in dem kurz auf Farbabstimmungstechniken für Webseiten eingegangen wird (ein Muss für Frontend-Entwickler), ist alles, was ich mit Ihnen teilen möchte. Ich hoffe, er kann Ihnen als Referenz dienen und ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden.

Original-URL: http://www.cnblogs.com/androidshouce/archive/2016/07/25/5702280.html