Blindtext-Fonts: Eine Methode für die Gestaltung von Text für agiles Wireframing, Design und Prototyping

Alle Templates in allen relevanten Größen fertig zu designen, muss scheitern. Moderne Designstrategien versuchen zu vereinfachen. Besonders die Verwendung und Darstellung von Texten ist aber schwierig. Blindtext-Fonts könnten die Lösung sein.

Darstellung für Konzepte. Ganz einfach gezeichnet.
Wir setzen auf Handskizzen. Nicht nur, um bei der Arbeit die Ideen zu visualisieren, sondern auch bei der Abstimmung fertiger Konzepte mit Kunden. Handskizzen sind effektiv, weil schnell erstellt, und erlauben durch starke Abstraktion die Konzentration auf das Wesentliche.

Texte sind (auch gestalterisch) ein wichtiger Bestandteil einer Website.
Aber die Berücksichtigung von Textelementen ist schwierig. Im einfachsten Fall wird Text nur mit Linien oder Flächen dargestellt. Nachteil: so kann der Umfang von Texten nur ganz grob angenommen werden. In der Umsetzung wird es genau dann kompliziert, wenn die schematische Darstellung durch echten Text ersetzt werden muss. Das kann sicher nicht Schritt für Schritt passieren.

Frühzeitig mit Text zu arbeiten, löst einige Probleme, und schafft neue.
Den Text von Hand zu schreiben, kommt wohl kaum in Frage. Anpassungen und Korrekturen wären zu aufwändig. Selbst für jede Änderungen müssten neue Zeichnungen erstellt werden. Ein Weg, dies zu vermeiden, ist, die Zeichnungen in Photoshop zu überarbeiten und Textrahmen einzufügen. Jetzt lassen sich Textmengen gut abschätzen.

Text und Schrift verändern den Charakter eines Designs wesentlich.
Nicht zum Charakter des Projekts passende oder nicht zusammenpassende Schriften können sehr irritieren. Auch im Entwurf verwendete Blindtexte wie “Lorem ipsum”, deren Länge sich zudem schwer einschätzen lässt. Verwendet man diese in einem Prototypen, müssen sie zudem später komplett ersetzt werden. Echte Texte, wenn Sie überhaupt schon zur Verfügung stehen, funktionieren nur dann, wenn Sie exakt in die Seite passen.

Headlines können mit Handschriften Fonts eingebaut werden
In der Konzeptionsphase gibt es fast immer schon erste Ideen für Headlines. Diese lassen sich mit einem Handschrift Font in die Wireframes oder auch in Prototypen einfügen. Der skizzenhafte Charakter bleibt erhalten, und aussagekräftige Headlines verdeutlichen die Struktur. Das ist allerdings keine Alternative für Fließtexte. Hier sind eher die fehlenden Inhalte das Problem. „Lorem ipsum…“ passt eben meist einfach nicht.

Der Blindtext-Font “Redacted” ist die Lösung für Fließtexte
Der Blindtext-Font Redacted hat verschiedene Pseudo-Schriftschnitte, die keine Buchstaben enthalten und sich an den Formen handgezeichneter Layouts orientieren. Die Zeilen bestehen in Entwurf und Prototyp aus Blöcken oder Schnörkeln. Dabei orientiert sich die Größe der Zeichen an echten Schriften.

Redacted Funktioniert im Layout ebenso wie in ersten Prototypen
Mit der Blindtextschrift lassen sich reale Texte, deren Länge gut beurteilt werden kann, als abstrakte grafische Elemente in den Entwurf einfügen. Schriftgröße Zeilenabstand, aber auch die Größe der Textrahmen, lassen sich mit wenigen Handgriffen anpassen, bis Textelemente sich harmonisch ins Layout einfügen. Darüber hinaus gelingt so eine über mehrere Entwürfe hinweg einheitliche Schriftdarstellung. Bei der Erstellung von Prototypen kann der Blindtext als Webfont ebenfalls zum Einsatz kommen. Später kann für jedes einzelne Element die Schrift per CSS geändert werden.

Ein perfektes Werkzeug für Atomic Design und andere agile Methoden.
Beim Atomic Design werden Designelemente zu verschiedenen Zeitpunkten während des Projekts bestimmt. Fertig gestaltete Atome oder Moleküle ersetzen in Entwürfen bzw. in Prototypen Element für Element die zunächst skizzen- oder blockhaften Darstellungen.

Gerade dafür ist ein Blindtext-Font perfekt geeignet. Textelemente können von Anfang an als solche programmiert werden, ohne dass ein nicht passender Font den Eindruck des Designs beeinflusst. Maximale Flexibilität, zu entscheiden, wann Elemente ersetzt werden sollen. Dann sind Texte sofort auch lesbar.

Mehrere Schnitte – Viele Möglichkeiten
Neben der Redacted Regular, die einach nur Balken anstatt Textzeilen erzeugt, gibt es drei weitere Schnitte, die Schnörkel mit unterschiedlicher Schriftdicke erzeugen. Damit lässt sich sogar fett hervorgehobener Text simulieren.

Viel Spaß beim Ausprobieren…
Die Fonts stehen in Christian Naths Github Repository zum Download zur Verfügung. https://github.com/christiannaths/Redacted-Font