Illustrator CC 2015 für Webdesigner: Wireframing

Die passende Ebenenstruktur für ein Grundgerüst anlegen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Ebenen in Illustrator ermöglichen einheitliche Strukturen und Übersichtlichkeit. Zusätzlich erlauben sie, relevante Informationen ein- oder auszublenden. Dieses Video schlägt vor, wie eine solche Ebenenstruktur angelegt werden kann und wie sie in einem Designprozess aufgebaut sein kann.

Transkript

Ein weiteres Werkzeug, was ich bei der Erstellung von Wireframes, von Grundgerüsten für unverzichtbar in Illustrator halte, ist das Bedienfeld der Ebenen. Die Ebenen sind genauso wichtig wie ein zuvor einheitlich erstelltes Farbmodell, und auch hier sollte man immer mit einer gleichen Struktur an sein Grundgerüst, an das Wireframe herangehen. Und wie man so ein Grundgerüst aufbaut, solch ein Ebenenmodell aufbaut, das zeige ich ihnen diesem Video. Ich habe also hier mein Grundgerüst für die Applikationsentwicklung und schauen wir uns dann mal die Ebenen an: Hier gibt es einmal eine Ebene, die platziere ich ganz nach unten, die beinhaltet zum Beispiel solche Grundformen, wie hier das Iphone, dort habe ich weitere Elemente, die ich abgespeichert habe, wie ein Ipad, wie ein Desktoprechner also von der Seite her immer solche Grund strukturen und natürlich sämtliche Elemente, die in dieser Benutzeroberfläche eine Bedeutung haben. Also wenn man das auschaltet, sieht man jetzt gar nichts mehr. Und dort hinein packe ich quasi alle Elemente der Benutzeroberfläche oder was sie auch sehr häufig hören und sehen ist das Userinterface, kurz UI. Dann habe ich eine weitere Ebene für Bemerkungen und die Bemerkungen, die verwende ich dergestalt, dass ich also hier im Team auf bestimmte Hinweise hindeuten möchte oder natürlich auch später bei der Kundenpräsentation verdeutlichen möchte, was hat es denn jetzt hier mit diesen einzelnen Elementen auf sich. Und dann gibt es eine Ebene, in der ich das Benutzerverhalten klar mache und signalisiere, wie mit den einzelnen Components, also den einzelnen Objekten oder Komponenten umzugehen ist. Und last but not least noch eine Hinweisebene, die intern im Team benutzt wird, wo wir quasi Gedanken hineinschreiben oder auch Kommentare für die nächste Besprechung. Schauen wir uns das mal kurz an: wir haben also hier das Bemerkungsfeld oder die Bemerkungsebene, und wenn ich die aktiviere, dann sieht man, dass ich jetzt zum Beispiel hier mit dieser Schaltfläche den Zugriff auf das Benutzerprofil gestatten möchte. Dann haben wir hier den Twitter-Avatar, also das heißt das Bildchen, das Benutzerbildchen oder das Benutzerprofilbild, das hinterher hier angezeigt werden soll. Hier ist die Schaltfläche für neue Nachrichten zu erstellen. Ja, und das gesamte hier unten ist die eigentlich aktive Zeitleiste. Und somit weiß dann auch der Kunde, oder der Auftraggeber oder natürlich jeder, den das interessiert, was es mit den Elementen auf sich hat. Und das schöne ist, man kann eben diese Ebenen ein- und ausblenden und somit, Ja, genau zu dem Zeitpunkt auch aktivieren, wann man sie benötigt. Für mich ein ganz entscheidendes Prinzip ist, meinem Auftraggeber zu verdeutlichen, wie ich mir in meinem Design die Benutzerführung und auch das Benutzer verhalten vorstelle. Und das signalisiere ich beispielsweise auf diese Form und zwar geht es mir hier darum, dass ich mir ein Konzept, ja, einfallen lassen muss, mit dem ich klarmache wie ein Benutzer mit den Fingern, mit der Maus, mit einem Stift, agieren soll. Hier sieht man also die runden Kreise, die signalisieren: das kann ich, also diese Schaltfläche, die Zugriff auf das Userprofil ermöglicht, die kann ich aufrufen, indem ich einfach mit dem Finger oder einem Stift drauftippe. Also Kreise sind Tipp-Gesten. Und hier zum Beispiel mit einem Pfeil signalisiere ich, das hier eine Wisch-Geste eine Rolle spielt. Ein Doppelpfeil zum Beispiel kann signalisieren, das man Zoomen kann, also mit dem Finger, Sie kennen das von so einem Smartphone oder einem Tablet, dass Sie auf oder aufziehen oder wieder schrumpfen. Und last but not least interne Hinweise, also, wie hier zum Beispiel: ich bin mir noch nicht sicher, ob man eine Wischgeste nach rechts oder nach links vollzieht. Das kann man natürlich auch noch in dieser Form das Ein- und Ausblenden wunderbare Möglichkeiten, und kann sehr viele Informationen dort hinein bringen, die

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!