Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Illustrator CC 2015 für Webdesigner: Wireframing

Auswahl eines Farbschemas für ein Grundgerüst

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Das Video beschreibt die Unterschiede zwischen einem Mock-up (fertiger Designentwurf) und einem Wireframe (Grundgerüst) und verdeutlicht, warum zu einem frühen Zeitpunkt der Designarbeit ein Farbschema in Grautönen Vorteile gegenüber Farben hat. Zusätzlich erfahren Sie, wie Sie ein solches Farbschema in Illustrator anlegen können.

Transkript

Lassen sie uns zunächst zwei Begriffe klären, das Wireframe und das Mockup, da diese Begriffe in der Branche üblich sind, und es ist gut wenn man weiß, welche Bedeutung den beiden zukommt. Im Gegensatz zu einem komplett fertigen Designentwurf, das ist das sogenannte Mockup, verzichtet man in einem Grundgerüst, das ist das Wireframe, auf einige Dinge, die in einem fertigen Design enthalten sein müssen. In einem Wireframe geht es nur darum, Hauptobjekte aufzuzeigen und die Beziehungen zwischen diesen zu verdeutlichen, und gegebenenfalls auch eine gewisse Hierarchie sichtbar zu machen, nach der der spätere Benutzer interagieren soll. In diesem Video beschreibe und begründe ich Ihnen meine Vorgehensweise mit einem Farbschema, das vollständig in Grautönen gehalten wird, und demonstriere wie ein solches Farbschema in Illustrator angelegt wird. Was wir hier sehen ist ein App-Entwurf für eine Anwendung, die auf die Twitter- Zeitleiste zugreift. Ich bin sicher, dass sie alle Twitter kennen. Aber für diejenigen, die nicht ganz so vertraut damit sind, ein paar Hinweise. Es handelt sich um ein soziales Netzwerk, in dem sie Beiträge verfassen können, die aus nicht mehr als 140 Zeichen bestehen. Was wir hier sehen, das ist kein Grundmodell, kein Wireframe. Sondern, das ist das bereits fertige Mockup, eben das Endergebnis eines Designentwurfs für eine Website oder eben wie hier eine Online-Applikation. Nun kann es aber in der Anfangs phase recht problematisch werden, wenn Sie all diese Elemente bereits eingearbeitet haben und Ihrem Auftraggeber oder Kunden präsentieren. Schauen wir uns das mal ganz kurz im Wechsel an: Ich habe also hier zwei Zeichenflächen. Einmal das Mockup, was Sie gerade sehen und einmal das Wireframe. Klick auf das Wireframe aus. Und jetzt sehen Sie: hier gibt es keine Farben, es gibt keine Bilder, sondern nur, ja, Grautöne, schwarz-weiße Kontraste etc.. Der Grund ist folgender: Wenn man sich das Mockup zu diesem Zeitpunkt, zu einem ganz frühen Zeitpunkt in der Designarbeit, betrachtet, dann wird sofort die Aufmerksamkeit logischerweise auf die Farben gelenkt, auf die Symbolik, die Sie verwenden oder die Sie verwenden möchten, ja sogar auf einzelne Bilder und Grafiken. Und ich garantiere Ihnen, was jetzt passieren wird, ist, dass der Kunde sich sofort auf diese Elemente stürzt. Bei der Grafik sagt er vielleicht, das ist mir aber zu klein oder Kann man hier nicht vielleicht noch einen anderen Kontrast wählen und haben wir da nicht noch ein anderes Bildchen, sie verstehen, was ich meine? Schaut man sich das auf dem Wireframe an, dann sieht das anders aus, da gibt es nicht diese Möglichkeit sich direkt darauf zu stürzen. Ich möchte das auch nicht abwertend bezeichnen. Das ist eine ganz normale Handlung. Ich mache das ja genauso. Ich denke Ihnen geht es ebenso, wenn Sie auf das Mockup schauen. Dann schaut man direkt auf die Profilbilder, auf die Farben. Das ist ja der Sinn einer solchen Auswahl Designelemente. Das Wireframe hingegen beschränkt sich auf, nun ja, die Besonderheit, die zu diesem Zeitpunkt wirklich wichtig ist, und was ist das? Wichtig ist, dass der Benutzer, der spätere Benutzer erkennen muss, wo er sich befindet, oder was er gerade auf dem Bildschirm zu sehen bekommt. Des weiteren muss er doch sehen, wie er diese Applikation benutzen muss. Und das sind diese etwas in grau gehaltenen Bereiche, also zum Beispiel hier kann er drauf klicken, um später sein eigenes Profil zu bearbeiten, hier soll er drauf klicken, um eine neue Nachricht zu erstellen, auch dabei habe ich mir was gedacht. Der Daumen, also, wenn man jetzt von einem Rechtshänder ausgeht, wird sich auf dieser Seite befinden und entsprechend wird er mit dem Finger hoch wandern und klickt hier drauf Und kann die Nachricht erstellen. Aber das ist noch nicht ganz so wichtig zu diesem Zeitpunkt, wichtig ist nur, dass das zwei Buttons sind, zwei Schaltflächen, die der Benutzer später benutzen muss. Genauso wie der Klick hier auf Profilbilder. Also sie sehen auch, ich kann damit auch signalisieren was sind BenutzerElemente die später eine Interaktion erfordern, und was muss er sich nur betrachten und natürlich in einer Zeitleiste, in einer Timeline ist es wichtig, dass der Text zu lesen ist, also ist er auch in dunklen Farbtönen gehalten. Was vollkommen uninteressant ist, zu diesem Zeitpunkt ist: 32 neue Nachrichten. Das ist irrrelevant, denn das ist eine Information, die wird später erscheinen, aber die hat zu diesem Zeitpunkt, wo es um Interaktion, Beziehungsnähe der Objekte und vor allen Dingen auch die Hierarchie der Benutzung geht, die Hierarchie der benutzung erhöht. eigentlich gar nichts verloren. So und ein solches Farbschema, wie kann man das anlegen? Das geht am allerbesten über die Farbfelder in Illustrator, und Illustrator bietet uns da bereits vorgefertigt eine solche Liste an. Aber die ist mir in den meisten Fällen immer zu aufwändig, denn je mehr an Farben Sie zur Auswahl haben, desto mehr nutzen Sie sie gegebenfalls auch, also selbst bei Grautönen. Meine persönliche Erfahrung ist, dass ich am besten mit fünf unterschiedlichen Grautöne zurechtkomme. So und dafür lege ich mir hier unten, durch Klick auf Neue Farbgruppe, eine solche an und bezeichne die als Wireframe. Und hier hinein kopiere ich dann, da habe ich jetzt den weißen Ton bereits drin, hier hinein kopiere ich den schwarzen, dann nicht den ganz dunklen sondern den etwas weniger grauen, also hier den dritten von links aus dieser Liste, das wäre dann entsprechend für alle meine Schaltflächen. Dann möchte ich noch einen etwas helleren Grauton haben, vielleicht sogar noch einen, ich glaub der war ein bisschen zu ..., ich nehme mal den nächsten, den hier, so, etwas hellerer Ton. Ja, und dann nochmal einen ganz hellen Grauton für die restlichen Elemente, die jetzt vielleicht noch weniger wichtig sind. Also wir haben jetzt hier diesen dunklen, den etwas helleren, das ganz helle, und natürlich das Weiß und das Schwarz, und ich komme persönlich mit fünf Tönen am besten zurecht. Um das auch nochmal deutlich zu sagen, Sie müssen keine Grautöne verwenden. Das können Sie halten, wie Sie möchten, Sie können auch mit Farben arbeiten. Aber Farben haben immer eine bestimmte Wirkung und deswegen arbeite ich persönlich lieber mit Grautönen. Auch müssen Sie keine fünf nehmen, Sie können auch nur vier nehmen. Ja, das liegt ganz bei Ihnen, wie Sie etwas herausstellen möchten. Für mich ist es so, und deswegen empfehle ich das auch, dass diese fünf Elemente vollkommen ausreichen. Und die lege ich mir quasi in jedem neuen Wireframe, also in jedem Grundgerüst, das ich aufbaue, an und daran halte ich mich auch konsequent mit diesen fünf Farben zu signalisieren: Hey, das ist das wichtigste, die hier oben in der Titelleiste, auf diese Elemente musst du klicken. Hier muss das Auge entlang geführt werden, und all das kann ich eben. mit diesen Angaben sehr gut. Damit wissen Sie, wie Sie in ihrem Grundgerüst, das Wireframe, ein Farbschema anlegen, und warum Grautöne besser sind als Farben.

Illustrator CC 2015 für Webdesigner: Wireframing

Lernen Sie, wie Sie die Boardwerkzeuge von Illustrator CC nutzen, um aus ihren Design-Ideen Wireframes zu erstellen

2 Std. 14 min (19 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Hersteller:
Exklusiv für Abo-Kunden
Erscheinungsdatum:20.06.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!