it-swarm-eu.dev

Verwenden von Farbe in Drahtgittern ... ist dies ein "Nein Nein"?

Kürzlich wurde eine interne Debatte über die Verwendung von Farbe in Drahtgittern eingeleitet. Ein Junior-Designer hatte einen schönen Satz Drahtgitter fertiggestellt und wurde am Ende angewiesen, alles in Graustufen umzuwandeln! Ihnen wurde gesagt, dass Farbe nicht in Drahtgittern sein sollte.

Ich kann einige Gründe erkennen, aus denen das Entwerfen in Graustufen hilfreich sein kann:

  • für die Zugänglichkeit (so dass Sie nicht gezwungen sind, sich zur Unterscheidung auf Farben zu verlassen)
  • um nicht zu verwechseln, visuelles Design in Drahtgittern zu kommunizieren (manchmal können Kunden eine Farbauswahl als visuelle Designentscheidung im Gegensatz zu einer Möglichkeit zur Kommunikation visueller Unterschiede zuordnen).

Ich verwende tatsächlich eine Palette farbiger Symbole und verwende Farben, um visuelle Unterschiede zu kommunizieren. Manchmal kann man nur so viel mit verschiedenen Graustufen oder Mustern anfangen.

Was ist die Standardpraxis da draußen? Ich habe Drahtgitter mit und ohne Farbe gesehen.

22
milesmeow

Klingt so, als hätten sich Ihre Kollegen ein wenig in Annahmen verloren, ohne darüber nachzudenken, was der Zweck eines Drahtgitters ist. Beginnen wir mit eine lose Definition von Wikipedia :

Ein Website-Wireframe (auch "Web-Wire-Frame", "Web-Wireframe", "Web-Wireframe") ist eine grundlegende visuelle Anleitung für das Interface-Design, um die Struktur einer Website und die Beziehungen zwischen ihren Seiten vorzuschlagen. Ein Webseiten-Drahtmodell ist eine ähnliche Darstellung des Layouts grundlegender Elemente in der Benutzeroberfläche. In der Regel werden Drahtgitter fertiggestellt, bevor ein Bildmaterial entwickelt wird.

Wie bei jedem Wort oder Begriff ist es wichtig zu überlegen, was es wirklich bedeutet. A Drahtmodell ist ein Begriff, der in der 3D-Modellierung verwendet wird, wenn es um die Darstellung der physikalischen Struktur eines polygonalen Modells geht, das durch Anzeigen von Verbindungspunkten zwischen Scheitelpunkten gerendert wird. Was bringt ein Drahtmodell? Es geht darum, den "Mut" einer Struktur zu zeigen, um ihre Zusammensetzung besser zu verstehen.

Bei der Übertragung auf das Website-Wireframing, wie es in Wikipedia erläutert wird, sollten wir überlegen, wie diese Bedeutung gilt, und die Definition von Wikipedia lautet: "Ein grundlegender visueller Leitfaden, der verwendet wird, um die Struktur einer Website und die Beziehungen zwischen ihren Seiten vorzuschlagen.".

Wie Sie sehen, wird weder die Farbe noch das Aussehen dieser visuellen Anleitung erwähnt. Alles was zählt ist, dass es vorschlägt, wie die Struktur der Website funktioniert. Solange dies erreicht wird, handelt es sich um ein effektives Drahtmodell. Dies sind zum Beispiel alles "gültige" Drahtmodelle:

  • skizzen auf einer Serviette
  • skizzen in 37signals 'Draft oder einer anderen App auf dem iPad
  • skizzenhaft aussehende Drahtgitter, die mit einem Werkzeug wie Balsamiq Mockups erstellt wurden
  • eng aussehende Drahtgitter, die mit Axure oder Illustrator erstellt wurden
  • leichte Designs einer in Photoshop erstellten Site, bei der die Struktur der Seite sichtbar gemacht wird und gegebenenfalls Designelemente einbezogen werden
  • HTML-exportierbare Designs in Fireworks, mit denen Sie sehen können, aus welchen Elementen eine Seite besteht
  • vollständig interaktive HTML/CSS-Drahtmodelle

Es ist nur eine Frage der Treue und des Details. Vielleicht sollten Sie klarstellen, welche Art von Wiedergabetreue im Ergebnis erwartet wird, und Ihre Designer auf diesem Weg führen. Es geht aber nicht darum, "sollte Farbe in einem Drahtmodell verwendet werden" - wenn Farbe die Kommunikation der Site-Site unterstützt, sollte unbedingt Farbe in einem Drahtmodell verwendet werden!

18
Rahul

Einverstanden.

