Illustrationen

Feitios Zeichnungen für leere Screens und große Fehler. Jede mit ihrem Verwendungszweck und dem SVG zum Kopieren.

Auf dieser Seite

Alle Illustrationen

Empty basket

Leerer Screen: hier noch nichts.

illustrations/empty-basket.svg

Torn paper

Großer Fehler: die Seite oder die Aktion ist gescheitert.

illustrations/torn-paper.svg

Wie man sie verwendet

Eine Illustration befindet sich auf der Seite als SVG, nicht als Bild: so nutzt sie die Textfarbe und wechselt mit dem Thema. Der orangefarbene Strich ist der mit class="feitio-hot".

HTML

<div class="feitio-empty-state">
  <svg viewBox="0 0 120 100" aria-hidden="true" …>…</svg>
  <h2>Nenhum agendamento ainda</h2>
  <p>Crie o primeiro e ele aparece aqui.</p>
</div>

Immer mit aria-hidden="true": das nächste Überschrifts-Element sagt bereits, worum es geht.
Maximal eines pro Bildschirm und nur in Momenten ohne Inhalt: ein leerer Bildschirm, eine große Fehlermeldung, ein Willkommensbildschirm.
In externen Fassaden gehört die Illustration zum Kunden.

Eine neue Illustration

Von derselben Hand wie die Icons, nach den Regeln von Iconographie und Illustration: Tinte in der Textfarbe, ein Hauch Orange, überkreuzte Striche. Die Datei landet in illustrations/<name>.svg.