Portfolio
Analytický Dashboard

Analytický Dashboard

🌡️ Prototyp: Dashboard pro monitoring topného systému

Tento projekt byl cvičením zaměřeným na vizualizaci dat a rychlou implementaci čistého User Interface (UI/UX). Přestože nikdy nebyl připojen k živým datům ani využit v reálném scénáři, posloužil jako skvělá ukázka mé schopnosti postavit komplexní rozhraní pomocí základních webových technologií.

Hlavní cíle projektu

Primární cíl byl vytvořit čisté, intuitivní a přehledné rozhraní, které by uživateli umožnilo rychle posoudit stav topného systému. Zaměřil jsem se na tyto prvky:

  1. Grafy: Použil jsem knihovnu na zobrazení teplotních trendů v čase a aktuální spotřeby. Bylo zásadní, aby grafy byly čitelné i pro netechnického uživatele.
  2. Animace: Přidal jsem jemné animace a přechody na vylepšení uživatelské zkušenosti a poskytnutí dynamické zpětné vazby (např. vizuální indikátor, když topení běží).
  3. Responzivita: Design byl navržen tak, aby dashboard fungoval dobře na monitoru správce i na tabletu.

Technická implementace

Přestože to byl statický prototyp bez back-endu, vyžadovalo to precizní práci s:

  • HTML a CSS (Tailwind/Bootstrap): Použito na vytvoření moderního layoutu s kartami, panely a navigačními prvky typickými pro současné dashboardy.
  • Vizualizační knihovny: Použity na vykreslení grafů s mock daty. Tahle část mi pomohla pochopit základní principy, jak se pole dat transformují na vizuální reprezentace.
  • Simulace stavu: Simuloval jsem, jak by se aktuální teplotní data předávala mezi různými komponentami, napodobující živý datový tok.

💡 Co mi projekt dal

I jako nefunkční prototyp byl tento projekt neocenitelný:

  • Vylepšení UI/UX: Vyvinul jsem si lepší cit pro správné umístění prvků, použití kontrastních barev a informační hierarchii.
  • Práce s daty: Pochopil jsem základní principy vizualizace číselných dat a jak se vyhnout matoucím nebo přetíženým grafům.
  • Implementace komplexních layoutů: Dashboardy jsou typicky vizuálně složitější než standardní weby, což pomohlo posunout mé schopnosti v CSS Grid a celkové struktuře layoutu.

Tento dashboard slouží jako ukázka mého přístupu k designu rozhraní: funkční, čistý a zaměřený na uživatele.