Elemente de UI

Grid responsive

Detaliile tehnice prezentate în această pagină sunt menite să ofere o bază minimă pentru designul aplicațiilor web și mobile ce vor fi dezvoltate în viitor pentru serviciile și produsele municipalității.

Sistemul de design de interfețe grafice se bazează pe un grid responsive de 12 coloane cu gutter de 32px. Gridul își adaptează numărul de coloane și dimensiunea gutter-ului în funcție de lățimea ecranului, fiind specificate 4 breakpointuri, conform tabelului de mai jos.

Butoane evidențiate

Breakpoint
Număr de coloane
Margini (Gutter)
416px – Mobil Mic
4
16
768px – Mobil
4
24
1024px – Tabletă
8
24
1440px – Desktop
12
32

Tipografie

În această secțiune sunt specificate tipurile fonturilor folosite pentru fiecare tip de conținut, împreună cu dimensiunile lor (FS – Font Size) și distanța între liniile de text (LH – Line Height).

Aceste valori sunt valabile pentru Desktop (>1024px). Heading nu se va folosi pentru desktop, ci doar pentru tabletă și mobil.

Pentru designul responsive (tabletă și mobil), Heading 1 nu va fi folosit și celelalte se vor transforma după cum urmează:

  • H2 devine H1
  • H3 devine H2
  • H4 devine H3
  • H5 devine H4

Este important să folosești exclusiv specificațiile prezentate aici și să nu creezi alte stiluri de text, pentru a asigura consecvența și unitatea designului în toate aplicațiile.

Sora Bold, FS 52px, LH 64px

Heading 1

Sora Medium, FS 36px, LH 48px

Heading 2

Sora Medium, FS 24px, LH 32px

Heading 3

Sora Regular, FS 20px, LH 30px

Heading 4

Sora Bold, FS 18px, LH 24px

Heading 5

Sora Regular, FS 16px, LH 24px

Corp de text (paragrafe)

Sora Semibold, FS 16px, LH 16px

Butoane

Sora Regular, FS 12px, LH 18px

Etichete și texte de importanță secundară

Grid responsive

Felul în care spațiem componentele de design și containerele între ele este esențial pentru a ajuta user-ul să navigheze paginile cu ușurință și pentru a-l ghida către cele mai importante acțiuni. În imagine sunt exemplificate tipurile de spațieri, de la cele între secțiuni orizontale, la containere și componente.

Tipuri similare de conținut trebuie să urmeze aceleași reguli de spațiere pentru a oferi consecvență designului. Nu folosi alte valori decât cele prezentate în tabel.

Desktop
Tabletă
Mobil
Mobil mic
64px
56px
32px
24px
48px
40px
24px
16px
32px
32px
24px
12px
24px
16px
8px
4px
12px
8px
4px
2px

Butoane

Butoanele pot fi de două tipuri, în funcție de importanța lor în UX. Stilul CSS poate fi obținut prin click dreapta > Inspect pe buton în browser sau apăsând F12. Sunt prezentate câte două variante, pentru fundal alb și fundal închis. Toate butoanele trebuie să aibă padding de 12px, border de 2px și boder radius de 8px.

Culorile pentru butoanele evidențiate se pot schimba în funcție de tema aleasă, dar nu pot fi altele decât cele din paleta oficială.

Formulare

Pentru formulare se vor folosi aceleași specificații de spațieri și fonturi menționate mai sus. Pentru a vedea stilul CSS, puteți inspecta elementul în browser.

Componente

Mai multe componente vor fi încărcate în perioada următoare.