Da das Design im Browser immer beliebter wird (und praktischer), steigt der Bedarf an hilfreichen Design-Tools. Ein immer hilfreicher werdender Satz von Werkzeugen dreht sich um den Füllstoffgehalt. Derzeit gibt es eine Vielzahl von Ressourcen, um Designern zu helfen, die Füllmaterial benötigen, sei es Text oder Bilder.
Da in Photoshop viele Website-Designs stattfanden, war das manuelle Kopieren / Einfügen von Text aus dem Internet die beste Methode, um ein Design mit Dummy-Inhalten auszufüllen. Jetzt, da eine Menge Website-Design im Browser stattfindet, sollten Sie nicht, dass der Computer alles für Sie erledigt?
In diesem Lernprogramm werden die Optionen zum Füllstoffinhalt behandelt. Alles vom Kopieren / Einfügen von statischem Text und Bildern bis zur dynamischen Erzeugung.
Es gibt Puristen, die die Vermeidung des Füllstoffgehalts unter allen Umständen empfehlen. Ein Argument ist, dass der Füllstoffinhalt Sie von der "echten" Erfahrung der Website abgrenzt, die Sie erstellen:
Ziel ist es, dem tatsächlichen Kundenerlebnis so nahe wie möglich zu kommen. Isoliere dich nicht von der wirklichen Erfahrung. Jede entfernte Schicht drückt Sie immer weiter vom tatsächlichen Kundenerlebnis.
Tatsache ist, dass Sie manchmal das echte Kundenerlebnis nicht nachahmen können. Wenn Sie über einfache Marketingwebsites mit statischen Inhalten verfügen, die von einem Content-Strategen erstellt wurden, verwenden Sie diese Inhalte auf jeden Fall, um das Design der Website auszubauen. Der Inhalt sollte das Design informieren. Wenn Sie jedoch eine Webanwendung entwerfen, die mit vom Benutzer generierten Inhalten gefüllt ist, ist es häufig unmöglich, echte Inhalte zu entwerfen, da Sie sie selbst nicht generieren können. das machen deine Benutzer. Aus Sicht des Datenschutzes ist es außerdem wahrscheinlich, dass Sie keine tatsächlichen Kundendaten verwenden dürfen, um Modelle aufzufüllen. So werden Sie aufgrund von rechtlichen oder datenschutzrechtlichen Problemen daran gehindert, so nahe wie möglich an die Benutzererfahrung heranzukommen.
Es gibt jedoch Schritte, die Sie ergreifen können, um nahe am tatsächlichen Kundenerlebnis zu bleiben:
Wenn für Ihre Site oder Anwendung Daten eingegeben werden müssen, geben Sie echte und relevante Wörter ein und geben Sie den Text ein. Fügen Sie ihn nicht einfach aus einer anderen Quelle ein. Wenn es sich um einen Namen handelt, geben Sie einen echten Namen ein. Wenn es sich um eine Stadt handelt, geben Sie eine echte Stadt ein.
Wenn Sie den richtigen Typ des Füllstoffs verwenden, kann die Endbenutzererfahrung sehr ähnlich sein. Angenommen, Ihr Design fordert beispielsweise eine Liste mit Namen. Anstelle von:
Sie können echte Namen verwenden:
Noch einmal, Ziel ist es, dem wirklichen Kundenerlebnis so nahe wie möglich zu kommen. Und wenn Sie dies mit Füllstoffinhalt tun können, gehen Sie zu diesem Schritt!
Da wir uns um unser Handwerk kümmern, basieren unsere Diskussionen über Werkzeuge und Techniken oft auf bewährten Verfahren und perfekten Lösungen. Weil es uns wichtig ist, werden Arbeitsabläufe und Fachwissen mit jedem Projekt verbessert. In der realen Welt gibt es jedoch nicht oft perfekte Lösungen. Aus diesem Grund helfen pragmatische Alternativen (z. B. der Füllstoffgehalt), Projekte rechtzeitig abzuschließen. Ich glaube, das ist vollkommen in Ordnung, solange wir unsere Prinzipien nicht beeinträchtigen.
Ein vorläufiges Modell ist, wie wir alle wissen, nicht nah am endgültigen, echten Kundenerlebnis. Ihr Design wird sich wahrscheinlich drastisch zwischen der ersten und der letzten Iteration ändern. Füllinhalte können immer noch ein wertvolles Werkzeug sein, um zu sehen, wie Text auf der Seite, um Bilder herum und durch Haltepunkte fließt. Es kann Ihnen helfen, ein Gefühl für die Platzierung von Gestaltungselementen, das Gleichgewicht der Seite und die Verwendung von negativem Platz zu bekommen.
Es macht keinen Sinn, es ganz abzuschaffen. Füllstoffinhalte können in der ersten Entwurfsphase für das schnelle Prototyping und die Wiederholung von Konstruktionskonzepten ein entscheidendes Werkzeug sein. Wenn Sie die ersten Entwicklungsstadien hinter sich gelassen haben, ist es sehr hilfreich, Inhalte zu verwenden, die dem ähneln, was der Benutzer letztendlich sieht.
Wo Sie die Linie mit Füllmaterial zeichnen, bleibt Ihnen überlassen. Es gibt kein bestimmtes "Ja, verwenden Sie es!" oder "nein, es ist eine Schande!" Die Antwort auf "Soll ich Füllstoff verwenden?" ist, wie es immer scheint, "es kommt darauf an". Manchmal spricht man nicht von Füllstoffen, sondern um eine ideale Welt und nicht um die reale Welt. Du bist ein Profi, du entscheidest. Am Ende erfahren Sie, ob Sie die richtige Entscheidung getroffen haben oder nicht. Wenn Sie das nächste Mal die Frage "Soll ich Füllmaterial verwenden?" Gestellt werden, wissen Sie besser, wie Sie diese Frage beantworten.
Es gibt eine Reihe von gehosteten Lösungen zum Einfügen von Bildern in Ihr HTML-Dokument, mit denen Sie verschiedene Bildattribute über eine URL angeben können. Um beispielsweise placekitten zu verwenden, geben Sie einfach die gewünschte Bildgröße nach der URL ein. Verwenden Sie dann diese URL als src
von deinem Element:
Wenn Sie Kätzchen nicht mögen (warum sind Sie im Internet?), Finden Sie hier einige ähnliche Dienste, die unterschiedliche Anpassungen bieten (weitere Optionen finden Sie in dieser Übersicht):
Es gibt eine Reihe von Gründen, warum Sie Fülltext erstellen müssen. Möglicherweise müssen Sie ganze Absätze erstellen, um ein Blogdesign zu konzipieren. Oder Sie müssen vielleicht Textkategorien generieren, z. B. E-Mails und Namen, um ein Tischdesign zu gestalten. Was auch immer Sie benötigen, es gibt verschiedene Lösungen, um Text in Ihren Entwürfen zu generieren.
Es gibt zahlreiche Fülltextgeneratoren im Web. Da Webdesign sich häufig mit Listen, Tabellen und anderen Datenstrukturen befasst, bieten viele Generatoren mehr als Lorem Ipsum-Absatzfüller. Nachfolgend finden Sie eine (kleine) Liste von Fülltextgeneratoren. Jede bietet eine Vielzahl von Textkonfigurationen, z. B. das Generieren verschiedener Sprachen, das Einschließen von Text in HTML-Tags, das Einfügen von Text mit Überschriften / Unterüberschriften, das Anpassen der Textlänge sowie das Fett- und Kursivieren von Wörtern.
Für eine umfassendere Liste von Websites zur Textgenerierung finden Sie hier einige Runden:
Sie können Füllinhalte in Ihren HTML-Dokumenten dynamisch generieren, indem Sie eine JavaScript-Bibliothek verwenden, z.
Da das Entwerfen im Browser immer beliebter wird, kann die alte Copy / Paste-Technik für Füllstoffinhalte ineffizient werden. Warum lassen Sie den Computer diesen Job nicht erledigen? Lassen Sie uns diese Technik ausführlicher behandeln.
Versuchen wir, einiges von dem, was wir bisher beschrieben haben, in die Praxis umzusetzen, indem wir ein Entwurfsmodell erstellen. Der Einfachheit halber stellen wir uns vor, dass wir die Aufgabe haben, ein grundlegendes Website-Design zu erstellen, das Auszüge aus den Lieblingsartikeln einer Person aus dem gesamten Web zeigt. Wir nennen diese Person Franky und wir nennen das Design "Franky's Fav Five"..
Dieses kleine Beispiel soll helfen, die Nützlichkeit von dynamisch generierten Inhalten beim Entwurf eines Modells im Browser zu demonstrieren.
Lassen Sie uns zunächst unser grundlegendes HTML umreißen.
Frankys fav Five
Wie Sie sehen, haben wir drei zusätzliche Ressourcen in unsere Seite aufgenommen: einen CSS-Reset, ein benutzerdefiniertes CSS-Stylesheet (das wir später schreiben werden) und einen Link zur gehosteten Version von jQuery von Google. Jetzt in unserem styles.css
Datei, lassen Sie uns einige grundlegende Gestaltungsregeln für unser Modell enthalten:
/ * General ============================== * / body font: 1em / 1.45 Georgia, serif; Hintergrund: # e9e9e9 Wiederholung; Farbe: # 222; img max-width: 100%; Höhe: Auto; starkes font-weight: fett; .wrapper width: 95%; Marge: 0 auto; .content padding: 0 2em; a color: # 9c0001;
Nun erstellen wir einen einfachen Header für unsere Seite. Auch hier ist nichts zu hoch entwickelt, da dies nur ein Beispiel für ein Modell ist.
Frankys fav Five
Jetzt fügen wir unserer Kopfzeile einige einfache Stylings hinzu
/ * Header ============================== * / .header padding: .5em 0; Hintergrund: # 333; Farbe weiß; Text ausrichten: Mitte; Box-Schatten: 0 1px 3px rgba (0,0,0, 0,5); Hintergrund: # 45484d; / * Alte Browser * / background: -moz-linearer Farbverlauf (oben, # 45484d 0%, # 000000 100%); / * FF3.6 + * / background: -webkit-gradient (linear, links oben, links unten, Farbstopp (0%, # 45484d), Farbstopp (100%, # 000000)); / * Chrome, Safari4 + * / Hintergrund: -webkit-linearer Gradient (oben, # 45484d 0%, # 000000 100%); / * Chrome10 +, Safari5.1 + * / Hintergrund: -o-linearer Gradient (oben, # 45484d 0%, # 000000 100%); / * Opera 11.10+ * / Hintergrund: -ms-linearer Gradient (oben, # 45484d 0%, # 000000 100%); / * IE10 + * / background: linearer Gradient (nach unten, # 45484d 0%, # 000000 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 45484d", endColorstr = "# 000000", GradientType = 0); / * IE6-9 * / .header-title Schriftgröße: 1.25em; Schriftfamilie: Helvetica; Schriftdicke: fett; Text-Schatten: 0 1px 0 # 000;
Jetzt haben wir eine einfache Seite mit einer Kopfzeile:
Nun erstellen wir das Markup für unseren Artikelauszug. In diesem Artikel werden nicht CSS- und HTML-Codiertechniken gezeigt, sondern die Verwendung von Füllstoffinhalten. Daher werden wir diese Schritte sehr schnell durch einfaches Kopieren und Einfügen abdecken. Zuerst richten wir einen Wrapper und einen Hauptartikel ein.
Hinweis: Ich schätze, dass ein Klassenname "article" über ein Artikelelement etwas absurd wirken kann - denken Sie daran, dies ist eine reine Demo.
Wir verwenden den Platzhalter-Service "Lorempixel", um Bilder in unser Markup einzufügen. Da unsere Artikelcontainer auf eine maximale Breite von 600 Pixeln eingestellt sind, ist dies die Bildgröße, die wir von Lorempixel nehmen.
Jetzt platzieren wir unseren gesamten Text in einem div
. In unserem einfachen Modell werden die folgenden wiederholbaren Inhalte verwendet:
Titel des Artikels hier
- Autor: Autorenname
- Quelle: onlinesource.com
Hier wird der gesamte Absatztext eingefügt… Weiterlesen "
Im Wesentlichen ist dies unsere Vorlage, um Auszüge aus Franky's Lieblingslesungen zu präsentieren. Jetzt lass es uns gestalten!
Wir haben unser grundlegendes Markup, also beginnen wir mit der Gestaltung des Inhalts.
/ * Article ============================= * / .article max-width: 600px; Polsterung: 0 0 2em; Hintergrund: #fff; Marge: 3em Auto; Rahmen: 1px fest #ddd; Grenzradius: 5px; Box-Schatten: 0 1px 2px rgba (0,0,0, .1); .article a Textdekoration: keine; .Artikel a: hover Textdekoration: Unterstreichung; .article img border-radius: 5px 5px 0 0; .article-title display: block; Schriftgröße: 1.125em; Zeilenhöhe: 1,2; Farbe: # 222; Marge: 1em 0 0; Schriftdicke: fett; Schriftfamilie: Helvetica, Arial, Serifenlose; Text-Transformation: Großschreibung; / * faker gibt die richtige Kapitulation nicht aus, aber CSS kann damit umgehen! * / .Artikel-Absatz Farbe: # 555; Schriftgröße: .875em; Zeilenhöhe: 1.5em; .article-Absatz: Anfangsbuchstabe Text-Transformation: Großbuchstaben; / * Artikel-Meta * / .Artikel-Meta color: # 777; Schriftgröße: .75em; Schriftfamilie: arial; Marge: .25em 0 1em; Überlauf versteckt; .article-meta li float: left; Rand rechts: 1em; .article-meta li: after content: '\ 00B7'; Rand links: 1em; Farbe: #ccc; .article-meta li: last-child: after display: none; .article-author span font-style: italic;
Jetzt haben Sie eine recht einfache Vorlage zum Anzeigen von Artikelausschnitten, die ungefähr wie folgt aussieht:
Bisher haben wir einen Artikelauszug (von fünf, da dies "Franky's Fav Five" ist). Anstatt das Markup noch viermal zu kopieren / einzufügen, verwenden wir ein zum
Schleife in PHP. Wenn Sie dies tun, wird eine einzige Vorlage unseres Artikelauszugs während der Bearbeitung beibehalten, jedoch mehrere Artikelauszüge, wenn Sie sie im Browser anzeigen. Dies erleichtert die Wartung. Wenn wir unsere Artikelauszugsvorlage optimieren möchten, müssen wir dies nicht mehrmals tun.
Lass uns unsere wickeln Artikel
Element im folgenden Code:
//Element hier
Beachten Sie unsere zum
Schleife beginnt mit der Variablen $ i
gleich eins sein und laufen, bis es weniger als 6 ist (also 5 mal).
HINWEIS: Stellen Sie sicher, dass Sie Ihre Datei mit der Erweiterung umbenennen .php
wenn du noch nicht.
Jetzt solltest du so etwas haben:
Beachten Sie, dass unser Bild von Lorempixel in jedem Artikel gleich ist. Um ein realistischeres Modell zu erreichen, werden wir das Bild leicht modifizieren src
So erhalten wir für jeden Artikelauszug ein anderes Bild.
Mit LoremPixel können Sie den abgerufenen Bildtyp leicht anpassen. Hier sind die Anpassungen, die sie in ihrer URL-Struktur zulassen:
Derzeit verwenden wir die URL http://lorempixel.com/600/200
. Was wir tun, ist eine Kategorie auszuwählen, wie etwa Sport, und dann unsere PHP-Zählvariable zu verwenden $ i
um die URL so zu ändern, dass jeder Artikelauszug ein separates Bild von der Sportkategorie anfordert.
Um dies zu tun, finden Sie die Element und ändern Sie die Quelle wie folgt:
Jetzt als PHP-Zählvariable $ i
Mit jeder for-Schleife steigt, fordern unsere Bild-URLs jedes Mal ein anderes Bild auf. Das von PHP ausgegebene HTML-Markup sieht nun etwa so aus:
… … …
Jetzt sollten wir etwas haben, das so aussieht:
Nachdem wir nun unsere grundlegende Vorlage mit einem anderen Bild für jeden Auszug erstellt haben, möchten wir für jeden Artikel einen unterschiedlichen Füllstoffgehalt haben. Dies hilft uns, das Endprodukt besser zu visualisieren.
Hier ist eine Füller-Inhaltsbibliothek wie faker.js hilfreich. Mit der API von faker.js und etwas jQuery können wir unsere HTML-Vorlage beim Laden der Seite dynamisch füllen. Die Verwendung der faker.js-API ist ziemlich einfach. Sie finden die gesamte API auf der Seite faker.js github. Hier ist das Anwendungsbeispiel:
Wie Sie sehen, haben wir durch das Einfügen von faker.js in unsere Seite Zugriff auf die API, die Füllernamen, E-Mails, Adressen, Inhalte und mehr generiert. Rufen Sie einfach das Faker-Objekt mit einer seiner entsprechenden Methoden auf.
Zuerst fügen wir faker.js unserer Seite hinzu. Wir werden das hinzufügen for it at the bottom of the page, after our call for jQuery. Here's the link again: faker.js.
Lassen Sie uns jetzt versuchen, gefälschte Inhaltstitel mit faker.js und jQuery zu generieren. Wenn Sie die API von faker.js durchsehen, werden Sie feststellen, dass es Methoden zum Generieren von Sätzen, Absätzen und Wörtern mit Lorem Ipsum-Inhalt gibt. Da wir etwas möchten, das einem Artikeltitel ähnlich ist, wollen wir einen Satz von Lorem Ipsum: Faker.Lorem.sentence ()
. Dadurch wird ein einziger Satz wie "praesentium est alias dolor omnis sequi voluptatibus" ausgespuckt, was einen guten Füllstoffgehalt für einen Artikeltitel bedeutet.
Hinweis: faker.js gibt keinen Großbuchstaben aus. Mit der CSS-Regel Text-Transformation: Großschreibung
wir können die Verurteilung des Satzes erzwingen; Damit kommen wir der richtigen Formatierung näher.
Wir beginnen mit dem Hinzufügen einer Klasse von Faker-Satz
zu unserer Artikel-Titelvorlage. Dies wird als Haken dienen, damit jQuery alle Elemente finden kann, deren Inhalt durch Sätze von Lorem ipsum ersetzt werden soll.
Titel des Artikels hier
Mit jQuery werden wir dann jedes durchlaufen Faker-Satz
Elemente werden von PHP ausgegeben und ersetzen unseren statischen Füllstoff "Article Title Here" durch einen zufällig generierten Satz von Lorem Ipsum.
$ ('. Faker-Satz'). each (function () $ (this) .html (Faker.Lorem.sentence ()););
Jetzt sollten wir etwas haben, bei dem jeder unserer Artikel-Titel in Inhalt und Länge variiert und dem dynamischen Inhalt unserer Website ähnlicher ist.
Nun, da wir alle unsere Artikeltitel ersetzt haben. Lassen Sie uns über die anderen Inhalte auf der Seite nachdenken, die wir ersetzen möchten. Wir möchten noch folgende Schablonenstücke ausfüllen:
Anstatt jQuery für jedes einzelne Template, das wir ersetzen möchten, herauszuschreiben, wird das Generieren und Ersetzen von Inhalt herausgefiltert und dann einfach übergeben, was wir als Argumente ersetzen möchten.
Lassen Sie uns zunächst herausfinden, welche Teile von faker.js verwendet werden, um den Füllstoffgehalt zu erzeugen, den wir benötigen. Wie bereits erwähnt, benötigen wir den Namen einer Person, einen Domainnamen und Absatzinhalt. Faker.js verfügt über die folgenden Methoden, die wir verwenden können:
Faker.Name.findName ()
- gibt uns einen Namen wie John WilliamsonFaker.Internet.domainName ()
- gibt uns einen Domainnamen wie eldridge.co.ukFaker.Lorem.Absatz ()
- gibt uns einen Absatz von Lorem ipsum InhaltNun, da wir wissen, welchen Inhalt wir generieren, müssen wir ein Element und eine Klasse hinzufügen, in die wir unseren Füllstoffinhalt einfügen. Wie oben beschrieben, werden wir jeder Klasse "faker-" voranstellen. Auf diese Weise können wir, wenn wir über das Erstellen eines Mock hinausgehen und aufhören, faker.js zu verwenden, die Füllklassen, die wir nicht brauchen, leicht finden und entfernen.
Hinweis: Stellen Sie sicher, dass die Füllungsklassen des Füllers mit den Methodennamen der faker.js übereinstimmen. So Faker.Name.findName ()
wird die HTML-Klasse benötigen faker-findName
und Faker.Internet.domainName ()
wird die Klasse brauchen Faker-DomainName
usw. Dies ist hilfreich, wenn Sie in jQuery das Finden und Ersetzen von Füllstoffinhalten automatisieren.
Zuerst behandeln wir den Autor durch Hinzufügen von a Spanne
Element mit der entsprechenden Klasse:
Jetzt behandeln wir die Quelle, indem wir dem Quelllink die entsprechende Klasse hinzufügen:
Zum Schluss behandeln wir den Artikelauszug durch Hinzufügen von a Spanne
Element, wo unser Füller Lorem Ipsum gehen wird:
Hier wird der gesamte Absatztext eingefügt … Weiterlesen »
… Weiterlesen »
Jetzt schreiben wir einfach eine kleine jQuery, die alle unsere Füllstoffinhaltselemente findet und sie mit dem von faker.js erzeugten Füllstoffinhalt füllt.
Erstellen wir eine Variable namens args
. Hier definieren wir die faker.js-API-Methoden, die wir verwenden. Denken Sie daran, dass unsere HTML-Klassen den Methoden faker.js zugeordnet sind und denen einfach das Präfix vorangestellt ist Schwindler-
.
Hinweis: wir fügen hinzu Faker.Lorem.sentence ()
Sie können das von uns zuvor in Schritt 4 erstellte JavaScript entfernen, um die Artikeltitel zu suchen bzw. zu ersetzen.
var args = 'Lorem': ['Absätze', 'Satz'], // Zuordnung zu Faker.Lorem.paragraphs () und Faker.Lorem.sentence () 'Name': ['findName'], // maps zu Faker.Name.findName () 'Internet': ['domainName'] // // Zuordnungen zu Faker.Internet.domainName ()
Jetzt gehen wir einfach über jedes unserer Argumente. Der Schlüssel im Array wird zum Objekt faker.js, während der Wert im Array zur Methode faker.js wird. Der Wert im Array ist der HTML-Klasse zugeordnet, sodass jQuery weiß, nach welchem Element gesucht werden soll.
// Schleife über args für (var key in args) var obj = args [key]; for (var prop in obj) // jQuery findet die entsprechenden Elemente und füllt sie mit $ ('. faker -' + obj [prop]). each (function () // Faker.Lorem.paragraphs () // Faker.) .Internet.domainName () $ (this) .html (Faker [Schlüssel] [Obj [Prop]] ()););
Das ist es! Jetzt solltest du so etwas haben:
Durch das Ausrechnen des Füllstoffprozesses auf diese Weise wird das Hinzufügen / Entfernen neuer Füllstofftypen sehr einfach. Jetzt in der Zukunft, wenn Sie einen neuen Füllerinhaltstyp aus faker.js hinzufügen möchten, beispielsweise eine E-Mail Faker.Internet.email ()
Alles, was Sie tun müssen, ist, es dem hinzuzufügen args
Variable und erstellen Sie ein HTML-Element mit der Klasse Faker-E-Mail
wo immer Sie eine falsche E-Mail generieren möchten.
Wir haben ein einfaches Modell im Browser erstellt, das ein Designbeispiel aus fünf Artikelausschnitten zeigt.
Unsere Vorlage für jeden Artikelauszug besteht nur aus 13 Zeilen PHP / HTML, während HTML daraus resultieren würde viel mehr als das. Dies ermöglicht ein schnelles und einfaches Prototyping. An dieser Stelle könnten wir leicht die Reaktionsfähigkeit des Designs testen und sehen, wie Inhalt und Text fließen. Wir könnten jedes CSS anpassen, das es benötigt, oder wir können sehr einfach weitere Designelemente mit entsprechendem Füllstoffinhalt hinzufügen. Der dynamische Füllstoffgehalt ermöglicht ein schnelles Prototyping von Designs. Vielleicht finden Sie in einem zukünftigen Projekt einen Bedarf dafür!
Wie Sie vielleicht sehen, könnte diese Art von Prototyping für viele andere Webdesign-Aufgaben nützlich sein - insbesondere für datengesteuerte. Wenn Sie beispielsweise eine Kontakttabelle mit Namen, Adressen, E-Mails, Telefonnummern usw. erstellen müssen, können Sie faker.js verwenden, um auf einfache Weise alle benötigten Füllinhalte zu generieren. Auf diese Weise können Sie sich leichter auf das Design der Tabelle konzentrieren, anstatt Tonnen von Daten in Ihren HTML-Code kopieren / einfügen zu müssen, um ein Gefühl dafür zu bekommen, wie sie aussieht und reagiert.