Branding levert het meeste op voor de minste moeite. Twintig minuten werk hier verandert elk scherm dat een lid ooit ziet, van de inlogpagina tot de factuur.
Open de instellingen voor vormgeving
Het livevoorbeeld
Het paneel rechts toont je wijzigingen terwijl je ze maakt. Wissel met de pictogrammen erboven tussen desktop en mobiel. Leden komen via allebei binnen, en een logo dat op een laptop goed leesbaar is, kan op een telefoon onleesbaar zijn. In dezelfde rij wissel je het voorbeeld tussen lichte en donkere modus en open je het in Volledig scherm.
Niets is openbaar zolang je niet opslaat.
Je logo
Upload twee versies: een voor de lichte modus en een voor de donkere modus. Leden kiezen zelf hun modus, en een donker logo op een donkere achtergrond verdwijnt.
- Formaat: SVG of PNG. SVG blijft op elke grootte scherp, PNG heeft genoeg pixels nodig.
- Verhouding: ongeveer 5:1, dus een breed logo in plaats van een vierkant.
- Afmeting: 1000 x 200 px werkt goed voor PNG.
Gebruik een versie met een transparante achtergrond. Een wit vlak rond je logo valt op zodra een lid naar de donkere modus overschakelt.
Bestaat je logo uit een vierkant beeldmerk met de naam ernaast, upload dan die versie. Een vierkant beeldmerk alleen raakt verloren in een brede ruimte.
Je favicon
De favicon is het kleine pictogram in het browsertabblad. Upload daarvan ook een lichte en een donkere versie.
- Formaat: SVG of PNG.
- Verhouding: 1:1, dus vierkant.
- Afmeting: 512 x 512 px.
Gebruik het beeldmerk uit je logo, niet de volledige naam. Op zestien pixels wordt een woord een vlek, terwijl één letter of een symbool nog leesbaar is.
Je kleuren
Vier kleuren, apart in te stellen voor de lichte en de donkere modus:
| Kleur | Waar je die ziet |
|---|---|
| Primair | Knoppen, links, alles waarop mensen moeten klikken |
| Tekst | De lopende tekst op het hele platform |
| Markeren | Het actieve menu-item, het geselecteerde tabblad en andere accenten die de aandacht trekken zonder een knop te zijn |
| Achtergrond | Het vlak waarop al het andere staat |
De primaire kleur is de belangrijkste. Neem die over uit je bestaande huisstijl en controleer hem in beide modi tegen de achtergrond. Een lichtgeel dat op wit chic oogt, wordt als tekst op wit onleesbaar.
Wijzig je de primaire kleur, dan verschijnt de melding Achtergrond afstemmen op je primaire kleur. Toepassen voegt 2% van je primaire kleur toe aan de paginaachtergrond. Zo sluit het vlak aan bij je merk, zonder dat de leesbaarheid verandert.
Test beide modi voordat je klaar bent. De donkere modus is hier geen bijzaak, en een kleur die maar in een van de twee werkt, ziet er voor de helft van je leden kapot uit.
Lettertype
Kies één lettertype voor het hele platform. De lijst bevat schreefloze, schreef-, monospace-, display- en handschriftletters. Voor lopende tekst op kleine formaten, en dat is het meeste wat je leden lezen, werkt een schreefloze letter of een schreefletter het best.
Een neutrale letter is meestal de juiste keuze. Je logo geeft het karakter, de lopende tekst draagt de woorden.
Avatars van leden
Avatars van leden bepaalt de vorm van de avatars van leden en gebruikers op het hele platform: Rond of Vierkant. Vierkant past bij een merk met scherpe hoeken, rond is de vertrouwde standaard.
Meer dan branding
De tabbladen boven aan de pagina voor vormgeving gaan verder:
- Lay-out voor de vorm van de ledenomgeving.
- Inloggen en registratie voor het inlogscherm.
- Laadscherm voor de animatie die verschijnt terwijl het platform opstart.
- Community voor de header van de community.
- Cursussen voor de header van de cursussen.
- Videospeler voor de bediening van je video’s.
Eerst de branding. De rest is de moeite waard zodra je logo en kleuren klaar zijn.