Jak zaprojektować i zbudować stronę, która nie wygląda jak z 2012 roku

Zanim otworzysz edytor

Dobra strona zaczyna się od odpowiedzi na kilka pytań, a nie od wyboru koloru. Projekt zrobiony "na czuja" kończy się przeróbkami, a te kosztują najwięcej.

1. BriefPo co ta strona? Kto na nią wejdzie i co ma tam zrobić: zadzwonić, kupić, zapisać się? Jedno główne działanie, reszta jest dodatkiem.
2. TreściTeksty i zdjęcia przed layoutem. Projekt pod "Lorem ipsum" rozsypie się, gdy wejdą prawdziwe treści.
3. Struktura i nawigacjaMapa podstron na kartce. Jeśli menu ma więcej niż 6 pozycji, coś jest do wyrzucenia albo schowania głębiej.
4. WireframeSzkic układu bez kolorów i zdjęć, tylko prostokąty i podpisy. Tu decydujesz, co jest ważne.
5. StylPaleta, dwie czcionki, skala odstępów. Zapisz to jako zmienne CSS, nie w głowie.
6. Kod, test, wdrożenieNajpierw wersja na telefon, potem większe ekrany. Test na prawdziwym telefonie, Lighthouse, dopiero potem hosting.

Układ strony: kliknij i zobacz, co robi każda sekcja

Większość stron firmowych to ten sam szkielet. Różnią się treścią i tym, co dostaje najwięcej uwagi.

Cztery zasady, które ratują większość layoutów

• Jeden najważniejszy element na ekran. Jeśli wszystko krzyczy, nic nie słychać.
• Białe miejsce to nie marnotrawstwo. Odstęp grupuje rzeczy lepiej niż ramka.
• Wyrównanie do jednej siatki. Zacznij od lewej krawędzi tekstu i trzymaj się jej.
• Pierwszy ekran odpowiada na pytanie "co to jest i czy to dla mnie". Jeśli trzeba scrollować, żeby się dowiedzieć, jest za późno.

Kolor i typografia

Tekst to 90% strony, więc typografia robi większą robotę niż kolory. Kolorów potrzebujesz mniej, niż myślisz.

Zasada: tło, tekst, jeden akcent

Akcent ma być użyty rzadko (przyciski, linki), inaczej przestaje być akcentem. Szare i neutralne odcienie dobieraj z lekkim przebarwieniem w stronę koloru głównego, wtedy całość się klei.

Kontrast to nie kwestia gustu

WCAG wymaga stosunku kontrastu co najmniej 4,5:1 dla zwykłego tekstu i 3:1 dla dużego. Sprawdzaj w narzędziu kontrastu w DevTools albo na stronie WebAIM Contrast Checker. Jasnoszary tekst na białym tle to najczęstszy błąd.

Typografia: dwie czcionki wystarczą

Jedna na nagłówki, druga na tekst, wyraźnie różne (np. bezszeryfowa i szeryfowa). Linia tekstu 45 do 75 znaków, interlinia około 1,5. Rozmiary w rem, a nagłówki płynne przez clamp().

Nowoczesny CSS: mniej hacków, więcej gotowców

Większość rzeczy, do których kiedyś trzeba było Bootstrapa czy jQuery, dziś robi sam CSS.

:root{
  --ink:#16213a;
  --accent:#2a56d6;
  --space:1.5rem;
}
a{color:var(--accent)}

.cards{
  display:grid;
  gap:1.5rem;
  grid-template-columns:
    repeat(auto-fit,minmax(16rem,1fr));
}

h1{
  font-size:clamp(2rem,5vw,3.5rem);
}
.wrap{
  width:min(100% - 2.5rem, 62rem);
  margin-inline:auto;
}

img{
  aspect-ratio:4/3;
  object-fit:cover;
  max-width:100%;
}
.card:has(img){padding:0}

Mobile first

Piszesz style dla telefonu, a większe ekrany dodajesz przez @media (min-width: 48rem). Kod jest krótszy, a telefon, czyli większość ruchu, dostaje najlżejszą wersję.

Animacje z umiarem

Animuj to, co odpowiada na działanie użytkownika: najechanie, kliknięcie, otwarcie menu. Efekt wjeżdżania każdej sekcji z dołu jest już wszędzie i męczy. Zawsze szanuj ustawienie systemowe: @media (prefers-reduced-motion: reduce).

Dostępność i wydajność

To nie dodatek na końcu. To także SEO, a w wielu przypadkach obowiązek prawny (dotyczy m.in. stron instytucji publicznych i szkół).

• Poprawna struktura: header, nav, main, section, footer i jeden h1 na stronę.
• Każde zdjęcie ma sensowny alt, a dekoracyjne ma pusty alt="".
• Każde pole formularza ma label powiązany przez for. Sam placeholder to nie etykieta.
• Całość obsłuży się klawiaturą (Tab), a fokus jest widoczny: :focus-visible.
• Linki mówią, dokąd prowadzą. "Kliknij tutaj" nic nie mówi czytnikowi ekranu.
• Zdjęcia w WebP lub AVIF, z width, height i loading="lazy" poniżej pierwszego ekranu.
• Wynik Lighthouse powyżej 90 w czterech kategoriach to realny cel, a nie fanaberia.

Szablon startowy

Jeden plik, bez frameworków. Semantyczny HTML, zmienne, siatka bez media queries, link "przejdź do treści", widoczny fokus. Skopiuj, zapisz jako index.html i podmień treści.

Ciekawe przykłady do rozebrania na części

Otwórz stronę, wciśnij F12 i zobacz, jak to jest zrobione. Poniżej co z której warto wynieść.

Strony mogą się zmienić od czasu przygotowania tej lekcji, więc traktuj to jako listę miejsc do sprawdzenia, a nie gwarancję tego, co zobaczysz dziś.

Ćwiczenie analizy

Wybierz jedną stronę i odpowiedz na piśmie: kto jest odbiorcą, jaką czcionkę i ile kolorów widać, co jest jedynym głównym przyciskiem, i co byś poprawił.

Zadania dla uczniów

1. Mini brief. Dla wybranej lokalnej firmy (warsztat, fryzjer, sklep) opisz cel strony, odbiorcę i jedno główne działanie.
2. Wireframe. Narysuj układ strony głównej na kartce, z podpisami sekcji. Bez kolorów.
3. Styl. Zdefiniuj paletę (3 do 4 kolorów) i dwie czcionki jako zmienne CSS. Sprawdź kontrast każdej pary tekst/tło.
4. Kod. Na bazie szablonu zbuduj stronę zgodną z wireframe. Wymagania: mobile first, siatka bez media queries dla ofert, poprawny formularz z etykietami.
5. Test. Uruchom Lighthouse, zapisz wyniki i popraw przynajmniej dwie rzeczy, które wskazał.