Design für Zitatkarten zum Teilen

Ein zweizeiliges Zitat mit sichtbarer Urheberangabe

Diese Grafik wird über die OpenDesign Community-Bibliothek verbreitet, wobei HTMLAnything als Upstream angegeben ist, und ist um eine einzelne zugeschriebene Aussage aufgebaut. Die sichtbare Komposition beginnt mit einem kleinen Label „✦ QUOTE“, geht in ein großes chinesisches Zitat mit lateinischen Technologienamen über und endet mit dem Identitätsblock von Tom Pan. Durch diese Reihenfolge wirkt das Artefakt zuerst als Zitat und erst danach als Social-Post.

Die Beispielaussage stellt Markdown als Format für Autoren HTML als Format für Leser gegenüber. „Markdown“ steht am Anfang der ersten Zeile, „HTML“ am Anfang der zweiten, sodass beide Technologien parallel gewichtet sind. Goldene Hervorhebungen markieren ausgewählte chinesische Wörter, sodass der Kontrast als redaktionelle Betonung wirkt und nicht als separates Diagramm, Badge oder Datenvisualisierung. Es handelt sich um gemischte Schriftsysteme innerhalb eines chinesischen Zitats, nicht um parallele englische und chinesische Fassungen.

Das Quell-CSS definiert eine 1600px breite Karte im Seitenverhältnis 16:9 mit einer maximalen Breite von 96vw. Diese Proportion unterstützt eine breite, präsentationsartige Lesefläche: Die Aussage kann den größten Teil des Rahmens einnehmen, während der Identitätsblock als kleinere Nebenzone lesbar bleibt. Der Kompromiss ist eine bewusste Dichte; ein längerer Text würde eine neue Abstimmung von Zeilenumbrüchen und Schriftgrößen erfordern.

Die abgebildete Urheberangabe nennt Tom Pan, verwendet das Handle @tompan, beschreibt einen Ingenieur, der interne Dokumente in HTML umwandelt, und enthält das Datum 2026.05. Diese Angaben liefern Namen, Rolle und ein veröffentlichungsartiges Datum, ohne mit der zentralen Aussage zu konkurrieren. Sie bleiben beispielhafte Zitatnachweise, keine verifizierte Biografie, kein OpenDesign-Testimonial und kein Ersatz für den angegebenen HTMLAnything-Upstream der Vorlage.

Einsatzbereiche für eine Zitatkarte zum Teilen

Die Komposition eignet sich für eine kurze, zuschreibbare Idee, die von visueller Betonung profitiert. Sie kann einen redaktionellen Social-Post, eine Zitatreihe für Konferenzen oder Communities oder ein internes Prinzip als eigenständiges Bild unterstützen. In jedem Fall muss der Quelltext kurz genug sein, um den zweizeiligen Leserhythmus der Karte zu erhalten.

Der Identitätsblock macht das Format auch dann nützlich, wenn der Autor Teil der Botschaft ist. Hier beschreibt die Rollenzeile einen Ingenieur, der interne Dokumente in HTML umwandelt, was dem Zitat einen beruflichen Kontext gibt. Hat ein neuer Anwendungsfall keinen sinnvollen Autor, kein Handle oder Datum, bräuchte der Block unten links einen anderen Informationszweck, statt als Dekoration beibehalten zu werden.

Für das Publizieren in gemischten Schriftsystemen zeigt das Artefakt ein praktisches Verhältnis der Schriften: Die lateinischen Technologienamen bleiben leicht erfassbar, während der chinesische Text die Satzstruktur liefert. Der Kompromiss: Textlänge und Schriftmetrik können die Balance schnell verändern. Eine Nachbildung sollte ihren tatsächlichen Wortlaut testen, statt anzunehmen, dass die aktuellen Zeilenumbrüche übertragbar sind.

Komposition der Aussage in gemischten Schriftsystemen

Die visuelle Hierarchie entsteht durch Größe und Platzierung, nicht durch mehrere Bedienelemente. Ein kleines goldfarbenes Label mit kapselartigem Umriss und dem Text „✦ QUOTE“ sitzt oben links. Die Hauptaussage erstreckt sich in übergroßer weißer und goldener Schrift über den mittleren Bereich, während „H“ und „html-anything“ oben rechts als kompakte Kontextlabels erscheinen. Diese diagonale Verteilung verhindert, dass die Karte zu einem zentrierten Textblock wird.

Die zwei Zeilen des Zitats sind nicht austauschbar. „Markdown“ steht am Anfang der ersten Zeile, „HTML“ am Anfang der zweiten, sodass Leser eine direkte visuelle Paarung wahrnehmen, bevor sie den chinesischen Satz zu Ende lesen. Goldene Hervorhebungen markieren ausgewählte chinesische Wörter in beiden Zeilen und schaffen einen wiederkehrenden Akzent, der den Vergleich zusammenhält. Ohne die Hervorhebung wäre die Karte ruhiger, verlöre aber den visuellen Hinweis, der den Kontrast führt.

Der Hintergrund nutzt ein dunkles Feld mit sichtbarem Raster, wärmerer brauner Ausleuchtung links und einem olivgoldenen Bereich unten rechts. Das Raster gibt dem offenen Raum eine abgemessene Struktur, während der Farbübergang verhindert, dass die großen schwarzen Flächen leer wirken. Diese Atmosphäre unterstützt das technische Thema, bringt aber eine Kontrastvorgabe mit sich: Helle Schrift muss über beiden warmen Bereichen lesbar bleiben.

Unten links begleitet ein „T“ als Initial Autorenname, Handle, Rolle und Datum. Diese porträtlose Identitätsdarstellung verbindet die Fußzeile mit dem Zitat und hält sie der übergroßen Aussage untergeordnet. Ihre Kompaktheit hat eine Grenze: Leser erhalten nur eine kurze abgebildete Urheberangabe, kein vollständiges Profil und keinen Beleg für die Echtheit des Zitats.

Umfang und Funktionsgrenze

Dieses Artefakt ist ein reines Design-Grafikbeispiel. Die vorliegenden Belege bestätigen eine lokale HTML-Vorschau, ein per CSS definiertes Kartenformat, sichtbare Typografie und den abgebildeten Text; sie belegen weder eine Live-Social-Integration, einen Veröffentlichungs-Workflow, eine verbundene Datenquelle noch messbare Ergebnisse beim Teilen. Die Namen, die Rollenbeschreibung und das Datum im Zitat sind daher als illustrativer Inhalt zu behandeln, sofern sie nicht separat verifiziert wurden.

Die Vorlage wird über die OpenDesign Community verbreitet und nennt HTMLAnything als Upstream-Quelle; das abgebildete Zitat nennt davon getrennt Tom Pan. Das mitgelieferte Manifest gibt für das Beispiel-Plugin eine MIT-Lizenz an, doch das begründet keine gesonderte Lizenzierung für jedes abgebildete Asset. Eine Adaption sollte den Upstream-Nachweis beibehalten und die Rechte für jedes verwendete Zitat, jede Autorenidentität oder externe Schrift klären.