Branding to krok, który daje najwięcej przy najmniejszym wysiłku. Dwadzieścia minut pracy zmienia każdy ekran, jaki członek kiedykolwiek zobaczy, od strony logowania po fakturę.
Podgląd na żywo
Panel po prawej stronie pokazuje zmiany na bieżąco. Przełączaj go między widokiem komputera i telefonu ikonami nad nim, bo członkowie korzystają z obu urządzeń, a logo czytelne na laptopie może być nieczytelne na telefonie. W tym samym rzędzie przełączysz podgląd między trybem jasnym i ciemnym oraz otworzysz go w trybie Pełny ekran.
Nic nie jest publiczne, dopóki nie zapiszesz zmian.
Logo
Prześlij dwie wersje: jedną dla trybu jasnego i jedną dla trybu ciemnego. Członkowie sami wybierają tryb, a ciemne logo na ciemnym tle znika.
- Format: SVG lub PNG. SVG pozostaje ostre w każdym rozmiarze, PNG wymaga odpowiedniej liczby pikseli.
- Proporcje: około 5:1, czyli logo szerokie, a nie kwadratowe.
- Rozmiar: 1000 x 200 px sprawdza się dobrze dla PNG.
Użyj wersji z przezroczystym tłem. Białe pole wokół logo widać od razu, gdy członek przełączy się na tryb ciemny.
Jeśli Twoje logo to kwadratowy znak z nazwą obok, prześlij właśnie tę wersję. Sam kwadratowy znak gubi się na szerokiej powierzchni.
Favicon
Favicon to mała ikona na karcie przeglądarki. Jego również prześlij w wersji jasnej i ciemnej.
- Format: SVG lub PNG.
- Proporcje: 1:1, czyli kwadrat.
- Rozmiar: 512 x 512 px.
Użyj znaku z logo, a nie pełnej nazwy. Przy szesnastu pikselach słowo zamienia się w plamę, a pojedyncza litera lub symbol nadal są czytelne.
Kolory
Cztery kolory, ustawiane osobno dla trybu jasnego i ciemnego:
| Kolor | Gdzie się pojawia |
|---|---|
| Podstawowy | Przyciski, linki, wszystko, co ma być klikane |
| Tekst | Tekst główny na całej platformie |
| Wyróżnienie | Aktywna pozycja menu, wybrana karta i inne akcenty, które przyciągają uwagę, choć nie są przyciskami |
| Tło | Powierzchnia, na której leży cała reszta |
Najważniejszy jest kolor podstawowy. Weź go z istniejącej identyfikacji wizualnej i sprawdź jego kontrast z tłem w obu trybach. Jasnożółty, który elegancko wygląda na białym tle, jako tekst na białym tle staje się nieczytelny.
Gdy zmienisz kolor podstawowy, pojawi się propozycja Dopasuj tło do koloru głównego. Zastosuj dodaje do tła strony 2% koloru podstawowego. Powierzchnia nawiązuje wtedy do Twojej marki, a czytelność się nie zmienia.
Zanim skończysz, przetestuj oba tryby. Tryb ciemny nie jest tu dodatkiem, a kolor, który działa tylko w jednym z nich, będzie wyglądał na zepsuty dla połowy Twoich członków.
Typografia
Wybierz jedną czcionkę dla całej platformy. Lista zawiera kroje bezszeryfowe, szeryfowe, o stałej szerokości, ozdobne i odręczne. Do tekstu w małych rozmiarach, czyli większości tego, co czytają członkowie, najlepiej nadaje się krój bezszeryfowy albo szeryfowy.
Zwykle najlepszy jest neutralny krój. Charakter nadaje logo, a tekst główny niesie treść.
Awatary członków
Awatary członków ustala kształt awatarów członków i użytkowników na całej platformie: Okrągły albo Kwadrat. Kwadrat pasuje do marki o ostrych narożnikach, a okrągły kształt to znany domyślny wybór.
Nie tylko branding
Karty u góry strony wyglądu oferują więcej:
- Układ: kształt strefy członkowskiej.
- Logowanie i rejestracja: ekran logowania.
- Ekran ładowania: animacja widoczna podczas uruchamiania platformy.
- Społeczność: nagłówek społeczności.
- Kursy: nagłówek kursów.
- Odtwarzacz wideo: elementy sterujące filmami.
Najpierw branding. Resztą warto się zająć, gdy logo i kolory są już na miejscu.