Styl marki: logo, kolory, czcionki i menu

Moduł 4: Strony, wygląd i funkcje · Czas czytania: 8 min

Cel lekcji: Po tej lekcji potrafią Państwo w panelu Styl marki ustawić nazwę i logo, favikonę, styl, wygląd menu, kolory, czcionki, tryb ciemny i ruch, a także sprawdzić, czy tekst na stronie jest dobrze czytelny.

Kluczowe pojęcia: styl marki, styl (look), logo, sygnet, logotyp, favikona, pasek menu, kolor główny, kontrast, współczynnik kontrastu, WCAG, licencja webowa, tryb ciemny, ruch

Dlaczego styl marki to coś więcej niż ładny wygląd

Styl marki to stałe połączenie logo, kolorów i czcionek, po którym ludzie Państwa rozpoznają. Na stronie internetowej zapewnia rozpoznawalność (te same kolory na samochodzie, w ofercie i na stronie) i musi pozostać czytelny: jasnoszary tekst na białym tle wygląda spokojnie, ale wielu odwiedzających czyta go z trudem, zwłaszcza na telefonie w słońcu.

Wszystko w panelu Styl marki jest bezpłatne i od razu widoczne w podglądzie. Dopiero po kliknięciu Zapisz powstaje nowa wersja (lekcja 3.5). Jeśli chcą Państwo wrócić, wystarczy kliknąć Cofnij lub przywrócić starszą wersję.

Panel zawiera następujące bloki: Styl, Kolory, Czcionki, Pasek menu, Nazwa i logo, Obrazy, Kształt i odstępy, Czcionki i rozmiary, Tryb ciemny i Ruch.

Nazwa, logo i favikona

W bloku Nazwa i logo znajduje się nazwa strony, tak jak pojawia się w nagłówku i stopce. Pod nią jest logo:

• Prześlij własne logo: PNG z przezroczystym tłem, SVG, JPG lub WebP, do 2 MB. W pasku menu najlepiej sprawdza się logo poziome.
• Jeśli nie mają Państwo logo, kreator utworzył logotyp: Państwa nazwę zapisaną czcionką i w kolorach strony. Dopasowuje się on automatycznie, gdy je Państwo zmienią.
• Logo zaprojektowane przez AI: krótko opisują Państwo firmę i nastrój ("firma malarska na wsi, rzemieślnicza i godna zaufania") i klikają Zaprojektuj trzy logo. Otrzymują Państwo trzy sygnety (znak bez tekstu) w swoich kolorach, z nazwą obok, zapisaną Państwa czcionką. Łącznie kosztuje to 1 edycję. Jeden z nich wybierają Państwo przyciskiem Użyj, albo opisują, co można poprawić ("pierwsze, ale bardziej okrągłe") i klikają Zaprojektuj trzy nowe logo; to kolejna runda za 1 edycję.
• Wyświetlanie w menu i stopce: Logo i nazwa, Tylko logo lub Tylko nazwa oraz Rozmiar (Mały, Normalny, Duży).

Kreator ostrzega, gdy logo ma cienkie linie lub słaby kontrast z paskiem menu: w małym rozmiarze w pasku może wtedy zniknąć.

Logo od AI prosimy sprawdzić samodzielnie: czy nie jest zbyt podobne do logo innej firmy?

Favikona to mała ikona na karcie przeglądarki i przy zakładkach. Do wyboru są: Automatycznie: pierwsza litera w kolorach strony, Logo strony lub Własny plik (kwadratowy, PNG, SVG lub ICO, do 512 KB).

Styl i pasek menu

Styl (w kreatorze także look) jednym kliknięciem określa czcionki, kształty, przyciski, karty, menu i dekoracje. Jest ich dwanaście, na przykład Świeży, Ciepły, Biznesowy, Natura, Atelier i Noc. Państwa własne kolory pozostają bez zmian przy zmianie stylu; jeśli chcą Państwo także kolorów stylu, prosimy kliknąć Także kolory tego stylu. Styl Noc jest zawsze ciemny.

W bloku Pasek menu wybierają Państwo kształt paska u góry każdej strony, spośród piętnastu wzorów: pełna szerokość, wyśrodkowany, dzielony, dwa wiersze, kolorowy pasek, z obramowaniem, pigułka, z górnym paskiem, przezroczyste, minimalne, pływający, rubryki, segment, pełny ekran i menu boczne. Zawartość menu (lekcja 4.1) pozostaje taka sama. Kilka wskazówek z objaśnień w samym kreatorze:

