Branding ist der Schritt mit dem besten Verhältnis von Aufwand zu Wirkung. Zwanzig Minuten hier verändern jeden Bildschirm, den ein Mitglied je sieht, von der Anmeldeseite bis zur Rechnung.
Die Live-Vorschau
Die Fläche rechts zeigt Ihre Änderungen, während Sie sie vornehmen. Schalten Sie mit den Symbolen darüber zwischen Desktop und Mobil um, denn Mitglieder kommen über beides, und ein Logo, das auf dem Laptop gut lesbar ist, kann auf dem Telefon unleserlich sein. In derselben Reihe schalten Sie die Vorschau zwischen hellem und dunklem Modus um und öffnen sie im Vollbild.
Nichts wird öffentlich, bevor Sie speichern.
Ihr Logo
Laden Sie zwei Fassungen hoch: eine für den hellen und eine für den dunklen Modus. Mitglieder wählen ihren Modus selbst, und ein dunkles Logo auf dunklem Grund verschwindet.
- Format: SVG oder PNG. SVG bleibt in jeder Größe scharf, PNG braucht genug Pixel.
- Seitenverhältnis: etwa 5:1, also ein breites Logo statt eines quadratischen.
- Größe: 1000 x 200 px funktionieren gut für PNG.
Nutzen Sie eine Fassung mit transparentem Hintergrund. Ein weißer Kasten um Ihr Logo fällt in dem Moment auf, in dem ein Mitglied in den dunklen Modus wechselt.
Wenn Ihr Logo eine quadratische Bildmarke mit dem Namen daneben ist, laden Sie genau diese Fassung hoch. Eine quadratische Bildmarke allein geht in der Breite verloren.
Ihr Favicon
Das Favicon ist das kleine Symbol im Browsertab. Laden Sie auch davon eine helle und eine dunkle Fassung hoch.
- Format: SVG oder PNG.
- Seitenverhältnis: 1:1, also quadratisch.
- Größe: 512 x 512 px.
Nutzen Sie die Bildmarke aus Ihrem Logo, nicht den ganzen Namen. Bei sechzehn Pixeln ist ein Wort ein Fleck, während ein einzelner Buchstabe oder ein Symbol noch lesbar bleibt.
Ihre Farben
Vier Farben, getrennt für hellen und dunklen Modus:
| Farbe | Wo sie erscheint |
|---|---|
| Primär | Schaltflächen, Links, alles, was angeklickt werden soll |
| Text | Fließtext auf der ganzen Plattform |
| Hervorheben | Der aktive Menüpunkt, der gewählte Reiter und andere Akzente, die Aufmerksamkeit ziehen, ohne Schaltfläche zu sein |
| Hintergrund | Die Fläche, auf der alles andere liegt |
Auf Primär kommt es an. Übernehmen Sie sie aus Ihrer bestehenden Marke und prüfen Sie sie in beiden Modi gegen den Hintergrund. Ein blasses Gelb, das auf Weiß edel aussieht, wird als Text auf Weiß unleserlich.
Wenn Sie die Primärfarbe ändern, bietet ein Hinweis Hintergrund an die Primärfarbe angleichen an. Anwenden mischt 2 % Ihrer Primärfarbe in den Seitenhintergrund. Das bindet die Fläche an Ihre Marke, ohne die Lesbarkeit zu verändern.
Prüfen Sie beide Modi, bevor Sie fertig sind. Der dunkle Modus ist hier kein Nachgedanke, und eine Farbe, die nur in einem der beiden funktioniert, wirkt für die Hälfte Ihrer Mitglieder kaputt.
Typografie
Wählen Sie eine Schrift für die ganze Plattform. Die Liste enthält Schriften ohne Serifen, mit Serifen, Monospace-, Display- und Handschriften. Für Fließtext in kleiner Größe, also für das meiste, was Ihre Mitglieder lesen, eignet sich eine Schrift mit oder ohne Serifen am besten.
Eine zurückhaltende Schrift ist meistens richtig. Ihr Logo trägt den Charakter, der Fließtext trägt die Worte.
Mitglieder-Avatare
Mitglieder-Avatare legt die Form der Avatare von Mitgliedern und Benutzern auf der ganzen Plattform fest: Rund oder Quadratisch. Quadratisch passt zu einer Marke mit klaren Ecken, rund ist der vertraute Standard.
Über das Branding hinaus
Die Reiter oben auf der Designseite gehen weiter:
- Layout für die Form des Mitgliederbereichs.
- Anmeldung & Registrierung für die Anmeldeseite.
- Ladebildschirm für die Animation, die beim Start der Plattform läuft.
- Community für den Header der Community.
- Kurse für den Header der Kurse.
- Video-Player für die Steuerelemente auf Ihren Videos.
Branding zuerst. Der Rest lohnt einen Blick, sobald Logo und Farben stehen.