Projekt graficzny strony internetowej
Kwalifikacja INF.03

Jak zaprojektować layout? Jak przygotować grafikę do kodowania? Poradnik i ćwiczenia

1. Projektowanie układu graficznego (layout)

Dobry layout gwarantuje czytelność, funkcjonalność i estetykę strony. Na początek rozrysuj szkic strony w edytorze graficznym (np. Figma, Canva, Photopea, papier):

Nagłówek/Logo & Menu
Baner / Hero
Panel boczny
np. menu, reklamy, profil
Treść główna
artykuły, podstrony, galeria
Stopka
dane kontaktowe, linki
  • Nagłówek (Header): logo, menu główne
  • Hero/Baner: duży tytuł, slogan, przycisk, grafika powitalna
  • Main: sekcje artykułów, karta z opisem, galeria
  • Sidebar: szybki dostęp do menu, reklamy, profil użytkownika
  • Stopka (Footer): kontakt, copyright, linki
Przykładowy layout z edytora graficznego

2. Przygotowanie elementów graficznych do kodowania

  1. Stwórz logo lub znaczek w edytorze (np. Canva, Photopea) → zapisz jako logo.png lub logo.svg
  2. Przygotuj ikonę np. kontaktu (koperta) — eksportuj do icon-contact.svg
  3. Znajdź lub utwórz obrazek do banera strony — banner.jpg
  4. Ustal kolorystykę (akcenty, tła, tekst) i zapisz wartości w notatkach projektu
  5. Eksportuj wszystkie grafiki w jakości webowej (PNG, SVG, JPG, 1200px szerokości maks.)

3. Typografia i Paleta Kolorów (Zmienne CSS)

Kolory i fonty (typografia) definiują tożsamość wizualną strony (UI). W kodowaniu używamy zmiennych CSS (:root), aby łatwo zarządzać schematem kolorów.

Paleta Kolorów Projektu

primary
#1046d3
accent
#46d2c4
muted
#5b6b80
bg / Tło
#f7fcff
danger
#e53939

Zarządzanie Fontami

Fonty (kroje pisma) muszą być łatwe do odczytania (czytelność = UX) i spójne wizualnie (UI). Zawsze pamiętaj o fallbacku (zapasowym foncie):

Nagłówek (H3) - Font Sans-Serif

Używamy var(sans) dla większości tekstu. Font: "Segoe UI", Arial, sans-serif.

Elementy techniczne - Font Monospace

Używamy var(mono) dla kodu, logo, i liczb. Font: "Roboto Mono", "Courier New", monospace.

4. Ćwiczenia projektowe (do samodzielnego wykonania)

Ćwiczenie 1: Rozrysuj układ sekcji swojej przyszłej strony w edytorze. Oznacz nagłówek, główną treść, panel boczny i stopkę.
Ćwiczenie 2: Stwórz własne logo i minimum jedną ikonę w Canva/Photopea/Figma. Wyeksportuj jako SVG.
Ćwiczenie 3: Przygotuj przykładowy baner z grafiką i tekstem — zapisz jako obrazek banner.jpg → wykorzystaj go później w kodzie HTML.

5. Checklist — Twój graficzny projekt strony