• Przezroczyste wygląda dobrze tylko wtedy, gdy każda strona ma ciemną sekcję hero lub hero ze zdjęciem.
• Minimalne pokazuje tylko nazwę i jeden przycisk; linki do stron znajdują się wtedy w stopce.
• Z górnym paskiem umieszcza telefon i godziny otwarcia w wąskim pasku nad menu. Czy ten numer telefonu jest poprawny?

W opcji Kolor paska menu wybierają Państwo Automatycznie (zgodnie ze stylem), Biały, Jasnoszary, Ciemny lub Kolor akcentu. O inny kolor można poprosić na czacie.

Kolory i kontrast

W bloku Kolory ustawiają Państwo kolor główny (przyciski, akcenty), drugi kolor do gradientów oraz tło (białe, kremowe, chłodne, szare, odcień Państwa koloru lub wybrane samodzielnie). Opcja Przyciski z gradientem kolorów nadaje wszystkim głównym przyciskom przejście od jednego koloru do drugiego.

Tu pojawia się kontrast: różnica jasności między tekstem a tłem. Wyrażamy go jako współczynnik kontrastu, od 1:1 (brak różnicy) do 21:1 (czarne na białym). Międzynarodowe wytyczne dotyczące dostępnych stron internetowych, WCAG opracowane przez W3C, wymagają na poziomie AA co najmniej 4,5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu (około 18 punktów lub 14 punktów pogrubionych). Przyciski i inne elementy sterujące muszą osiągać co najmniej 3:1 względem otoczenia.

Kreator pilnuje tego za Państwa. Jeśli wybiorą Państwo kolor, na którym tekst jest słabo czytelny, kreator go dostosuje i poinformuje, co się zmieniło, na przykład: "Kolor tekstu ... zmienił się na ..., ponieważ w przeciwnym razie tekst byłby słabo czytelny." Jeśli chcą Państwo zachować dokładnie swoje kolory, prosimy włączyć Zachowaj dokładnie te kolory: kolory pozostaną, a tekst na nich automatycznie otrzyma czytelny kolor. Także w sekcjach, które AI tworzy z własnym formatowaniem, kreator poprawia kolory tekstu poniżej 4,5:1 (duży tekst 3:1).

Czego kreator nie ocenia: tekstu na zdjęciu lub w logo oraz nagłówka na tle zdjęcia z wieloma szczegółami. Te miejsca prosimy sprawdzić samodzielnie, na telefonie. Jeśli mają Państwo wątpliwości co do pary kolorów, prosimy wpisać oba kody kolorów do narzędzia do sprawdzania kontrastu (patrz Więcej informacji).

Pułapka: kolor firmowy z drukarni lub z oklejenia samochodu (na przykład jaskrawy żółty) rzadko nadaje się na kolor tekstu. Prosimy używać go jako akcentu lub tła, a tekst pozostawić ciemny.

Czcionki i własna czcionka

W bloku Czcionki wybierają Państwo czcionkę dla Nagłówki oraz dla Tekst główny. Czcionki są zapisane jako pliki na Państwa własnej stronie; nie powstaje żadne połączenie z zewnętrzną usługą czcionek. W bloku Czcionki i rozmiary ustawiają Państwo suwakami dla całej strony: interlinię i odstęp między literami w tekście i nagłówkach, liczbę znaków w wierszu, szerokość treści i grubość nagłówków. Zgodnie ze stylem przywraca ustawienie suwaka. W opcji Rozmiar tekstu wybierają Państwo Normalny, Duży lub Bardzo duży; można to zrobić także na czacie ("powiększ litery").

Można też użyć własnej czcionki: prosimy przesłać ją w bloku Czcionki lub za pomocą spinacza na czacie, jako .woff2, .woff, .ttf lub .otf, do 2 MB na plik (można przesłać kilka grubości). Następnie wybierają Państwo, do czego ma służyć: nagłówki, tekst lub oba. Nic to nie kosztuje. Czcionki z usługi takiej jak Adobe Fonts nie da się użyć.

Ważne: prosimy przesyłać tylko czcionkę, do której mają Państwo licencję webową. Czcionka to oprogramowanie objęte licencją. Licencja na używanie na komputerze (do przygotowania materiałów drukowanych) wcale nie zawsze pozwala umieścić plik na stronie internetowej, z której pobiera go każdy odwiedzający. Prosimy sprawdzić w warunkach licencji, czy użycie w internecie jest dozwolone. Czcionki objęte licencją SIL Open Font License wolno osadzać i rozpowszechniać.

Tryb ciemny i ruch

