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

Lösung: Umsetzung eines kompletten Wireframes

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Dieses Video liefert die Musterlösung zur zuvor beschriebenen Aufgabe.

Transkript

Okay, freut mich, dass sie wieder bei mir sind. Ich hoffe, sie konnten ihr Wireframe ohne Probleme erstellen und die bislang beschriebenen Techniken und Funkionen adäquat nutzen. Folgen Sie nun Schritt für Schritt meinen Lösungshinweisen und vergleichen Sie diese mit ihren eigenen Handlungen. Als erstes öffne ich ein neues Dokument, und das ist aus dem Profil Geräte, das iPad Air. Das Ganze soll hochkant sein, ich achte auf die Pixel und starte das Dokument. Damit wir mit einem Hilfslinienmuster arbeiten können, und ich bin ein echt großer Freund davon, weil das die Platzierung der Elemente der Platzhalter so enorm vereinfacht und damit eben auch unglaublich Zeit spart, und somit werde ich jetzt ein solches Hilfsliniengitter einrichten. Ziehen wir uns einfach mal ein Rechteck auf, hier aus dem Bereich Rechteckwerkzeug. Das transformiere ich auf die Breite von 65. Die Höhe bleibt natürlich bestehen. Und jetzt, geh ich hin, über den Effekt. Man kann natürlich auch solch ein Rechteck mit einer Fläche belegen, dass fällt mir auch noch gerade so ein, dass kann ich Ihnen mal zeigen, ich nehme die Kontur raus und fülle hier nur eine Fläche. Und diese Fläche, die kann ich dann zum Beispiel mit einer Deckkraft von 20 belegen. Auf diese Weise besteht natürlich auch die Möglichkeit, ein solches Grid zu erstellen. Dann gehe ich in die Effekte und den Transformieren-Filter oder das Bedienfeld Transformieren, schalte mir die Vorschau ein, und hier gebe ich eine horizontale Auflistung von 85 an. Und ich brauche 12 Kopien davon. Und sie sehen auch jetzt hier mit dieser zartrosa Darstellung oder auch blau, das sieht man auch ganz häufig, da kann man natürlich auch recht angenehm mit arbeiten, also das nur mal so als Beispiel, wie man so was erstellen kann. Der nächste Schritt, damit ich die Objekte einfasse, ist das Ganze mit dem Menüpunkt Aussehen umwandeln, in ein Objekt hineinzubringen, ja, und dann kann ich das ganze auch noch zentrieren. Dafür muss ich aber schauen, dass ich in der richtigen Einstellung bin, also hier an Zeichenfläche, zentriert an Zeichenfläche ausrichten, und ich habe zunächst einmal mein Rechteckmuster. Daraus mach ich jetzt noch die Hilfslinien, und das geht über den Menüpunkt Ansicht, Hilfslinien, Hilfslinien erstellen. Jetzt verschwindet natürlich dieses Muster, aber sie haben gesehen, wie es geht und dann sperre ich die Hilfslinien mir noch, falls Sie nicht schon wie hier gesperrt sind, dann kann auch nichts passieren, dann komm ich da nicht mehr dran. Ansonsten besteht ja die Gefahr, dass ich das Ganze auch noch verschiebe. So, der nächste Schritt wäre jetzt für mich immer wieder die Ebenen zu bauen, das heißt, ich erstelle hier die Ebene UI oder Benutzeroberfläche. Ich nehme jetzt mal das UI, dann gehe ich dadrüber und trage das Verhalten ein, dann gehe ich dadrüber und trage die Beschriftung ein, und da drüber meine besagten Hinweise. So und da ich in den ersten nicht arbeiten möchte, sperre ich die, und sorge so dafür, dass ich wirklich nur in der Ebene Bedienfelder oder UI User-Interface mich bewege. So, zoomen wir ein bisschen rein. Dann starten wir mal mit einem kleinen Headerbalken, der ist jetzt zwar nicht unbedingt notwendig, also für die Funktion, sieht aber ganz nett aus fürs Design. Also die Breite, die ist klar. Und die Höhe nehme ich mal mit 75 pixel an. Dann passt das im Grunde ganz gut, um ganz sicher zu sein, kann ich natürlich auch hier oben an der Seite ausrichten und hab somit dann auch die Gewissheit, dass es korrekt platziert ist. So, damit ich meine Farben, meine Graustufen benutze, kann ich nun erstmalig auf meine Bibliothek zurückgreifen. Und die Bibliothek, die besitzt die üblichen Farben, die ich für solch ein Wireframe einsetze und, ja, da passt schon hier dieses Grau und fertig ist die Kiste. Also der nächste Schritt ist ich brauche ein Profilbild und auch das habe ich meiner iCloud- Bibliothek, das haben wir unten das ist jetzt ein Profilbild klein. Ich hatte auch irgendwo mal ein großes, aber das ist eigentlich gar nicht schlimm, ich nehme also, ne, da sind die zwei Verbleibenden, ich wusste es doch, als Profilbild groß. Und da kopiere ich das Ganze ins Dokument und setze das hier an die Stelle. So und jetzt ist das schöne daran, dass dieses Raster, was ich jetzt hier habe, mir natürlich wunderbar ermöglicht, das Ganze direkt passend zu platzieren. Also, selbst wenn ich jetzt sagen würde, ich möchte das ganze über vier Spalten Größe ziehen, also in dieser Form, aber sie mir jetzt allerdings zu groß ist, kann ich das jederzeit machen. So, ich bleibe aber hier bei dieser Größe und richte das Ganze an den Hilfslinien, die ich mir dafür extra erstellt habe, aus. So, der nächste Schritt ist nun, das ich einen Text brauche, einfach so eine kleine Beschreibung und dafür hab ich ja auch hier einen Absatz in meiner Bibliothek. Auch da platziere ich die Kopie und setzte das einfach hier passend neben das Profilbild. Und als Überschrift, da nehme ich jetzt eine eigene mal und klicke einfach hier ins Dokument und schreibe hier Benutzername. So und das passt ja jetzt so gar nicht ins Bild, aber auch das ist leicht, denn ich habe ja Zeichenformate in meiner Bibliothek abgespeichert. Und da nehme ich jetzt mal das Zeichenformat H1 und schon habe ich die Überschrift wie ich Sie mir vorstelle. So auch das kann ich wieder wunderbar platzieren und im Dokument, dann unter bringen. So, damit wäre das auch schon geschehen. Jetzt brauche ich ein paar Menü leisten, und zwar sollen die drei Button Hinzufügen, Folgen und Nachricht schreiben eingebunden werden, das wäre mir wichtig. Und auch da gibts eine Menü leiste, die füge ich hinzu, Die besitzt ja ein paar mehr Schaltflächen, das ist aber nicht schlimm, ich scroll mal ein bisschen rein. So. Als erstes kann ich eine Schaltfläche schon mal loswerden. Ich führe einen Doppelklick darauf aus und gehe in die Schaltfläche hinein und lösche die. Dann einen Doppelklick in den rechten Button und schreibe jetzt hier einfach mal rein NACHRICHT SCHREIBEN. Dann in die nächste Schaltfläche FOLGEN. Und die nächste Schaltfläche: HINZUFÜGEN. So. Und jetzt muss ich das ganze nur noch entsprechend ein bisschen platzieren, damit das in die Reihenfolge passt. Also bisschen zu eng. Also nochmal weiter, ein Stück weiter rüber, So siehts doch ganz gut aus. Ja, ich gehe wieder, da müssen Sie darauf achten, aus dieser Gruppe nach außen. So, hab jetzt die komplette Gruppe und kann sie auch hier wunderbar platzieren, in der Höhe und in der Breite genau an meinem Raster, an den Hilfslinien, ja und habt das ganze schon eingefügt. Jetzt ist mir das noch ein kleines bisschen zu groß, auch das ist kein Problem ich markiere einfach diese Liste. Noch ein bisschen nach unten schieben, das man das sieht. Und verkleiner dass ein kleines bisschen. So, wie wir jetzt hier sehen, bis auf das Raster passt, ob sie das nur noch nach links anpassen oder jetzt einfach so stehen lassen, ja, das kommt ein bisschen auf das Designgefühl an, also für mich. Jetzt muss ich doch bestehen. Kann ich das ruhig ein bisschen mal nach innen setzen. Das gefällt mir besser, wenn das zusammenhängend ist. Sie sehen. Okay. Dann immer wieder dran denken, aus diesen Gruppen heraus zu gehen, sonst arbeiten Sie da drin in dieser Gruppe weiter und das wollen wir nicht. Nun folgt ein großes Imagebild und das soll eher breiter als hoch sein. Also kein quadratisches Bild und da gibt es Vorschaubilder und zwar habe ich hier, die mit LS gekennzeichneten Bilder die Landscape darstellen, also im Querformat. Auch da ziehe ich eine Kopie und setze die schön hier unter mein Profilbild und ziehe es mit gedrückter Shift-Taste und gedrückter Maustaste einfach auf, bis ich hier hinten an meiner Hilfslinie bin. Und den letzten Einraster kann ich nochmal so ohne gedrückten Shift-Taste vorziehen. Das Ganze noch ein bisschen angepasst und schon habe ich mein großes Imagebild. Das gleiche geschieht jetzt mit den zu tauschenden Bildern, die ich anordnen möchte, da nehme ich jetzt einfach mal das Vorschaubild mittel, aber auch Landscape. So das ist auch ein bisschen zu klein aber ich mach hier folgendes: Also, ich platziere es wieder schön an meiner Hilfslinie. Und jetzt soll das ganze über eins, zwei, drei, vier Elemente aufgezogen werden. Das mache ich auch mal, bis es einrastet. So und das, jetzt ist es eigentlich der nächste Schritt, der ist sehr einfach: Die Alt-Taste halte ich auf der Tastatur gedrückt, die Linke Maustaste und ziehe das ganze schön hier im Raster immer wieder rüber. Genau, jetzt sehen Sie auch wie wichtig eigentlich solch ein Hilfslinienraster ist. Wenn Sie das alles immer wieder per Hand machen müssten und abstimmen, beziehungsweise ausrichten müssten, dann verliert man da ganz ganz viel Zeit. So und jetzt mache ich das ganze noch in die Mitte des Bildschirms. Sie sehen an dieser pinken Linie, das ich da jetzt genau bin, jetzt drücke ich wieder die Alt-Taste, ziehe das Ganze nach unten, hab die gleichen Abstände, ziehe das Ganze nach unten, hab die gleichen Abstände, und fertig. So jetzt sind wir schon recht weit in unserem Layout. Der nächste Schritt ist ein Videovorschaubild und auch das habe ich hier in meiner Bibliothek. Ich platziere die Kopie. Und das richte ich jetzt einfach mal an diesem Element aus, also da rastet der auch im Prinzip hier relativ gut ein, also da sieht man das grad eben, war die Linie da. Passen wir es gerade an. Da haben wir auch die gleichen Abstände und damit es auch hier im Raster bleibt, ziehe ich das jetzt ein bisschen hoch auf diese Linie, also hier auf die Kante, und hab mein Videoplayer-Objekt eingefügt. Hier daneben brauche ich ein bisschen Fließtext und zwar mehrere Absätze. Auch die haben wir, zum Beispiel hier, da habe ich das so gekennzeichnet, das Lorem Ipsum absetze. Ich platziere die Kopie, setze das auch hier wieder passend. Wohin ist eigentlich egal. Machen wir schon mal ein bisschen größer und passend auf die Breite, und jetzt ist mir das hier zu lang. Ich nehme also einen kompletten Absatz auf jeden Fall schon mal raus. Wahrscheinlich davon auch nochmal ein kleines bisschen erstmal. So und hier oben möchte ich nun eine Überschrift, eine spezielle Überschrift einfügen, die mir signalisiert, um was es geht. Ich füge also zwei Leerzeilen ein und schreibe dann hier einfach mal Beispielüberschrift, markiere diese Überschrift, und auch hier möchte ich mit meinen vorgefertigten Überschriften arbeiten, dass es immer das gleiche Aussehen hat. Und jetzt kann ich mir das anschauen, die Überschrift H1, die ist zu groß, die hatten wir auch schon mal oben am Dokument. H2 immer noch, H3 passt. Und somit würde ich die zum Beispiel an der Stelle dann nehmen. Da es sich um ein ganz normales Textfeld handelt, kann ich das auch wunderbar hier anpassen. bis das so aussieht wie ich das haben möchte. Und selbstverständlich können Sie das auch noch einstellen. Also, Sie können die Schriftarten verändern, die Abstände der Zeilen bzw. Absätze verändern, Weil, es ist ein ganz normales Textdokument. Aber, ja, ruck zuck habe ich erst einmal Fließtext im meinem Dokument und das als Mustertext, als Lorem-Ipsum-Text. Dann schließt das Ganze ebenfalls mit einer weiteren Menüleiste ab, die füge ich jetzt einfach mal hier unten rein. Auch wieder ein Doppelklick, damit die alle gleich aussehen, schreibe ich hier mal Button rein. Aber in kleiner Schrift diesmal. So, Button, und das Ganze auch nochmal schön ausgerichtet platziert, so das es passt. Das Platzieren mache ich im Übrigen jetzt in dem Falle auf die schnelle mit den Tasten. So da noch ein Stück nach links. Da noch ein Stück nach links. Dann passt, das glaube ich gleich und ein bisschen näher ran, das man das besser sieht. So sieht es ganz gut aus. Also auch hier wieder aus der Gruppe heraus, komplett ins Dokument hinein. Ja und jetzt sind wir schon fast fertig, ich muss hier jetzt einfach noch auch einen Footer unter bringen, den ziehe ich hier wieder über die gesamte Bildschirmbreite. Na, da haben wir es. Das soll das gleiche Aussehen wie oben bekommen, also auch hier wieder dieses Grau. Dann lass ich es unten am Dokument ausrichten. Ja, hätte ich vorher transformieren können, das ist mir doch ein bisschen zu wenig, das heißt, ich gehe jetzt auf die Größe 156 Pixel. So passt das besser und richte es dann unten am Dokument aus. Und last but not least ein kleine Copyrightzeile, da reicht mir wiederum ein Absatz einzeilig, den platziere ich hier im Dokument. Und das ganze dann auch zentriert auf der Seite, fertig ist mein Wireframe, für den Website-Entwurf einer Foto-Tauschbörse. Ich denke, gerade die Arbeit mit den Hilfslinien und mit den vorgefertigten Bibliothekselementen zeigt auf wunderbare Art und Weise, wie schnell sie mit Illustrator solche Grundgerüste für Ihr Projekt erstellen können. Es spart unglaublich viel Zeit, wir sind in 15 Minuten fertig, und es geht nicht um das Layout im eigentlichen Sinne, also um die ästhetischen Aspekte des Designs, sondern es geht um Platzierung und um, natürlich, das Benutzerverhalten, was jetzt in den nächsten Schritten natürlich auch hier noch eingetragen werden kann, wie in den zuvor gezeigten Videos beschrieben. Ja, und wenn Sie das soweit auch ohne Probleme hinbekommen haben, dann sind Sie sicherlich bereit dazu, Ihre eigenen Wireframes zu bauen.

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!