Dashboard.Četiri ekrana, četiri stanja.
Admin interfejs za e-commerce platformu. Svaka komponenta iscrtana iznova, svako stanje promišljeno — bez gotovih UI šablona.
Obim je bio četiri ekrana istog prikaza: tabela porudžbina u mirovanju, sa otvorenim menijem profila, sa otvorenim panelom filtera, i sa aktivnim padajućim filterom. Četiri mala trenutka — svaki dizajniran da deluje neizbežno, nijedan uvezen iz UI kita.
E-commerce platforma
UI dizajn — 4 stanja
2026
Figma
Admin koji vredi otvoriti svaki dan. Ne još jedan SaaS šablon.
Pet sekcija. Po jedan posao za svaku.
Navigacija je namerno kratka. Home, Orders, Payments, Balances, Billing — svaka oznaka je imenica, svaka sekcija radi jednu stvar. Bez stavke „Dashboard“ (sam dashboard je ceo proizvod), bez sveobuhvatnih „Reports“, bez Podešavanja koja zatrpavaju primarnu navigaciju.
Podešavanja i Odjava žive iza korisničkog profila u dnu — tihi klik kada zatreba, nevidljivi ostalih 99% vremena. Hrom ne konkuriše podacima.
Tabela koja radi svoj posao.
U mirovanju, ekran su gotovo isključivo podaci. Customer, Product, Order Status, Payment Status — četiri kolone, osam vidljivih redova, paginacija u dnu. Bočna traka je svedena na suštinu. Korisnikov profil sedi tiho u donjem-levom uglu, avatar i strelica.
8 vidljivih redova na standardnom viewport-u. Dovoljno da se skenira bez skrolovanja, ne toliko gusto da deluje kao tabela.
Ime klijenta + email u krajnjoj levoj koloni, indeksirano avatarom. Oko čita lice → ime → proizvod → status.
Search & Filters (sekundarna, svetlo plava) i Add New (primarna, žuta) — gore desno, gde ih korisnik očekuje.
Tiho po difoltu.
Dostupno na klik.
Većina admin bočnih traka stoji potpuno raširena — Settings, Logout, Help, Docs, sve vidljivo u svakom trenutku. Ovaj to obrće. Avatar je jedina stvar u mirovanju. Klik otkriva Podešavanja i Odjavu iznad njega, hover na „Book time away“ označava se suptilnom promenom pozadine.
Jedan klik na avatar u donjem-levom uglu otvara meni. Bez hover stanja za otvaranje — previše lako se slučajno aktivira na gustom ekranu.
Svaka stavka menija ima suptilno popunjavanje pozadine na hover. Vidljivo dovoljno da potvrdi cilj, tiho dovoljno da ne deluje kao upozorenje.
Podešavanja i Odjava su retke akcije. Ne pripadaju u primarnoj navigaciji. Smeštanjem iza avatara poštuje se odnos hroma prema podacima.
Filteri uz podatke, ne preko njih.
Panel sa filterima klizne kao desni saputnik. Tabela ne nestaje, ne sivi, ne pokriva je modal — ostaje vidljiva i blago se sažima da podeli ekran. Korisnik može da menja filtere i u realnom vremenu vidi kako se tabela preoblikuje.
Aktivni filteri se prikazuju kao uklonjivi čipovi sa × — Socks ×, Processing ×, Name A→Z ×. Korisnik uvek vidi šta trenutno filtrira podatke.
Clear Search & Reset Filters dugme u dnu — crveno, puna širina, namerno pojačano. Destruktivna akcija koja treba i da izgleda tako.
Panel filtera ~25% širine, tabela ~75%. Podaci ostaju fokus; filteri su alat.
Dva stanja selekcije.
Jedan padajući meni.
Order Status padajući meni uvodi nešto što većina menija nema — dva različita stanja selektovanog. Puna plava označava trenutnu hover/aktivnu selekciju korisnika. Bleda plava označava već potvrđene selekcije. Korisnik na prvi pogled vidi šta je pripremljeno a šta primenjeno.
Aktivno isticanje. Stavka sa kojom korisnik trenutno interaguje — fokus tastature ili hover mišem.
Potvrđena selekcija. Već dodato u skup filter čipova iznad. Vidljivo unutar menija da bi korisnik upamtio.
Multi-select filteri padaju kada korisnik zaboravi šta je već izabrao. Prikazivanje oba stanja unutar menija čini sistem vidljivim bez objašnjenja.
Četiri odluke koje vredi braniti.
Žuto Add New.
Primarna akcija stoji van plavog navigacionog jezika. Dve akcentne boje sa dva različita posla — plava za stanje, žuta za akciju.
Tiha bočna traka.
Podešavanja i Odjava žive iza avatara, ne u glavnoj navigaciji. Hrom poštuje teritoriju podataka.
Padajući meni sa dva stanja.
Aktivne i potvrđene selekcije se prikazuju drugačije unutar iste liste. Multi-select učinjen vidljivim.
Crveni reset.
Dugme „Clear Filters“ je crveno, ne sivo. Destruktivna akcija koja izgleda kao takva — dizajnom, ne slučajno.
Pet boja. Po jedan posao za svaku.
Paleta građena za hijerarhiju, ne za dekoraciju. Svaka boja radi jednu stvar koju druge ne rade.
Navy
#081220
Bočna traka, primarna površina. Strukturalna boja.
Plava
#2563EB
Aktivna selekcija, fokus, trenutna paginacija.
Žuta
#FACC15
Primarna akcija — Add New. Korišćena jednom po ekranu.
Crvena
#EF4444
Destruktivna akcija — Clear & Reset. Težina usklađena sa posledicom.
Papir
#FAFAF9
Pozadina, površina na kojoj sve drugo sedi.
Hrom ne konkuriše podacima.
To je ceo posao.
— Beleške o dashboard-u, 2026