it-swarm.com.de

Welche Auswirkung hätte ein Graustufenfarbschema auf UX?

Ich denke darüber nach, eine Website zu entwerfen, die keine andere Farbe als Schwarz, Grau und Weiß (einschließlich Links) hat.

Beeinträchtigt das Fehlen von Farben wie Blau, Grün usw. die Benutzererfahrung meines Designs? Wenn ja, wie?

80
user4662

Ich denke darüber nach, eine Website zu entwerfen, die keine andere Farbe als Schwarz, Grau und Weiß hat.

Darf ich fragen, was die Gründe für diese Entscheidung sind? Der Grund, den ich frage, ist, dass ich nicht denke, dass ein reines Schwarzweiß für die meisten kommerziellen Designs geeignet ist, es sei denn, das Branding des Kunden passt zu diesem Schema. Bevor Sie sich für diese Route entscheiden, stellen Sie sicher, dass Ihre Entwurfsentscheidung für Ihre Arbeit geeignet ist.

Trotzdem können Schwarzweiß-Websites wunderschön sein!

Aufgrund des Mangels an Farben können einige Elemente ihre typische Leistung verlieren. Sie müssen sie also beim Styling berücksichtigen:

Textlinks

Mit farbigen Links können Sie davonkommen, wenn Sie sie nicht unterstrichen lassen. Bei schwarzen Links müssen Sie diese entweder unterstreichen (obwohl dies zu Lesbarkeitsproblemen in einem großen Textblock mit starker Verknüpfung führen kann) oder sie anders gestalten. Eine typische Lösung, die ich gesehen habe, besteht darin, Links eine schwache graue Hintergrundfarbe oder eine gepunktete Unterstreichung mit heller Farbe zu geben.

Schaltflächen

Die meisten minimalistischen Schwarzweiß-Sites haben eine "flache" Schnittstelle. Daher sehen Ihre typischen 3D-Schaltflächen mit dem Gesamtdesign möglicherweise nicht richtig aus. Wenn Sie durchgehend mit dem flachen Look arbeiten möchten, verwenden Sie möglicherweise auch einen "flachen" Schlagschatten. Auf diese Weise behalten Sie die Designkonsistenz bei und erzielen die Erschwinglichkeit der Schaltflächen.

Lesbarkeit

Einige künstlerische Websites verwenden weißen Text auf schwarzem Hintergrund. Dies ist in Ordnung, da die Kopien normalerweise kurz sind und eher zum Scannen als zum Lesen gedacht sind. Die Art dieser Websites ist eher ein Schaufenster für Fotografie oder andere Arten von Kunstwerken. Bei Websites mit hohem Textanteil würde ich jedoch vermeiden, ein dunkles Thema zu erstellen. Ich habe den harten Weg gelernt. Ich musste das Design wegen überwiegend negativer Rückmeldungen ziehen.

Bilder

Wenn der Inhalt vom Benutzer generiert wurde (wie in, außerhalb Ihrer Kontrolle), müssen Sie überlegen, ob er mit dem Rest des Website-Designs richtig aussieht. Aber normalerweise ist dies kein allzu großes Problem.

Es gibt wahrscheinlich noch mehr Probleme, das ist alles, woran ich jetzt denken kann.


Es gibt einige Techniken, die Sie bei Schwarzweißdesigns verwenden können:

Leerraum und Gruppierung :

www.rodrigogalindez.com

Sie haben keine Farben, um die Hierarchie der Elemente auf der Site hervorzuheben, und müssen auf typografische Behandlungen und die Verwendung von Leerzeichen zurückgreifen. Ich empfehle das Lesen von The Gestalt Principles .

Weiß als Farbe

metro gallery

ClearType Press

Dies ist eine meiner Lieblingstechniken. Wenn Sie den Hintergrund der Website oder des Inhaltsbereichs grau oder hellgrau gestalten, können Sie Weiß als Akzentfarbe verwenden. Dadurch erhalten Sie eine zusätzliche Farbe. Auch der subtile Unterschied zwischen Weiß und Hellgrau legt die Layoutstruktur fest.

Fettgedruckte Fotoaussage

Subtraction.com

Natürlich können Sie dies auch mit einer farbenfrohen Site tun. Mit dem minimalistischen Design, das typisch für Schwarzweiß-Websites ist, erhalten Fotos zusätzliche Aufmerksamkeit. Sie sind normalerweise das Eckstück der Website oder ein bestimmter Inhaltsartikel.

Grau hat Temperaturen

cool gray # e8ecec warm gray # ecece8 mikemcquade.com/

Grau ist eine magische Farbe. Sein neutraler Ton kann sich wie eine Illusion ändern, die auf den umgebenden Farben basiert. Bei einem reinen Schwarzweißdesign können Sie die Stimmung der Site dennoch beeinflussen, indem Sie ein warmes oder kaltes Grau wählen. Natürlich ist dies technisch gesehen ein Betrug, da es sich nicht um eine reine Graustufe handelt.

