Zasady Designu
I. Cel i filozofia
1.1. HIG (Human Interface Guidelines) projektu Gryf wzorowany jest na GNOME HIG.
1.2. Celem jest stworzenie spójnego, minimalistycznego ekosystemu cyfrowego, który priorytetyzuje:
- Maksymalną dostępność – treści zrozumiałe dla każdego, niezależnie od urządzenia czy ograniczeń użytkownika;
- Łatwe wdrażanie – poprzez minimalizm stylu i powtarzalność komponentów stylu, by zapewnić spójny wygląd wszystkich platform;
- Czytelność i przejrzystość – treść najważniejsza, bez rozpraszających elementów dekoracyjnych;
- Schludność – wyrównany, prosty układ, umożliwiający prostą konsumpcję treści.
1.3. Zasady designu stosowane są do wszystkich projektów kooperatywy.
1.4. Przy wszystkich wymienionych w tych zasadach kryteriach dla projektów zostawione jest pole do pewnej swobody twórczej.
II. Typografia
2.1. Stosuje się głównie czcionki bezszeryfowe (sans-serif), łatwo dostępne publicznie. Przykładem takiej czcionki jest Poppins.
2.2. W ramach danego projektu należy stosować wyłącznie jedną czcionkę bezszeryfową i ewentualnie dodatkową czcionkę monospace.
III. Układ
3.1. Układ stron internetowych oraz dokumentów opiera się na stosowaniu nagłówków:
- H1 – dla głównej nazwy strony/podstrony;
- H2/H3 – dla nazw sekcji i podsekcji;
- H4 – dla nazw sekcji informacyjnych (tj. przypisy, bibliografia, autorstwo, prawa, źródła itd.).
3.2. Strony internetowe powinny zawierać spójne górne menu nawigacyjne, główną część z zawartością oraz spójną stopkę, w układzie prostego przewijania od góry do dołu. Powinno się unikać stosowania dodatkowych kontenerów w postaci pasków bocznych, tam, gdzie jest możliwość.
3.3. Każda strona powinna zawierać możliwość wygodnej nawigacji po swojej zawartości, poprzez stosowanie odnośników do konkretnych części strony lub szybkiej nawigacji na początek zawartości (dotyczy dłuższej zawartości).
3.4. Strony internetowe powinny być dostosowane do małych ekranów oraz urządzeń przenośnych poprzez stosowanie responsywnego układu.
3.5. Cały układ stron internetowych, dokumentów oraz grafik powinien być tworzony w oparciu o sekcje na całą szerokość układu, zawierające w sobie poszczególne komponenty.
3.6. Cały układ stron internetowych, dokumentów oraz grafik powinien być nastawiony na minimalizację treści oraz proste ułożenie komponentów jeden pod drugim / jeden obok drugiego na daną sekcję w celu wygodnej nawigacji.
IV. Komponenty
4.1. Komponenty powinny unikać stosowania ostrych, niezaokrąglonych krawędzi, podkreśleń oraz obramowań.
4.2. Komponenty powinny zawierać czytelne odstępy.
4.3. Preferowana skala dla rozmiarów zaokrągleń oraz odstępów w treści: 4px, 6px, 8px, 16px, 24px, 32px, 48px, 80px, 96px.
4.4. Podkreślenia i obramowania powinny być stosowane wyłącznie w celu wyróżnienia wybranych, wskazanych komponentów.
4.5. Komponenty powinny być statyczne, zgodne z flat design, bez stosowania głębi. Odstępstwem od tej reguły może być jedynie wyróżnianie wybranych komponentów lub ich elementów – np. dla wskazania interaktywności elementu interfejsu.
V. Kolorystyka
5.1. Na dany projekt powinna przypadać spójna, wyselekcjonowana paleta barw. Zaleca się maksymalnie 8 kolorów.
5.2. Kolorystyka powinna być przyjazna dla jak największej grupy odbiorczej. Kolory elementów i tła powinny ze sobą wyraźnie kontrastować dla zachowania czytelności.
5.3. Kolorystyka wykorzystywana do tej pory w projektach:
- Czerwony 1: #F53838;
- Czerwony 2: #FF4A4A;
- Czerwony 3: #FF7070;
- Szary 1: #1e1e1e;
- Szary 2: #171010;
- Szary 3: #eeeeee;
- Szary 4: #f5f5f5;
5.4. Kolorystyka powinna tematycznie odnosić się do danego projektu, np. dla projektów regionalnych winna nawiązywać do regionalnej symboliki.
5.5. Zaleca się wtórne wykorzystywanie kolorystyki stosowanej do tej pory w innych projektach lub stosowanie kolorystyki GNOME HIG.