Eigene Rechnungsvorlage erstellen: Ein Praxisleitfaden zum visuellen Editor

InvoiceFlow bringt 12 fertige PDF-Vorlagen mit — clean, professional, bold, elegant, compact, modern, classic, creative, minimal, contractor, striped und installment. Für die meisten Menschen ist die Sache damit erledigt. Sie wählen die Vorlage, die zu Ihrem Gewerbe passt, fügen Ihr Logo ein, und schon sind Sie fertig. Die Vorlagen wurden neu aufgebaut, damit sie in jeder vom App unterstützten Schrift korrekt dargestellt werden — so wirkt eine kyrillische, arabische oder chinesische Rechnung genauso durchdacht wie eine englische.

Aber „die meisten Menschen“ sind nicht alle. Manche Unternehmen haben ein Markensystem, das eine Vorlage nicht ganz ausdrücken kann. Manche brauchen einen bestimmten Block an einer bestimmten Stelle — eine gesetzliche Zeile, eine Projektreferenz, ein Layout für Zahlungshinweise, das genau dem entspricht, was ihre Kunden bereits erwarten. Genau dafür gibt es den visuellen Editor für eigene Vorlagen. Dies ist ein Praxisleitfaden, ihn gut einzusetzen: wann Sie zu ihm greifen sollten, wie Sie aus seinen Bausteinen eine Vorlage zusammenstellen und welche Designprinzipien eine Rechnung, die gelesen wird, von einer unterscheiden, die ignoriert wird.

Erstmal ehrlich: Brauchen Sie wirklich eine eigene Vorlage?

Der visuelle Editor ist mächtig, und Macht verleitet zum Übertreiben. Bevor Sie ihn öffnen, probieren Sie die günstigere Lösung. In neun von zehn Fällen bringt Sie eine fertige Vorlage plus gutes Branding zu 95 % ans Ziel.

Greifen Sie zu einer fertigen Vorlage, wenn:

• Ihre Anforderungen konventionell sind — eine Kopfzeile, Ihre Angaben, die Angaben des Kunden, eine Positionstabelle, Summen und eine Fußzeile mit Zahlungshinweisen.
• Sie über Dokumenttypen hinweg Konsistenz wollen, ohne herumzubasteln. Die Vorlage „installment“ etwa stellt einen Ratenzahlungsplan schon sauber dar.
• Sie wenig Zeit haben und einfach etwas brauchen, das heute glaubwürdig aussieht.

Bauen Sie eine eigene Vorlage, wenn:

• Keines der 12 Layouts Ihre Informationen dorthin setzt, wo Ihre Kunden danach suchen.
• Ihre Marke eine bestimmte Struktur hat — eine farbig hinterlegte Kopfzeile, eine bestimmte Reihenfolge der Blöcke, eine Fußzeile, die jedes Mal rechtlichen oder gesetzlich vorgeschriebenen Text trägt.
• Sie Rechnungen in eine Branche mit starken Dokumentkonventionen schicken (Baufortschrittsabrechnung, Agenturpauschalen, regulierte Gewerbe) und das Layout dem entsprechen muss, was Prüfer erwarten.
• Sie mehrere Marken führen und jede ein optisch eigenständiges, bewusst gestaltetes Dokument haben soll.

Wenn Sie zur zweiten Liste gehören, lesen Sie weiter. Wenn Sie zur ersten gehören, reicht vielleicht schon das Branding allein — und das behandeln wir ebenfalls, denn es verstärkt sich mit jeder Vorlage, die Sie wählen.

Wie der Editor denkt: Bereiche im Slot-Raster

Der Editor für eigene Vorlagen ist um ein Slot-Raster herum aufgebaut. Statt einer leeren Leinwand, auf der Sie mit absoluter Positionierung kämpfen, ist die Rechnung in Bereiche aufgeteilt, und jeder Bereich ist ein Slot, den Sie füllen. Im Hintergrund wird das Layout als JSON gespeichert — eine strukturierte Beschreibung, welche Bereiche in welcher Reihenfolge erscheinen und wie sie gestaltet sind —, aber Sie müssen das JSON nie direkt anfassen. Sie stellen visuell zusammen; die Struktur ist das, was das Ergebnis über Rechnungen unterschiedlicher Länge hinweg vorhersehbar macht.

