Projekt 3: panel dashboardu

Cel projektu

Celem jest stworzenie responsywnego dashboardu dla panelu kursu online. Widok ma być spokojny, skanowalny i gotowy do codziennej pracy, a nie marketingowy.

• Użytkownik ma od razu zobaczyć najważniejsze metryki.
• Układ ma działać od telefonu po szeroki desktop.
• Karty danych mają mieć spójne odstępy, tytuły i wartości.
• Lista aktywności albo zadania mają być czytelne bez poziomego przewijania.
• Panel ma mieć dostępne stany linków, filtrów i akcji.

Brief projektu

Zaprojektuj dashboard dla platformy edukacyjnej „CSS Sprint Manager”. Panel ma pokazać postęp kursantów, aktywne zadania, tygodniowy trend i ostatnie aktywności zespołu.

Kryteria sukcesu

Dashboard jest dobry wtedy, gdy użytkownik może szybko odpowiedzieć na pytania: co się dzieje, co wymaga uwagi i gdzie kliknąć dalej.

• Metryki są krótkie, opisane i porównywalne wizualnie.
• Najważniejszy panel ma większy obszar albo mocniejszy ciężar wizualny.
• Grid nie używa sztywnych szerokości, które powodują overflow.
• Listy i dane mają sensowną semantykę: ul, ol, dl albo table.
• Stany focus-visible są widoczne na akcjach i filtrach.
• Wersja mobile zachowuje kolejność zgodną z priorytetem informacji.

Anatomia dashboardu

Dashboard nie jest jedną dużą kartą. To zestaw powierzchni o różnych rolach. Każda powinna mieć jasny tytuł i przewidywalny rytm.

• Nagłówek panelu: tytuł, kontekst czasowy i akcja.
• Karty metryk: szybkie wartości liczbowe i mały trend.
• Panel główny: wykres, status albo najważniejszy moduł.
• Lista zadań: elementy wymagające działania.
• Aktywność: ostatnie zdarzenia albo tabela danych.

Struktura HTML

Zacznij od sekcji z nagłówkiem i jasnymi blokami treści. Karty metryk dobrze opisuje dl, bo łączy nazwę metryki z wartością.

Kopiuj<section class="dashboard-project" aria-labelledby="dashboard-title">
  <header class="dashboard-project__header">
    <div>
      <p class="dashboard-project__eyebrow">CSS Sprint Manager</p>
      <h2 id="dashboard-title">Panel postępów kursu</h2>
    </div>
    <a class="dashboard-project__button" href="#">Dodaj zadanie</a>
  </header>

  <dl class="dashboard-project__metrics">
    <div class="dashboard-project__metric">
      <dt>Aktywni kursanci</dt>
      <dd>248</dd>
    </div>
  </dl>
</section>

Dobry dashboard jest czytelny także wtedy, gdy CSS się nie załaduje. Kolejność HTML powinna odzwierciedlać priorytet danych.

Tokeny i baza

Dashboard ma wiele powierzchni. Lokalne tokeny utrzymują spójne tła, obramowania, tekst, akcenty i fokus.

Kopiuj.dashboard-project {
  --dashboard-bg: #f8fafc;
  --dashboard-panel: #ffffff;
  --dashboard-text: #0f172a;
  --dashboard-muted: #64748b;
  --dashboard-border: #dbe3ef;
  --dashboard-accent: #2563eb;
  --dashboard-focus: #93c5fd;

  color: var(--dashboard-text);
  background: var(--dashboard-bg);
}

W dashboardzie unikaj losowych kolorów. Kolor powinien oznaczać rolę: informację, sukces, ostrzeżenie albo akcję.

Layout mobile-first

Na małym ekranie panel powinien być jedną kolumną. Nagłówek, metryki, panel główny, zadania i aktywności układają się w naturalnej kolejności.

Kopiuj.dashboard-project__grid {
  display: grid;
  gap: 1rem;
}

.dashboard-project__metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
}

Mobile-first daje bezpieczny fundament. Dopiero później karty mogą przejść w dwie albo trzy kolumny.

Siatka dashboardu

Na desktopie dashboard korzysta z CSS Grid. Najważniejszy panel może zajmować więcej miejsca, a boczny moduł może pełnić rolę listy zadań.

Kopiuj@media (min-width: 52rem) {
  .dashboard-project__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(16rem, .6fr);
    align-items: start;
  }

  .dashboard-project__metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

Nie zaczynaj od rozrysowania całego dashboardu w pikselach. Zacznij od relacji: panel główny, panel boczny i karty pomocnicze.

Karty metryk

