Illustrator CC 2015 für Webdesigner: Wireframing

Mit Bibliotheksobjekten ein App-Layout gestalten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Bibliotheksobjekte bieten den Vorteil, dass man schnell darauf zugreifen kann. Sie können aber weiterhin solche Symbole auch für neue Anforderungen anpassen. Wie Sie dabei vorgehen, erklärt dieses Video.

Transkript

Nun ist es aber Zeit, die Platzhalter und Bedienelemente, die wir in der Cloudbibliothek abgespeichert haben, auch in einem Projekt zusammenzufassen. Und wie wir dabei vorgehen können, auch wenn es sich um ein Projekt handelt, was vielleicht gar nicht im Ursprung für die Bedienelemente vorgesehen war, wie wir dann die Bedienelemente anpassen können, zeige ich Ihnen in diesem Video. Zunächst einmal stelle ich mir vor, ich habe ein Projekt, wo ich mit einem Smartphone zugreifen möchte und ich wähle mal das Gerät Iphone 5s aus. Das öffne ich einfach im Hochkantformat, das ist korrekt, und ja, jetzt möchte ich hier in dieser Oberfläche ein kleines Bedienfeld bzw. eine Benutzeroberfläche generieren, wo sich der spätere Benutzer in einem System einloggen kann. So und dafür erstelle ich jetzt zunächst einmal ein Rechteck, und zwar über die komplette Breite. Und das Ganze soll 50 hoch sein, also war schon fast richtig, und hier nehme ich jetzt einfach einmal schwarz, so und da schalt ich die Kontur nach außen. Hier sieht man jetzt so ein bisschen, wo die Problematik liegt, wenn ich jetzt so etwas habe und es wäre kein direktes Schwarz, sondern irgendein anderer Farbton. Dann weiß ich nicht genau, ist es das, was ich eigentlich so vorgesehen habe, oder was ich wirklich benutzen möchte. Und da kommt unsere Bibliothek zum Einsatz, denn hier habe ich ja entsprechend einzelne Farben. Das heißt, ich kann also auch dieses Objekt auswählen, und mir hier die Farbe Schwarz, jetzt in dem Falle natürlich identisch zuweisen. Und da bin ich sicher, ich habe auch genau den Farbton, den ich jetzt für dieses Projekt hier in meinem Team vorgesehen habe. Bevor ich weitermache, möchte ich aber ganz kurz die Ebenen anpassen, und zwar das, wo dieses Objekt jetzt liegt, das ist die Ebene Benutzeroberfläche. Da kommt alles rein, was wirklich mit der Oberfläche zu tun hat. Dann brauche ich eine Ebene Verhalten, wo ich dann signalisiere, was der Benutzer später tun soll. Ich brauch eine Ebene Beschriftungen, oder Beschriftung, reicht auch. Und eine Ebene für interne Hinweise und Kommunikationshinweise. So damit habe ich meine Ebenen vorbereitet. Ich muss darauf achten, dass ich dann auch in der Benutzeroberfläche bleibe. So ich hab schon bereits ein Element hier drauf und greife jetzt auf weitere Elemente zu, und zwar soll das ganze mal beginnen mit einem Vorschaubild, und da habe ich ja verschiedene mir hier abgespeichert: Vorschaubild groß, mittel, dann haben wir hier Vorschaubild LS, also für Landscape, und ich nehme das große, und ziehe das einfach mal hier hinein und das ist natürlich ein Stück weit zu klein. Aber das Verhältnis, was ich mir ausgedacht hab, das passt ja trotzdem und das kann ich jetzt auch ohne Probleme vergrößern auf die Breite so und damit habe ich mein Vorschaubild bereits fertig. Der nächste Schritt ist, ich möchte ein kleines Registrierungs- oder Loginformular haben, so und auch das habe ich irgendwo, da ist das Registrierungsformular. Jetzt geh ich allerdings etwas anders vor: Ich wähle das Formular aus und klicke mit der rechten Maustaste darauf und sage das hier bitte eine Kopie platziert werden soll, also hier im Dokument. Damit habe ich das gemacht. Und diese Buttons, die ich jetzt hier unten habe, die brauche ich nicht mehr, deswegen kann ich auch die Gruppierung auflösen. Das habe ich hier, im Untermenüpunkt. Und dann markiere ich einfach mal die beiden Buttons und schmeiß das raus, so. Davon ist natürlich dieses Objekt, das sieht man auch hier in der Vorschau, völlig unbetroffen. Jetzt markiere ich mir die beiden Eingabefelder, ziehe die mit gedrückter linker Maustaste und der Alt-Taste gleichzeitig ein wenig größer. Das ist vielleicht ein bisschen zu groß, so. Und platziere die etwas weiter hier unten. Dann möchte ich gerne hier zwei weitere Eingabefelder. Aber eben nicht die Buttons, weil von der Beschriftung her wären die zu klein für ein Smartphone. Ich mach es mir jetzt leicht und ziehe einfach, mit gedrückter Alt-Taste, hier das gleiche Feld noch einmal runter und mache das mal, ja, nehmen wir mal 250 ungefähr breit. So. Einmal die linke Seite. Und einmal auf die Rechte Seite. Jetzt würde ich aber ganz gerne, damit man das auch wirklich als Buttons erkennt, das Ganze mit einer abgerundeten Ecke machen. Ich lösche das eine weil sonst muss ich sowieso alles zweimal machen, und jetzt gehe ich wie folgt vor: Ich ziehe hier, die Ecke und führe aber jetzt einen Doppelklick auf diesen Punkt aus. Es öffnet sich hier die Möglichkeit, und jetzt kann ich zum Beispiel sagen, dass ich das ganze Mit 8 Punkten genau in einer Abrundung haben möchte, mit Radius haben möchte, so und das war es jetzt, jetzt kopiere ich einfach wieder nach rechts und habt zwei gleiche identische Button. Den einen, das ist der wichtigere von beiden, dem möchte ich jetzt eine Farbe zuweisen und dafür, weil er der wichtigere ist, nehme ich den dunkleren. Und der andere ist nicht ganz so wichtig, der bekommt die hellere Schattierung. So wie ich gesagt habe, also je dunkler die Felder, desto wichtiger sollen sie für den späteren Benutzer hinterher sein. Dann möchte ich gerne noch so ein Profilbild, da nehmen wir ruhig das große, das möchte ich haben, auch das füge ich einfach mal mit rechter Maustaste, Kopie platzieren hinzu. Platzier das. Das ist mir alles ein bisschen zu eng, also ein Stück weit nach unten, das Ganze auch nochmal. Das passt, sie sehen, da hilft auch schon das Raster, was der Illustrator mit sich bringt. Ja, und dann brauche ich noch ein ganz klein bisschen Text und da habe ich hier so einen einzeiligen Lorem Ipsum in meiner Bibliothek, den nehme ich auch noch, denn hier möchte ich später vielleicht so ein bisschen Copyright-Hinweis hinterlegen oder einfach eine Erklärung, was auch immer, also, das wäre so mein Layout. Ja und Sie sehen, ich habe mit den Objekten der Bibliothek schnell und einfach ein komplettes App-Wireframe gebaut, obwohl ich einige Elemente noch individuell anpassen musste. Aber selbst das ist ja kein Problem und ich habe dennoch den großen Vorteil, ein solches Wireframe wie aus einem Guss zu erstellen, mit Objekten, die einen bestimmten Stil haben und vor allen Dingen zueinander passen. Komplett neu erstellte oder stark veränderte Platzhalter kann ich ja jederzeit bei Bedarf weiter in der Cloud-Bibliothek aufnehmen, und das macht den Vorteil dieser Funktion deutlich und erleichtert die Designarbeit ganz erheblich.

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!