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.
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.
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ă.
Butoane generale
Butoane evidențiate
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.
Welcome to the city where you can travel to a past full of history and culture, make time stand still in the most wonderful cafes, restaurants and parks, or imagine and create the future.