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

Das Wireframe mit Beschriftungen und Hinweisen versehen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Hinweise und Beschriftungen dienen dem Verständnis der Benutzerführung. Das Video zeigt, wie Sie auf einfache Art Ihr Wireframe mit Hinweisen versehen.

Transkript

Nachdem ich mein Userinterface mit dem Verhalten des späteren Benutzers ausgestattet habe, ist der nächste Schritt, dass ich zum Beispiel Kommentare oder Hinweise oder Beschriftungen hinterlege und auch das möchte ich Ihnen kurz noch einmal demonstrieren. Ich wechsele also in die Ebene. Das Verhalten, das sperre ich mal und schalte mir das zu dem Zeitpunkt aus. Die Hinweise aktiviere ich, so. Dann die Beschriftung natürlich ein und den Schutz herausnehmen. So und wofür benutze ich so etwas? Also Beschriftungen, natürlich einmal für Erklärungen, aber in erster Linie eigentlich auch für die Demonstration, in welcher Reihenfolge ich meine Benutzung gedacht habe. Ja, und das bereite ich mal vor. Ich kann jetzt natürlich auch wieder ein Rechteck aufziehen und Nummer da rein schreiben aber es geht ja eben viel einfacher mit Illustrator: ich nehme jetzt hier einfach mal eine Zahl, vergrößere das ein klein bisschen, nehmen wir da mal 14, das ist auch zu klein, nehmen wir 36, das sieht glaub ich ganz gut aus. So, 36. Und jetzt kann ich mit meinem Aussehen-Bedienfeld hier natürlich ein wenig agieren. Und zwar füge ich mir hier nun einfach eine Fläche hinzu. So, und diese Fläche, die muss ich allerdings jetzt konvertieren, dass heißt, wir brauchen hier noch eine. Die Fläche, die brauchen wir für die Schriftfarbe und die Fläche für den Hintergrund. Damit ich das ganze umwandeln kann über Effekt, In Form umwandeln, Rechteck. Jetzt hab ich hier ein schwarzes Rechteck. Machen wir es ein bisschen kleiner. Ich glaub 10 und oder 10 10 müsste eigentlich hinhauen. Kann ich ein, das weiß ich, nein, geht nicht. Ich muss das also bestätigen und dann kann ich die Farbe umändern. Zum Beispiel in Gelb. So. Die Größe gefällt mir noch nicht so ganz ich führ nochmal hier einen Doppelklick auf das Rechteck aus. Machen wir es ein bisschen größer, machen wir mal 20 10. Das finde ich schön. Okay. Ja, und damit habe ich das quasi schon vorbereitet was ich benötige. Jetzt kann ich signalisieren, alles klar, hier, das erste Element, das platziere ich mal hier oben, ein bisschen größer. Und es wird deutlich, wofür man diese einzelnen Ebenen benutzen kann und auch sollte. Erstes, wo der Benutzer hinklicken soll, ist zum Beispiel dieses Element, das zweite Element. Das kopiere ich mir jetzt einfach mit der gedrückten Alt-Taste. Und ein Doppelklick hier rein, das ist eben, das schöne über dieses Aussehen-Bedienfeld. Ich muss mir jetzt keine Gedanken mehr darum machen, dass das nicht passt, sondern ich kann es einfach recht schnell kopieren, Doppelklick hinein, Doppelklick hinein, und das ist Nummer 3, dann machen wir Nummer 4 draus. Nummer 4, dann Nummer 5, genau hier an die Stelle. Nummer 5 und der letzte im Bunde, Nummer 6, so. Und jetzt sieht man, in welcher Reihenfolge ich meine Benutzung gedacht habe. Ja, das Ganze kann ich natürlich auch wieder kombinieren, indem ich zum Beispiel das Verhalten erneut mit einschalte. Jetzt sieht man, muss man eventuell das Verhalten auch nochmal anpassen, weil das ist jetzt nicht ganz so schön. Also dann lieber hier an dieser Position, der Rest passt und damit ist das ganze auch in der Form vorbereitet. Ja, und es wird deutlich, wofür man diese einzelnen Ebenen benutzen kann und auch sollte. Wir haben das Verhalten des Users, und wir haben jetzt Beschriftungen, die wichtige Informationen zum Benutzerverhalten noch beinhalten können. Es kann natürlich auch noch weitaus mehr sein. Der Unterschied zwischen der Beschriftung und den Hinweisen, den verwende ich in der Regel dahingehend, dass ich in die Hinweise interne Bemerkungen hineinschreibe oder auf Fragen, die mir bei der Designerstellung kommen, die ich später beim Kundengespräch klären möchte, Hinweise für das Team, Fragen für das Team, Hinweise für den Kunden und Fragen für den Kunden. Also alles für quasi eine Besprechung. Und somit sehen Sie, wie Sie nicht nur das Verhalten, nicht nur die Bedienelemente, sondern auch viele weitere Informationen in Ihr Design mit Illustrator einarbeiten können.

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!