Adobe XD lernen

Mustertexte und Textrahmen verwenden

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Mustertexte haben in einem Wireframe die Aufgabe, dem Betrachter zu signalisieren, wo textuelle Informationen untergebracht werden. Es geht an dieser Stelle noch nicht um Typographie, sondern nur um Platzhaltertext. Der Demotext "Lorem Ipsum" eignet sich sehr gut für solche Zwecke. Eine spezielle Bedeutung kommt insbesondere bei mehrfacher Verwendung dem Textrahmen zu, denn die Wahl des Rahmens ermöglicht einen sehr flexiblen Einsatzbereich.

Transkript

Mustertexte in einem Wireframe sind wichtig, um die Platzierung von Inhalten, also textuellen Inhalten, zu demonstrieren. Dabei kommt dem Textwerkzeug und speziell dem Textrahmen eine besondere Bedeutung zu. Wie Sie mit diesem Werkzeug effizient Mustertexte verwenden, zeige ich in diesem Video. Ich habe also hier an der Stelle bereits einen Textrahmen vorbereitet. Und Sie erinnern sich, es gibt zwei Möglichkeiten. Einmal, wenn ich auf das Textwerkzeug klicke, kann ich durch einen simplen Klick einen Cursor erzeugen und hier den Demotext hineinschreiben. Und wenn ich das Ganze dann beende, habe ich hier einen Rahmen drumherum mit einem einzigen Anfasser. Also, mit diesem Anfasser kann ich z. B. auch den Text drehen und dergleichen. So, ich kann aber nichts machen, um diesen Text zu vergrößern, also, ich habe keine weiteren Anfasser außer natürlich hier über meine Werkzeugpalette. Hier sieht es etwas anders aus, hier habe ich wie bei einem Rechteck auch an jeder Eckposition sowie in der Mitte davon diese Greifer und damit kann ich diesen Textrahmen verändern. So, jetzt möchte ich gerne hier Mustertext drin haben. Ich habe dafür schon mal bereits eine Webseite aufgerufen und vorbereitet. Und das ist die Seite "loremipsum.de". Es gibt aber noch viele andere Webseiten. Was verbirgt sich hinter diesem lateinisch-klingenden Textabschnitt? Zunächst einmal geht es darum, dass wir in einem Wireframe ja nur grob demonstrieren müssen, da soll eine Textinformation hin, so stellen wir uns das vor, oder da soll eine Grafikinformation hin. Es geht aber noch nicht wirklich um Typographie und schon gar nicht um Inhalte. Schreiben Sie dort nun eigene Demotexte hinein, was Sie durchaus können, dann muss man allerdings darauf achten, dass die ein vernünftiges Bild ergeben, dass man also wirklich auch weiß, dass es sich hier um einen Text handelt und dieser Demotext das Ganze nicht unansehnlich macht. Ganz gefährlich wird es, wenn Sie Text dort hineinschreiben, der ein bisschen fragwürdig ist, also, wie z. B. "Ich sitze hier und weiß nicht, was ich tun soll". Also, eben das, was einem so einfällt, wenn man einen Demotext schreiben muss. Da bietet es sich förmlich an, auf solche Demos hier zurückzugreifen. Es gibt auch noch viele andere. Sie sehen, da gibt es ein paar weitere Beispiele in Deutsch und Englisch oder hier mit z. B. einer schönen Geschichte; "Damit er indes erkennt, woher dieser ganze Irrtum gekommen ist" usw.. Welchen Mustertext sollte man nehmen? Hier beim Wireframe prinzipiell egal. Bei einem Mock-up hinterher würde ich Ihnen immer empfehlen, einen Text zu wählen, der möglichst dem normalen Schriftbild sehr nahe kommt, also, wenn man in Deutsch schreibt, dann sollte man auch einen Text wählen, in dem sich Umlaute befinden, denn ein solcher Mustertext ist auch dafür zuständig, später beim Mock-Up zu erkennen, ist die Typographie passend, stimmt das Schriftbild und wirkt das eigentlich so, wie ich mir das vorgestellt habe. Hier geht es nur darum, in unserem Wireframe, dass wir wissen, wo Text steht. Ich markiere mir also hier diese Textbox oder, genauer genommen, den Inhalt mit Command+C in die Zwischenablage und wechsle zurück zu Adobe XD. Und nun hier an der Stelle mit dem Textrahmen, ich zoome mal ein bisschen hinein, führe ich einen Doppelklick aus und drücke einen Return und füge das Ganze mit Command+V in diesen Textrahmen hinein. Jetzt möchte ich das noch ein bisschen anpassen. So, stellen wir das mal kurz um. Ich markiere mir den Text. Hier oben die Überschrift, die soll durchaus so bleiben, aber das, was dann im Nachhinein kommt, das möchte ich etwas anders haben. "Helvetica Neue" ist ok, allerdings soll das Ganze nun noch Regular sein, dann auf die Größe 14 gesetzt. Und ich verändere auch mal den Abstand auf 16. Das sieht auch ganz gut aus, so. Und fügen wir hier noch einen Return ein, dann passt das auch ganz gut. Jetzt markiere ich mir diesen schon vorgefertigten und formatierten Text, so wie ich ihn brauche, erneut in die Zwischenablage mit Command+C, drücke nochmal Return und füge das ein. Und jetzt sieht man schon, was passiert. Es wird hier nach unten hinaus geschrieben. Klicke ich nun wieder irgendwo anders, nur nicht in den Textrahmen, dann habe ich hier trotz alledem nur den Text, den ich brauche von der Größe her. Was hat das nun für einen Vorteil? Ich zeige Ihnen das mal an einer anderen Stelle. Sagen wir mal, ich brauche jetzt eine Information. Greifen wir uns das mal raus, das lösche ich mal kurz. An der Stelle ebenfalls Text, dann kann ich mir nun diesen Textrahmen kopieren, also rechte Maustaste "Kopieren". Oder ich mache das wie immer mit Alt und ziehe es einfach an die Stelle runter, so. Ich platziere das, so wie es sein sollte. Und achten Sie jetzt da drauf, wenn ich diesen Textrahmen verkleinere, so, ich brauche also nur so viel, dann brauche ich mich nicht mehr darum zu kümmern, dass dieser ganze Text zu viel war, sondern ich ziehe nun den Rahmen einfach auf und habe somit passend quasi zu dieser Darstellung, oder zu diesem Platz auch, meinen Demotext. Und das, finde ich, ist eine sehr nette Funktion. Selbstverständlich können Sie sich auch hier von solchen Sachen ein Symbol erstellen, auch das ist möglich. Allerdings muss man jetzt daran denken, wenn ich das Symbol an anderer Stelle verwende und ich verändere die Größe, Sie sehen, dann wird das auch rechts in dem Fenster "Rallye Cars Details" verändert. Und entsprechend muss man dann überlegen, ob das Symbol, also ob das so gewollt ist, ob das Symbol dafür dann auch eingesetzt werden soll. Ich habe es jetzt gerade wieder entfernt und schließe auch mal die Symbolbibliothek. Ja, und damit kennen Sie den Hintergrund auch von diesem "Lorem Ipsum" und die Verwendung und den großen Vorteil entsprechend des Textrahmens bei der Erstellung eines Wireframes.

Adobe XD lernen

Lernen Sie die Funktionen des Adobe Experience Design, kurz Adobe XD, anhand eines kompletten Praxisworkshops.

3 Std. 20 min (39 Videos)
Derzeit sind keine Feedbacks vorhanden...
Hersteller:
Exklusiv für Abo-Kunden
Erscheinungsdatum:31.01.2017
Aktualisiert am:17.03.2017

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!