Karta metryki powinna być mała, ale precyzyjna: nazwa, wartość, kontekst i trend. Nie pakuj do niej całego raportu.

Kopiuj.dashboard-project__metric {
  display: grid;
  gap: .35rem;
  padding: 1rem;
  border: 1px solid var(--dashboard-border);
  background: var(--dashboard-panel);
}

.dashboard-project__metric dd {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 800;
}

Najczęstszy błąd to duża liczba bez etykiety. Użytkownik musi wiedzieć, co dokładnie mierzy karta.

Dane i listy

Dashboard często łączy liczby z listą zdarzeń. Jeśli dane są rekordami, tabela może być właściwa. Jeśli są zadaniami, lista będzie prostsza i bardziej elastyczna.

• Do krótkich zadań użyj listy z etykietą statusu.
• Do porównywalnych rekordów użyj tabeli z nagłówkami.
• Do nazwy i wartości użyj dl.
• Na mobile zadbaj o zawijanie tekstu i brak sztywnych kolumn.

Responsywność

Dashboard ma więcej danych niż karta albo landing page, dlatego responsywność polega na priorytetach. Nie wszystko musi być obok siebie.

• Najważniejsze metryki powinny być wysoko w kolejności HTML.
• Panel główny nie może ściskać listy zadań.
• Karty mogą zmieniać liczbę kolumn przez auto-fit albo breakpoint.
• Wykresy i paski postępu powinny mieć stabilne wysokości.
• Długie etykiety muszą się zawijać bez rozpychania całej strony.

Stany i dostępność

Dashboard jest narzędziem pracy, więc użytkownik musi widzieć, który filtr, link albo przycisk jest aktywny. Stany nie są dekoracją, tylko informacją.

Kopiuj.dashboard-project__button {
  min-height: 2.75rem;
  transition: background-color .18s ease, transform .18s ease;
}

.dashboard-project__button:hover {
  transform: translateY(-1px);
}

.dashboard-project__button:focus-visible {
  outline: 3px solid var(--dashboard-focus);
  outline-offset: 3px;
}

Każda akcja powinna być dostępna z klawiatury. Dla aktywnych filtrów używaj też informacji semantycznej, na przykład aria-current.

Demo projektu

Poniżej znajduje się gotowy kierunek wizualny dla dashboardu edukacyjnego. Demo pokazuje nagłówek, filtry, metryki, panel trendu, listę zadań i aktywności.

Najczęstsze błędy początkujących

• Projektowanie dashboardu jak landing page, z za dużymi nagłówkami i małą gęstością informacji.
• Używanie kart bez hierarchii, przez co każda informacja wygląda tak samo ważnie.
• Tworzenie siatki na sztywnych pikselach zamiast elastycznych kolumn.
• Brak opisów metryk i trendów, przez co liczby tracą kontekst.
• Ukrywanie ważnych danych na mobile zamiast zmiany kolejności i układu.
• Brak stanów focus-visible na filtrach, linkach i akcjach.

Zadanie projektowe

Zbuduj własny dashboard dla panelu edukacyjnego, narzędzia SaaS albo aplikacji portfolio.

• Napisz brief: kto używa dashboardu i jakie decyzje ma podjąć.
• Utwórz nagłówek panelu z tytułem, kontekstem i jedną akcją.
• Dodaj trzy karty metryk jako dl.
• Zbuduj panel główny z wykresem, paskami albo statusem.
• Dodaj listę zadań oraz sekcję ostatniej aktywności.
• Zdefiniuj lokalne tokeny dashboardu.
• Zacznij od jednej kolumny i dodaj szerszy układ przez CSS Grid.
• Sprawdź widok na szerokościach 390px, 768px i 1280px.

Checklista jakości

• Najważniejsze dane są widoczne wysoko w strukturze strony.
• Metryki mają nazwę, wartość i kontekst.
• Grid nie powoduje poziomego overflow na 390px.
• Panel główny i panel boczny mają różny ciężar wizualny.
• Listy zadań i aktywności są czytelne bez hovera.
• Akcje i filtry mają hover, active i focus-visible.
• Kolory statusów są konsekwentne i nie są jedynym nośnikiem informacji.
• Dashboard wygląda jak narzędzie pracy, nie jak sekcja promocyjna.

Podsumowanie projektu

Panel dashboardu wymaga innego myślenia niż landing page. Tu CSS ma pomagać w skanowaniu danych: ustawić hierarchię, uporządkować karty, utrzymać stabilny grid i zachować czytelność na różnych ekranach.

Kolejny krok roadmapy to projekt formularza rejestracji.