Wymagania wobec projektu UI — hretheum.com

Kierunek

Strona wygląda jak profil doświadczonego lidera projektowania, a nie jak lista bloków jeden pod drugim. Ma wyraźną hierarchię, siatkę i rytm, w których od razu widać, co jest najważniejsze, a głębsze treści są o jedno kliknięcie dalej.

Jedna wyrazista rzecz: warstwa dowodowa. Każdy fakt w tekście ma dyskretny znacznik źródła. Najechanie, fokus albo dotknięcie pokazuje podgląd: cytat ze źródła, dokument, status („potwierdzone przez Eryka” albo „sprawdzone w kodzie”) i datę. To jest wizualny podpis tej strony i jej teza w jednym, więc wokół niej wszystko inne ma być spokojne i zdyscyplinowane.

Druga rzecz, informacyjna, nie dekoracyjna: oś kariery od 2000 roku do dziś, która pokazuje równoległość ról (np. praktyka konsultingowa w latach 2003–2017 obok etatów).

Czego unikać

Strona nie może wpaść w żaden z typowych szablonów stron generowanych:

kremowe tło z szeryfowym nagłówkiem i akcentem w kolorze terakoty;
prawie czarne tło z jednym jaskrawym akcentem;
układ gazetowy z cienkimi liniami i gęstymi kolumnami;
zestaw jednakowych zaokrąglonych kart z tym samym cieniem i gradientowymi plamami;
etykiety wersalikami nad każdym nagłówkiem, ciągi metadanych łączone kropkami, krój monospace do drobnych etykiet, strzałka „→” doklejana do linków;
duża liczba z małym podpisem jako domyślny element nagłówka;
animacje wjazdu przy każdej sekcji.

System wizualny

Wykonawca zaczyna od planu tokenów (paleta 4–6 kolorów z nazwami i wartościami, kroje i ich role, skala typograficzna, siatka, odstępy, promienie, cienie) i przeglądu tego planu względem listy „czego unikać” przed napisaniem kodu. Plan trafia do repozytorium jako dokument i jako tokeny CSS.

Wymagania:

Typografia: jedna albo dwie rodziny, wyraźnie różne, samohostowane, z pełnymi polskimi znakami. Skala typograficzna z jasnymi stopniami, długość wiersza tekstu ciągłego do ok. 75 znaków. Nagłówki jako aktywny element projektu, nie neutralny nośnik.
Kolor: motyw jasny jako podstawowy i motyw ciemny zgodny z ustawieniem systemu oraz z przełącznikiem. Akcent zarezerwowany dla warstwy dowodowej i stanów interaktywnych. Kontrast tekstu co najmniej 4,5:1, elementów nietekstowych 3:1, w obu motywach.
Siatka: wyraźna siatka kolumn na desktopie, układy asymetryczne tam, gdzie oddają hierarchię (np. wyróżniona praca większa od pozostałych). Struktura (linie, numeracja, obramowania) tylko tam, gdzie niesie informację; numeracja wyłącznie dla treści, które naprawdę są sekwencją.
Ruch: jeden przemyślany moment przy wejściu na stronę albo żaden; ruch w odpowiedzi na działanie użytkownika (rozwinięcie, otwarcie podglądu, zadokowanie czatu) pokazuje, co się zmieniło. prefers-reduced-motion wyłącza ruch niebędący reakcją.
Obrazy: bez zdjęć stockowych i ilustracji dekoracyjnych. Jeśli case study potrzebuje obrazu, to tylko obraz z paczki (w przyszłości); do tego czasu typografia i struktura.

Moduły (komponenty wielokrotnego użytku)