Typischerweise bringt Farbe emotionale/kulturelle Obertöne in eine Diskussion, bei der es angeblich um Grundstruktur, Layout und IA (Informationsarchitektur) geht. Während dies diskutiert werden kann, können wir uns darauf einigen, dass die Verwendung von Farbe dem Rendering zumindest MEHR Informationen übermittelt.

Der springende Punkt des Drahtgitters ist, NUR das Notwendige und sonst nichts zu kommunizieren.

Nach meiner Erfahrung in der Praxis verwenden die Leute den Begriff "Drahtmodell", um jedes einzelne der Artefakte zu bezeichnen, die Rahul auflistet.

7
CSSian

Nach meiner Erfahrung ist dies hauptsächlich der zweite Grund, den Sie aufgelistet haben:

  • Manchmal werden sogar interne Stakeholder durch Drahtmodelle verwirrt, die zu "echt" aussehen. Meine Axure-Modelle haben eine viel höhere Wiedergabetreue als andere in meiner Organisation verwendete PowerPoint-Modelle. Daher erhalte ich manchmal Kommentare, die mit Grafikdesign zu tun haben, z. B. Schaltflächen, die anders aussehen, oder Bedienfelder, die ihre Höhe nicht an ihren Inhalt anpassen usw.
  • Ein Freund von mir hat ein solches HiFi-Drahtmodell erstellt, dass der Kunde es so sehr liebte, dass er es sofort implementierte :)
6
Dan Barak

Ich bin von Graustufen zu Vollfarbe und wieder zurück gegangen. Ich finde, dass Vollfarben eine echte Ablenkung für die Diskussionen sind, die stattfinden müssen.

Nebenbei bemerkt, ich bin gerade in einem Projekt, in dem es keinen Grafikdesigner zwischen mir und den Entwicklern gibt, und so laufen "realistische" oder "wirklich hübsche" Drahtgitter Gefahr, so wie sie sind implementiert zu werden. Das garantiert so ziemlich eine Katastrophe, weil ich kein Grafikdesigner bin ...

5
gef05

Ein Nachteil der Farbe eines Drahtgitters besteht darin, dass einer Ihrer Entwickler früher oder später - zusammen mit (was als wahrgenommen wird) einer höheren Genauigkeit der Steuerelemente und dergleichen - davon ausgeht, dass die Benutzeroberfläche so aussehen muss . genau wie das Drahtmodell .

Ich kenne. Ich kenne. Dies weist auf ein schwerwiegendes Missverständnis über den Zweck eines Drahtgitters hin.

Aber es passiert wirklich.

4
JeromeR

Ich neige dazu, die Verwendung von Farbe zum Kommentieren von Komponenten zu reservieren. Ich stelle sicher, dass Textteile, die sich wie Hyperlinks verhalten sollen, blau und unterstrichen sind, auch wenn das endgültige Site-Design möglicherweise eine völlig andere Farbgeschichte aufweist. Textteile, die nicht statisch sind und je nach Benutzereingabe variieren, erhalten eine andere Farbe. Wenn es verschiedene Kästchen und Linien gibt, die zweifelhaft sind oder ich weiß, dass mehr Polieren erforderlich ist, werde ich diese so einstellen, dass sie rote Linien haben. Textblöcke, bei denen es sich um Anmerkungen handelt, die direkt über dem Drahtgitter abgelegt wurden, werden hellgelb gefüllt.

Es ist alles sehr beängstigend, visuell zu betrachten, aber es dient der Kommunikation. Nicht zu vertreten.

4
Erics

Persönlich denke ich, dass es in Ordnung ist, Farbe zu verwenden, wenn sie irgendeine Art von Funktionalität verleiht.

Ich neige dazu, Farbe für interaktive Elemente meiner Drahtgitter zu verwenden, z. B. Links und Schaltflächen, die blau sind. Dies hilft, die interaktiven Elemente bei der Präsentation für den Kunden klar hervorzuheben.

Ich habe auch Grün, Orange und Rot verwendet, um verschiedene Warnzustände in einer Liste von Elementen zu kennzeichnen. Ich fand, dass dies dazu beitrug, dem Client Funktionen schneller zu vermitteln, was in früheren, rein graustufigen Versionen weniger offensichtlich war.

Ich würde jedoch keine Farbe als dekoratives Element verwenden, zumindest nicht in frühen Drahtgittern oder Modellen. Wie einige andere geantwortet haben, können Kunden manchmal davon betroffen sein, wie etwas "aussieht" und wie es funktioniert. Dies kann den Prozess etwas verlangsamen.

2
Paj