Diese Vorhersehbarkeit ist der ganze Sinn. Eine pixelgenaue Drag-and-drop-Leinwand wirkt frei, bis Sie eine echte Rechnung erzeugen — mit einem langen Kundennamen, einer Position, die über drei Zeilen umbricht, und einer Summe im Zehntausenderbereich. Dann bricht das freie Layout zusammen. Ein Slot-Raster behält seine Form, weil jeder Bereich weiß, wie er wächst und neu umfließt.

Die Bereiche, mit denen Sie zusammenstellen, bilden direkt die Teile einer Rechnung ab, die jeder Empfänger ohnehin schon kennt:

Kopfzeile

Das obere Band: Ihr Logo, der Dokumenttitel („Rechnung“), die Rechnungsnummer sowie Ausstellungs- und Fälligkeitsdatum. Das ist das Erste, was der Empfänger sieht, und das, wonach er später sucht, wenn er das Dokument ablegt oder darauf verweist.

Absenderblock

Wer in Rechnung stellt — Ihr Firmenname, Ihre Adresse, Steuerkennzeichen und Kontaktdaten. Dank länderbewusster Adressfelder passen sich die Bezeichnungen für Region und Postleitzahl an das Land an, aus dem Sie abrechnen, und für manche Länder werden diese Felder ganz ausgeblendet, wenn sie nicht zutreffen.

Kundenblock

Wer in Rechnung gestellt wird. Aus Ihrer Kundenliste übernommen, sodass Sie Adressen nicht erneut eintippen. Bei diesem Block beginnt das „Erwartungen des Empfängers treffen“: Ein Geschäftskunde will seinen eingetragenen Namen und seine Steuernummer; eine Privatperson will einfach ihren Namen und ihre Adresse.

Positionstabelle

Der Inhalt: Beschreibung, Menge, Satz und Betrag pro Zeile. Hier geht der meiste vertikale Platz hin, und hier kommt es am meisten auf Layout-Disziplin an. Die Steuer kann inklusive oder exklusive sein, Sie können mehrere Sätze anwenden, und die Tabelle berechnet für Sie den Nettobetrag und den fälligen Betrag.

Summenblock

Zwischensumme, Steuer, ein etwaiger Rabatt und der endgültige fällige Betrag. Auf diesen Block kommen wir noch zurück — er ist der wichtigste Block auf der Seite und der, den die Leute am häufigsten unterentwickeln.

Fußzeile

Zahlungshinweise und Bedingungen. InvoiceFlow ist kein Zahlungsdienstleister; die Rechnung zeigt, wie zu zahlen ist — Bankverbindung, ein Zahlungslink oder ein QR-Code —, und der Kunde zahlt über seinen eigenen Weg. In der Fußzeile lebt das, zusammen mit Mahngebührbedingungen und einer etwaigen Dankzeile. Gilt ein Zahlungsplan, wird der Plan hier als klare, datierte Aufschlüsselung dargestellt.

Sie entscheiden, welche Bereiche erscheinen und in welcher Reihenfolge. Sie müssen die Struktur nicht erfinden — Sie ordnen die Struktur an, die Rechnungen ohnehin schon haben.

Pro-Rechnung-Override und Teilen über Profile hinweg

Zwei Geltungsbereich-Funktionen machen den Editor wirklich nützlich statt bloß dekorativ.

Pro-Rechnung-Override. Eine Vorlage ist eine Voreinstellung, kein Käfig. Die meisten Rechnungen verwenden Ihre Standardvorlage, aber für den einen Kunden, der auf einem bestimmten Layout besteht — oder für den einzelnen übergroßen Auftrag, der eine förmlichere Präsentation rechtfertigt —, können Sie die Vorlage nur für diese eine Rechnung überschreiben. Der Rest Ihrer Rechnungsstellung bleibt unberührt.

Profil-Geltungsbereich. InvoiceFlow unterstützt mehrere Geschäftsprofile in einer App, sodass Sie mehrere Marken führen können, ohne mit Logins zu jonglieren. Eine eigene Vorlage kann über Profile hinweg geteilt werden — nützlich, wenn zwei Marken eine gemeinsame Dachidentität teilen und Sie ein einheitliches Dokumentsystem wollen — oder profilspezifisch gehalten werden, sodass jede Marke ihr eigenes, bewusst gewähltes Erscheinungsbild hat. Sie entscheiden das pro Vorlage. Ein Studio mit einer Hauptmarke und einem Nebengeschäft könnte sie optisch eigenständig halten; eine Beratung mit zwei regionalen Gesellschaften könnte eine Vorlage teilen und nur Logo und Angaben austauschen.