Verwenden Sie Muster

Erratic Wisdom

Nur weil Sie ein paar feste Farben zum Spielen haben, heißt das nicht, dass die Website leer sein muss. Sie können subtile geometrische Muster verwenden, um der Site mehr visuellen Glanz zu verleihen. Verwenden Sie es natürlich angemessen, damit es nicht ablenkt. http: //www.squidfingers.com/patterns/ hat einige ausgezeichnete geometrische Muster, die leicht in Graustufen umgewandelt werden können.


Hier sind einige ziemlich gute Websites, die minimalistische S/W-Designs präsentieren. (Nicht alle Designs sind jedoch rein s/w)

117
Jin

Es kann möglicherweise die Navigation erheblich vereinfachen, solange es richtig ausgelegt ist. Die Verwendung von Farbe ist eine gute Möglichkeit, die Aufmerksamkeit zu lenken, ist jedoch nicht erforderlich. Großartige Benutzeroberflächendesigns sollten in Schwarzweiß eigenständig stehen können. Das ist der wahre Test für ein großartiges Design.

Bearbeiten: Eine einfache, aber sehr saubere und elegant aussehende Seite ist Jin Yangs Blog

Schauen Sie sich auch diese große Galerie mit ausschließlich schwarzen und weißen Websites an: Nicht, dass alle diese Websites ein großartiges UX-Design haben, aber die meisten sind ziemlich gut und sehen nicht alt oder veraltet aus.

7
Matt Rockwell

Ich denke, es könnte ein Problem geben: Ohne Farbe es ist ziemlich schwierig, Zustände von Objekten deutlich genug zu machen (z. B. aktiv gegen inaktiv oder Link gegen besuchten Link). Ich sage nicht, dass es unmöglich ist - aber Sie benötigen ein cleveres grafisches Designkonzept.

Es wäre toll zu sehen, was Sie sich einfallen lassen!

7
Phil

Es gibt nur einige wissenschaftliche Beweise für Farbeffekte, hauptsächlich kulturelle, wirtschaftliche und soziale. In dieser Hinsicht besteht die Antwort auf Ihre Frage darin, Ihren Benutzer zu kennen.

In Bezug auf die visuelle Aufmerksamkeit würde ich argumentieren, dass ein monochromatisches Design UX nicht beeinflusst. Salience ist ein wichtiger Faktor bei der Betrachtung eines Designs. Und es gibt viele Dimensionen der Salienz. Eines davon hast du erwähnt.

Farbe besteht aus drei integrierten Dimensionen: Farbton, Wert und Sättigung. Wenn Sie den Wert von Schwarz ändern, werden verschiedene Grautöne erzeugt. Der erzeugte Kontrast ist ein sehr effektiver Aspekt der Salienz. Einige andere sind Leerzeichen, Muster und Größe.

Tatsächlich kann eine Reihe von Farbtönen in einem Design verwendet werden, aber sie bewirken nichts im Vergleich zu einer Reihe von Werten für die Steuerung des visuellen Flusses. Biologisch können nur 2 Grad unseres gesamten Gesichtsfeldes einen Farbton erkennen. Der Rest erkennt Licht, Dunkelheit und Muster.

In diesem Fall wird ein Benutzer schnell lernen, sich nicht um eine vollständige Seitenleiste mit lebendigen, auffälligen Farben zu kümmern. Jeder, der während des Dotcom-Booms online war, ist Zeuge davon.

6
ashley

Dies wird sich definitiv auf die Benutzererfahrung auswirken. Ich würde nicht sagen, dass Affekte schlecht sind. Aber es wird die Erfahrung in Bezug auf Aussehen und Gefühl beeinflussen. Vielleicht Film Noir oder ein puristischer Bauhaus-Touch? Zum Beispiel deuten Schwarzweißfotos immer auf "Ich bin alt" hin. Hängt davon ab, in welchem ​​Stil Sie diese "Farben" verwenden. Es wird mit Sicherheit eine Herausforderung sein und Sie sollten das Ergebnis teilen. :) :)

Versuchen Sie, beim Entwerfen aktiver Elemente sehr kohärent zu sein. Zum Beispiel Links, Schaltflächen usw. Da Sie keine Farben verwenden, benötigen Sie eine visuelle Sprache, die mit Schwarzweiß arbeitet und dem Benutzer immer noch ruft: "Hey, benutze mich, ich bin aktiv".

4
erikrojo

Wenn Sie daran denken, die Farbe loszulassen, um eine ausgewogenere Benutzeroberfläche beizubehalten und sich auf die gesamte Benutzeroberfläche zu konzentrieren, anstatt nur die Farben zu verbessern, könnte dies sogar eine Verbesserung Ihrer Benutzeroberfläche darstellen. Für diejenigen, die anders argumentieren, könnten sie davon profitieren, einige Texte aus dem Bauhaus, dem Konstruktivismus und verwandten Bewegungen zu lesen.

