Projektowanie interfejsów użytkownika

1. Typografia — sztuka układania liter w piękne nagłówki, akapity, przypisy
2. Typografia w web designie to jeden z najważniejszych elementów projektowania, który wpływa na jakość Twojego projektu i komunikację z odbiorcą
3. Typografii nie da się przedawkować, im lepiej radzisz sobie z fontami, tym lepszym będziesz projektantem graficznym.
4. Terminologia:

• Font — wszystkie kroje pisma przystosowane do wyświetlania na ekranie nazywamy fontem
• Czcionka — jest to fizyczny przedmiot, który układało się kiedyś w szpaltach tak, aby go odciskać na papierze
• Fonty systemowe — fonty, co do których producenci komputerów z całego świata porozumieli się, że będą je instalować na każdym systemie teraz i w przyszłości, aby nie było konfliktów z wyświetlaniem się tekstów: Arial | Times New Roman | Tahoma | Courier | Impact | 
• Fonty w ujęciu modernistycznym — takie, które stawiają na czytelność przekazu, aby móc sięgać po fonty bardziej ekspresyjne, szalone, trzeba najpierw znać zasady i podstawy

1. Google Fonts

• wyszukiwarka: best google fonts 2024
• Figma jest bezpośrednio połączona z Google Fonts — wszystkie fonty Google są dostępne w Figmie
• domyślnym fontem Figmy jest Inter 
• korzystanie z fontów Googla jest bezpłatne i łatwe dla deweloperów

2. Adobe Fonts

• świetny font Acumin

3. Oficjalne strony wytwórni krojów pisma

• https://www.luzi-type.ch/ (Messina Sans)
• ‍https://pangrampangram.com/
• ‍https://abcdinamo.com/
• ‍https://www.schick-toikka.com/
• ‍https://optimo.ch/
• ‍https://tightype.com/
• ‍https://www.milieugrotesque.com/
• ‍https://klim.co.nz/

1. Obserwuj najlepsze wytwórnie fontów (type foundries), obserwuj ich konta na IG

2. Typewolf — selekcja najlepszych stron w internecie pod kątem typografii, z listą fontów, których używają
3. Site inspire → styles → Typographic websites
4. Rozszerzenia Fonf Finder | Fonts Ninja kiedy analizujesz dobry projekt to przeanalizuj jego liternictwo, np. Apple iPhone
5. Książki:

• Adrian Frutiger, Człowiek i jego znaki
• Michael Mitchell i Susan Wightman, Typografia książki. Podręcznik projektanta
• Hoeks Henk, Lentjes Ewan, Triumf typografii. Kultura, komunikacja, nowe media
• Eric Gill,  Esej o typografii
• Jost Hochuli, Detal w typografii

1. Licencja na wykorzystanie komercyjne

• Clash Grotesk
• General Sans
• Overused Grotesk
• Familjen
• Newsreader
• Boska
• Phudu
• Regrade
• Chintzy
• Free Fat Font
• Neue Kaine
• Fleuron

2. Licencja wyłącznie na własne projekty niekomercyjne

• Eger
• Projekt
• Trafika Sans (trial)
• Acanski

1. Teksty w digitalu

• Nagłówki (dispay fonts) — duże teksty, maja być piękne, wyrażają emocje swoim wyglądem
• Body tekst / tekst paragrafu / tekst dziełowy — mniejszy, ułożony w kolumny, skupiony na czytelności, nie na ekspresji

2. Nośnikiem stylu w projekcie jest

• kontent wizualny
• kolor
• układ strony

3. Natomiast font ma być czytelny!!!
4. Wystarczy jeden stylowy font dla nagłówków, jeśli to jest dla Ciebie ważne, ale body tekst złóż fontem czytelnym

1. Rozróżniaj fonty szeryfowe | fonty bezszeryfowe
2. Dobieraj fonty kierując się zasadami geometryczności fontu oraz jego kontrastem, chodzi o to aby dwa fonty miały podobny stopień kontrastu i geometryczności:

• geometryczność — jak bardzo litery są oparte na szerokości okręgu, a jak bardzo są elipsą, idealny geometrycznym fontem jest Futura (litera O jest praktycznie kręgiem)
• kontrast — różnica pomiędzy cienkimi i grubymi partiami liter

3. Pamiętaj, że jeden krój pisma może mieć wiele odmian, więc może być tak, że będziesz dobierać w pary dane odmiany kroju pisma
4. Przykład z Helvetica Now Display i Helvetica Now Text
5. Samodzielnie dostosuj font za pomocą odległości międzyliterowej, np. ze zwykłego Ariala stwórz wersję dla nagłówka i dla tekstu
6. Można też łączyć dla nagłówka i dla tekstu ten sam font w różnych odmianach, dla nagłówka — grubszy font, dla tekstu — cieńszy, wtedy łączymy co 2, albo co 3 odmiany, aby różnica była wyraźna dla oka

1. H1-H6 — H1 to największy nagłówek, H6 — najmniejszy; dla wszystkich nagłówków definiujemy interlinię
2. body text — najczęściej 16px-20px
3. body small — np. 14px
4. caption — do przypisów, np. 12px
5. body link
6. body small link
7. caption link 
8. W Figmie możesz użyć pluginu Styler
9. Specyfikację umieszczamy na osobnym page’u np. pod nazwą specyfikacja
10. Jeśli podczas projektowania zaistnieje potrzeba dodania nowego stylu tekstowego to dodajemy go do systemu, np. 3 style do bardzo dużych tekstów

Dostępność — to dziedzina projektowania, która dba o to, aby nasz projekt był czytelny i łatwy do przyswojenia dla wszystkich użytkowników, którzy chcą się z nim zapoznać. Również osoby, który mają wyzwania poznawcze: osoby starsze, osoby niedowidzące, osoby z daltonizmem i nierozróżnianiem kolorów, neuroatypowe, przebodźcowane, zmęczone…

1. Szerokość kolumny 10-14 słów, aby oko mogło łatwo wrócić do początku tekstu, nie może być za wąsko, bo oko zmęczy się zbyt częstymi przeskokami
2. Nie wyrównujemy tekstu do środka:

• bo oko po przejściu do początku musi zacząć czytać w trochę innym miejscu w osi poziomej designu
• przy wyrównaniu do lewej tego problemu nie ma, bo w lini pionowej zaczynami czytać zawsze w tym samym miejscu
• możesz wyrównywać do środka krótkie nagłówki

3. Dbaj o odpowiedni kontrast pomiędzy tłem a tekstem:

• jeśli nie masz pewności skorzystaj z narzędzia Contrast Checker
• w Figmie korzystaj np. z pluginu Able — Friction free accessibility

według Web Content Accessibility Guidelines (WCAG) 2.1