Branding: das Zwei-Logo-System

Eine Vorlage ist ein Skelett; das Branding macht sie zu Ihrer. InvoiceFlow verwendet ein Zwei-Logo-System: Sie speichern ein quadratisches und ein breites Logo getrennt, und die Vorlagen platzieren je nach Bedarf automatisch das richtige. Eine quadratische Marke passt in eine kompakte Ecke; ein breites Lockup passt in ein Kopfzeilenband über die volle Breite. Ohne zwei Varianten landen Sie bei einem breiten Logo, das in einen quadratischen Slot gequetscht wird, oder einer quadratischen Marke, die in einem Meer von Kopfzeilen-Weißraum verloren geht — beides liest sich wie „in Eile gemacht“.

Saubere Logodateien hineinzubekommen, übernimmt der eingebaute Bildzuschneider, sodass Sie nicht in einen separaten Editor wechseln müssen, um einen Export passend zuzuschneiden. Legen Sie beide Varianten einmal fest, und jede Vorlage — fertig oder eigen — weiß, welche wo zu verwenden ist.

Schriften: der Teil, an den niemand denkt, bis er kaputtgeht

Typografie ist der Punkt, an dem sich Amateur-Rechnungen verraten, und der Punkt, an dem internationale Rechnungen völlig auseinanderfallen. InvoiceFlow bringt NotoSans gebündelt mit und bietet frei wählbare Schriften — und das ist aus zwei Gründen wichtig.

Erstens: korrekte Darstellung in nicht-lateinischen Schriften. Eine Schrift ohne kyrillische, arabische oder CJK-Glyphen scheitert nicht laut — sie ersetzt sie stillschweigend durch Kästchen, Fragezeichen oder eine unpassende Ersatzschrift. NotoSans wurde genau dafür entworfen, das zu vermeiden; sie trägt die Glyphenabdeckung, sodass der Name eines russischen Kunden, eine arabische Adresse oder eine chinesische Positionsbeschreibung als Text dargestellt wird, nicht als Kästchen. Wenn Sie über Schriften hinweg abrechnen, lohnt es sich allein dafür, darum herum zu gestalten.

Zweitens: Zurückhaltung. Die einzelne wirkungsvollste typografische Entscheidung ist, eine Schriftfamilie zu verwenden und sich für die Hierarchie auf Strichstärke und Größe zu stützen. Eine fette, größere Rechnungsnummer; normaler Fließtext; eine etwas kräftigere Summe. Zwei Familien zu kombinieren kann funktionieren, aber nur, wenn Sie es bewusst tun. Im Zweifel: eine Familie, drei Strichstärken.

Ihre erste eigene Vorlage zusammenstellen — der Reihe nach

Hier ist die Reihenfolge, die am schnellsten und mit den wenigsten Überarbeitungen eine brauchbare Vorlage hervorbringt.

1. Gehen Sie gedanklich von der nächstgelegenen Fertigvorlage aus

Auch wenn Sie eine eigene bauen, entscheiden Sie, welche der 12 Voreinstellungen Ihrem Ziel am nächsten kommt. Sie verrät Ihnen, welche Reihenfolge der Bereiche für Ihr Gewerbe bereits funktioniert — ein Contractor-Layout führt anders als ein minimales — und erspart Ihnen, bereits gelöste Entscheidungen neu zu erfinden.

2. Legen Sie die Kopfzeile fest

Logo-Platzierung, Dokumenttitel, Rechnungsnummer, Daten. Entscheiden Sie, ob Ihr Logo links, rechts oder mittig sitzt und welche Variante (quadratisch oder breit) das Kopfzeilenband verlangt. Das ist der Bereich, von dem Kunden einen Screenshot machen und nach dem sie ablegen — machen Sie ihn also eindeutig.

3. Platzieren Sie Absender- und Kundenblock

Konvention ist Absender oben links, Kunde darunter oder gegenüber. Was auch immer Sie wählen, halten Sie es über all Ihre Dokumenttypen hinweg konsistent, damit ein wiederkehrender Kunde Ihre Unterlagen auf einen Blick erkennt.

4. Gestalten Sie die Positionstabelle für den schlimmsten Fall

Nicht den ordentlichen Demofall — den unordentlichen echten. Eine lange Beschreibung, die umbricht. Eine Zeile mit einer Menge und einem gebrochenen Satz. Eine Mischung aus Positionen inklusive und exklusive Steuer. Wenn die Tabelle unter dieser Last ihre Form hält, hält sie unter allem.