Farbe ist im modernen Druck und vor allem im Webdesign „billig“ geworden. Dies hat Designer zu der Annahme veranlasst, dass sie mit monochromen Layouts nicht dieselben (oder vielleicht bessere) Ergebnisse erzielen können. Um ehrlich zu sein, wenn Sie talentiert genug sind, brauchen Sie keine Farben, um Ihre Botschaft im Design einer Website zu vermitteln. Farben können die konnotative Botschaft, die Sie übermitteln möchten, verbessern. Wenn das Design jedoch gut ist, wirken die Farben nur als Verstärker und wirken sich nicht auf die Hauptbotschaft aus. Dies könnte auch der Grund sein, einen echten Designer für Ihre Site einzustellen. Beim Design geht es nicht nur um Schriften und Layout. Jeder Kerl, der genug Websites/Drucke gesehen hat und ein bisschen gesunden Menschenverstand hat, kann Sachen von hier und da kopieren. Normalerweise ist etwas mehr Wissen/Einsicht erforderlich, um dieselbe Nachricht mit Einschränkungen wie einer monochromen Site zu übermitteln.

Bei einem anderen Thema möchten Sie möglicherweise feststellen, dass # e8ecec und # ecece8 (in einer der vorherigen Antworten erwähnt) keine Graustufen sind. Um echte Graustufen zu sein, müssten sie für jede der drei grundlegenden Webfarben die gleichen Werte haben.

# ecece8 ist ein Blauton und # e8ecec ist ein Rotton. Echte Grautöne würden dem # xxyyzz-Muster folgen, wobei xx == yy == zz.

3
Luis

Wenn Sie keine Farbe haben, wirkt sich dies definitiv in vielerlei Hinsicht auf die Benutzererfahrung aus. Wie von anderen Designern erwähnt, helfen Farben dabei, die Zustände der Benutzeroberfläche anzuzeigen und die Aufmerksamkeit des Benutzers auf bestimmte Elemente zu lenken. Darüber hinaus erzeugen Farben auch die Stimmung oder das Gefühl der Website. Ex. Ich mag die Farbe Blau und deshalb mag ich Websites, die ein blaues Farbschema haben.

Es ist jedoch durchaus möglich, die erwähnte Erfahrung nur mit Schwarz, Weiß und Grau zu erzeugen. Es wird großartig sein, Beispiele dafür zu sehen.

Zeit zum Erkunden ..

2
Poyi

Schwarz/Weiß/Grau klingt für mich gut, aber Sie werden möglicherweise nicht so viele Klicks erhalten, wie Sie benötigen, wenn die Textlinks nicht die herkömmliche blaue Farbe haben. Einige Leute werden es sonst nicht bekommen.

Eine Möglichkeit, Ihr Konzept zu testen, besteht darin, Ihren Monitor in den Graustufenmodus zu versetzen. Mein Samsung unterstützt dies - Ihr Monitor verfügt möglicherweise nicht über diese Menüeinstellung, gibt Ihnen jedoch eine Vorstellung davon, wie das Web ohne Farbe aussieht.

Sie können auch verschiedene Stylesheets verwenden, um IE Benutzer die blauen Links und Mac-Benutzer (die bereits eine monochrome Oberfläche haben) das graue Aussehen zu geben.

2
ʍǝɥʇɐɯ

Ich persönlich mochte B & W (sprich: Graustufen) mit kleinen Pastellstreuseln als Highlights; Wenn Ihre Seite hauptsächlich aus Graustufen besteht, ist es viel einfacher, die Aufmerksamkeit auf bestimmte Elemente zu lenken, indem Sie diese Glanzlichter in Farbe setzen. Auf der anderen Seite wird ein farbenfrohes Highlight auf einer Vollfarbseite oder ein Schwarzweiß-Highlight auf einer Vollfarbseite viel leichter übersehen.

0
Lie Ryan

In meiner Desktop-Anwendung verwende ich die Farbcodierung, um verschiedene Datentypen schnell zu identifizieren. Beispiele: Alle positiven Währungsbeträge sind grün, negative sind rot mit einem negativen Symbol links neben dem Betrag, blinkende rote Daten sind Warnungen, wichtige Daten sind hell gelb, Daten sind cyan, alle Feldbeschriftungen sind weiß usw.

Ich verwende auch einen schwarzen Hintergrund als "hohen Kontrast", um Benutzern das schnelle Auffinden von Daten zu erleichtern und ihren Augen mehr Ruhe zu geben!

In der Abbildung unten verwende ich sogar eine Farbcodierung, um Edelmetalle wie Gold und Platin darzustellen.

enter image description here

0
Frank R.