Moduł	Gdzie	Wymagania
Nagłówek strony	wszędzie	nazwisko, nawigacja (Prace, Doświadczenie, O mnie), przełącznik języka zachowujący stronę, przycisk czatu; na wąskich ekranach menu rozwijane z dostępnym przyciskiem
Tożsamość	strona główna	jedno zdanie i podsumowanie z dokumentu „O mnie”, ze znacznikami źródła
Karta pracy	strona główna, `/work`, powiązane	trzy warianty: wyróżniona (duża), standardowa, wiersz listy; tytuł, organizacja albo etykieta anonimowa, okres, rola, linia, zajawka
Sekcja linii	strona główna, `/work`	nazwa linii, krótki opis z interfejsu (bez faktów), prace w linii
Filtry prac	`/work`	linia, kompetencja, organizacja, typ; stan w adresie (udostępnialny link), wynik bez przeładowania
Metryczka	case study	organizacja, okres, rola, linia, kompetencje
Treść dokumentu	case study, O mnie	Markdown z paczki: nagłówki, listy, tabele, cytaty; spis treści dla dłuższych tekstów; kotwice sekcji
Znacznik źródła i podgląd	wszędzie tam, gdzie są fakty	dostępny z klawiatury, z dotyku i myszą; podgląd z cytatem, dokumentem, statusem, datą; zamyka się klawiszem Esc
Panel „Fakty w tym case study”	case study	lista twierdzeń, rozwijane cytaty, przewinięcie do miejsca w tekście
Oś kariery	strona główna (skrót), `/experience`	role w czasie z równoległością; wersja liniowa na wąskich ekranach
Macierz wymagań	strona pod ogłoszenie	wiersz na wymaganie, status pokrycia, rozwinięcie z twierdzeniami i linkami do case studies
Panel czatu	wszędzie	zob. niżej
Kontakt	strona główna, O mnie, case study, strona pod ogłoszenie	e-mail, LinkedIn, CV (gdy istnieje)
Stopka	wszędzie	informacja o przechowywaniu pytań z czatu, wersja paczki, zdanie o źródle treści

Panel czatu

Komponent na poziomie układu aplikacji, nie strony: rozmowa i stan panelu przeżywają nawigację między stronami.
Desktop ≥ 1024 px: zadokowany po prawej, 380–420 px, treść strony się zwęża zamiast być zasłaniana; zwijanie do przycisku przy krawędzi; zapamiętany stan otwarcia.
Poniżej 1024 px: przycisk otwiera arkusz od dołu na pełną wysokość, z pułapką fokusu, przyciskiem zamknięcia i Esc.
Pytania sugerowane zależą od kontekstu strony; na stronie pod ogłoszenie panel jest domyślnie otwarty.
Odpowiedzi ogłaszane czytnikom ekranu przez region aria-live="polite", fokus po wysłaniu zostaje w polu pytania.
Cytaty w odpowiedziach otwierają ten sam podgląd źródła co znaczniki w treści.
Informacja o retencji 90 dni widoczna w panelu.
Zachowanie i gwarancje odpowiedzi (wyłącznie z paczki, cytaty, „tego nie wiem”, granice tematów, limity) bez zmian.

Język i adresy

Angielski domyślnie bez prefiksu, polski pod /pl/…; hreflang dla par stron; przełącznik prowadzi do odpowiednika strony.
Slugi prac stabilne, po angielsku, wspólne dla obu języków, pochodzące z pola slug w paczce.

Dostępność, wydajność, SEO

WCAG 2.2 AA na wszystkich stronach i stanach, w obu motywach i językach: axe bez naruszeń krytycznych i poważnych, widoczny fokus, link „Przejdź do treści”, poprawne punkty orientacyjne, cała obsługa z klawiatury, reflow do 320 px, odstępy tekstu 1.4.12.
Wydajność na łączu 4G: LCP poniżej 2 s na stronie głównej i case study, CLS poniżej 0,1, JavaScript strony głównej bez czatu jak najmniejszy (czat ładowany po interakcji albo po załadowaniu treści).
Brak zasobów z zewnętrznych domen (fonty i ikony samohostowane), zgodnie z obecną polityką prywatności.
Domena główna indeksowalna: sitemap.xml, robots.txt, metadane i obrazy społecznościowe generowane z paczki. Subdomeny pracodawców i nieznane subdomeny zostają z noindex.

Stany

Każdy moduł ma opisane i przetestowane stany: ładowanie, pusto (np. filtr bez wyników — z propozycją, co zmienić), błąd (np. czat niedostępny — z informacją, co zrobić), długie treści, tytuły w obu językach.