5. Machen Sie die Summe unübersehbar

Mehr dazu weiter unten, aber behandeln Sie es als Designschritt, nicht als nachträglichen Einfall.

6. Schreiben Sie die Fußzeile einmal, richtig

Zahlungshinweise (Bankverbindung, Link oder QR), Ihre Bedingungen und Ihre Mahngebührregelung, falls Sie eine haben. Die Mahngebührregelung hier anzugeben, ist das, was es fair macht, sie später anzuwenden. Wenn Sie in Raten abrechnen, vergewissern Sie sich, dass der Plan so dargestellt wird, wie Sie ihn laut erklären würden.

7. Testen, dann international testen

Erzeugen Sie ein echtes PDF und öffnen Sie es auf einem Smartphone — die meisten Kunden lesen Rechnungen auf dem Handy, und ein Layout, das auf einem Laptop elegant ist, kann auf fünf Zoll unlesbar sein. Wenn Sie dann jemals über Sprachen hinweg abrechnen, erzeugen Sie eine in einer nicht-lateinischen Schrift und prüfen Sie, ob die Schriften halten. Die Sprache pro Rechnung lässt ein PDF in der Sprache des Kunden hinausgehen, unabhängig von Ihrer App-Sprache — testen Sie also die Sprache, die Sie tatsächlich versenden.

Designprinzipien, die wichtiger sind als das Werkzeug

Machen Sie die Summe markant

Der Empfänger hat eine dringende Frage: wie viel und bis wann. Jedes andere Element existiert, um diese beiden Fakten zu stützen. Der fällige Betrag sollte die optisch dominanteste Zahl auf der Seite sein — größer, fetter, durch Weißraum oder ein dezentes Band abgesetzt. Setzen Sie das Fälligkeitsdatum gleich daneben. Eine Rechnung, die ihre Summe in einer ordentlichen Reihe gleichartiger Zahlen vergräbt, zwingt den Leser zur Suche, und ein Leser, der suchen muss, ist ein Leser, der das Dokument auf „später“ ablegt.

Treffen Sie die Erwartungen des Empfängers

Ein Dokument ist nur „professionell“ im Verhältnis zu dem, was sein Leser erwartet. Eine Kreditorenbuchhaltung im Konzern will ein cleanes, konventionelles Layout mit einem klaren Bestell- oder Referenzfeld und unmissverständlichen Steuerzeilen — Kreativität liest sich als Risiko. Ein Privatkunde, der eine einmalige Arbeit in Auftrag gibt, will Wärme und Klarheit statt Förmlichkeit. Gestalten Sie für die Person, die die Datei öffnet, nicht für Ihren eigenen Geschmack.

Streichen Sie, bevor Sie hinzufügen

Jeder Block, den Sie hinzufügen, ist etwas, das der Leser verarbeiten muss. Wenn ein Bereich ihm nicht hilft zu verstehen, was er schuldet, warum und wie er zahlt, streichen Sie ihn. Die saubersten Rechnungen sind nicht die mit dem meisten Design — es sind die mit der geringsten Reibung.

Konsistenz über die Dokumentfamilie hinweg

Ihr Angebot, Ihre Rechnung, Ihr Vertrag und Ihr Lieferschein sollten wie Geschwister aussehen. Wenn ein Kunde ein Angebot erhält, es annimmt und später die Rechnung bekommt, signalisiert die optische Kontinuität still, dass dasselbe sorgfältige Unternehmen hinter allem steht. Verwenden Sie über den gesamten Lebenszyklus dieselbe Vorlagenfamilie, dieselben Logos, dieselben Schriften.

Das ehrliche Fazit

Der visuelle Editor ist nicht da, um Sie zum Designer zu machen. Er ist für den Moment da, in dem die 12 Voreinstellungen wirklich nicht passen — und um sicherzustellen, dass das Ergebnis, wenn Sie über sie hinausgehen, weiterhin strukturiert ist, weiterhin korrekt umfließt und weiterhin in jeder Sprache dargestellt wird, in die Sie verkaufen. Stellen Sie mit dem Slot-Raster zusammen, branden Sie mit dem Zwei-Logo-System, wählen Sie eine Schrift, die Ihre Schriftsysteme abdeckt, machen Sie die Summe unübersehbar und gestalten Sie für die Person, die die Datei öffnet. Tun Sie das, und eine eigene Vorlage hört auf, Dekoration zu sein, und wird Teil davon, wie Sie pünktlich bezahlt werden.