W bloku Tryb ciemny wybierają Państwo Wyłączone (zawsze jasny), Zawsze ciemny lub Zgodnie z urządzeniem. W tej ostatniej opcji odwiedzający, który ma telefon lub komputer ustawiony na tryb ciemny, zobaczy ciemną wersję Państwa kolorów. Tło, tekst i kolor główny w trybie ciemnym mogą Państwo wybrać samodzielnie. Przycisku, którym odwiedzający mogliby sami przełączać tryb, nie ma. Podgląd działa zgodnie z Państwa urządzeniem: aby zobaczyć wersję ciemną, prosimy ustawić telefon lub komputer na tryb ciemny i przy okazji sprawdzić logo.

W bloku Ruch wybierają Państwo Włączone, Spokojny lub Wyłączone dla całej strony, a w razie potrzeby wyjątek dla poszczególnych podstron. Tutaj wybierają Państwo także Efekt myszy na komputerze (brak, magnes lub plama światła). W podglądzie wszystko jest nieruchome; przycisk Odtwórz animację pokazuje ruch jeden raz. Jeśli odwiedzający ustawił na swoim urządzeniu ograniczenie ruchu, wszystko pozostaje nieruchome. Zbyt dużo ruchu rozprasza; na stronie z dużą ilością tekstu często lepsze jest Spokojny lub Wyłączone.

W kreatorze: jak to zrobić

1. Prosimy otworzyć Styl marki, blok Nazwa i logo. Kliknąć Prześlij własne logo lub Logo zaprojektowane przez AI.
2. W opcji Favikona wybrać logo lub automatyczną pierwszą literę.
3. Wypróbować dwa lub trzy style w bloku Styl; sprawdzić też widok Telefon.
4. W bloku Pasek menu wybrać wzór i kolor.
5. W bloku Kolory ustawić kolor główny. Przeczytać komunikaty kreatora.
6. W blokach Tryb ciemny i Ruch sprawdzić, co Państwo chcą ustawić.
7. Kliknąć Zapisz i ponownie opublikować stronę.

Podsumowanie

• Panel Styl marki jest bezpłatny; Zapisz tworzy nową wersję.
• Logo od AI kosztuje 1 edycję za trzy propozycje; favikonę kreator tworzy sam albo mogą Państwo przesłać własną.
• Dwanaście stylów i piętnaście wzorów menu; zawartość menu pozostaje bez zmian.
• WCAG wymaga kontrastu co najmniej 4,5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu; kreator tego pilnuje, z wyjątkiem zdjęć i logo.
• Własna czcionka tylko z licencją webową; tryb ciemny i ruch ustawiają Państwo zgodnie z potrzebami odwiedzających.

Quiz

Zadanie

Zadanie D4.2: Styl marki i kontrast. Prosimy ustawić styl marki i zmierzyć kontrast najważniejszych par kolorów.

Lista kontrolna:

• [ ] logo przesłane lub wybrane spośród propozycji AI;
• [ ] favikona ustawiona i sprawdzona na karcie przeglądarki opublikowanej strony;
• [ ] styl i wzór menu wybrane, sprawdzone w widoku Telefon;
• [ ] kolor główny ustawiony, komunikaty kreatora przeczytane;
• [ ] kontrast koloru tekstu na tle oraz tekstu przycisku na kolorze przycisku zmierzony narzędziem do sprawdzania kontrastu;
• [ ] tryb ciemny i ruch wybrane świadomie;
• [ ] styl marki zapisany, a strona ponownie opublikowana.

Pytania:

1. Jakie współczynniki kontrastu zmierzyli Państwo dla tekstu na tle i dla tekstu przycisku na przycisku, i czy osiągają 4,5:1?
2. W którym miejscu strony tekst znajduje się na zdjęciu i czy jest dobrze czytelny na telefonie?
3. Czy używają Państwo własnej czcionki? W którym miejscu licencji jest napisane, że użycie w internecie jest dozwolone?

Po kliknięciu "gotowe" zobaczą Państwo przykładową odpowiedź: Schildersbedrijf Example zmierzyła ciemnoszary na białym 14,5:1 i biały tekst na zielonym przycisku 5,1:1, oba powyżej 4,5:1; nagłówek na zdjęciu w sekcji hero był słabo czytelny, więc firma wybrała ciemniejsze zdjęcie; bez własnej czcionki, więc licencja nie jest potrzebna.

Więcej informacji

• Understanding Success Criterion 1.4.3: Contrast (Minimum) (W3C, w języku angielskim): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
• Understanding Success Criterion 1.4.11: Non-text Contrast (W3C, w języku angielskim): https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html
• Contrast Checker (WebAIM, w języku angielskim): https://webaim.org/resources/contrastchecker/
• SIL Open Font License, oficjalny tekst (w języku angielskim): https://openfontlicense.org/open-font-license-official-text/