Lecția 1, Grid-ul de 12 coloane + sistemul de 8 puncte

• Grid de 12 coloane pentru layout. 12 se împarte curat în 1, 2, 3, 4, 6 coloane de conținut.

• Sistem de 8 puncte pentru spațiere. Fiecare margin, padding, gap e un multiplu de 8 (8, 16, 24, 32, 48, 64, 96, 128).

• Lățimea maximă a containerului, 1280 până la 1440 px pe desktop. Peste 1440 se irosește densitatea conținutului.

• Marginile de la margine, 24 până la 64 px pe desktop, 16 până la 24 px pe mobil.

• Ritm vertical, secțiuni înalte la multipli de 96 sau 128 px.

Lecția 2, Ierarhia, sistemul cu 5 niveluri

Dacă totul e un nivel 1, atunci nimic nu e. Forțează-te să retrogradezi elemente.

Lecția 3, Spațiul alb, cel mai scump material

• Senzația de premium = mai mult spațiu alb.

• Padding de secțiune, 96 până la 160 px sus și jos.

• Spațiul de la titlu la body, 24 până la 48 px.

• Spațiul de la element la element, 16 până la 32 px.

• Pe mobil, micșorează toate padding-urile cu 30 până la 40%.

• Dacă o secțiune pare înghesuită, dublează padding-ul înainte să reduci conținutul.

Lecția 4, Cele mai furate 7 pattern-uri de layout

Lecția 5, Mobilul nu e un desktop mai mic

• O singură coloană pe mobil. Întotdeauna.

• Stivuiește vertical. Transformă „imagine stânga, text dreapta” în „text sus, imagine jos”.

• Redu dimensiunile fontului cu 25 până la 35%.

• Zonele de atingere, minimum 44 px.

• Ascunde efectele de hover. Înlocuiește-le cu stări de tap sau elimină-le.

• Testează pe un dispozitiv real săptămânal. Chrome DevTools e aproximativ, nu real.

Mai jos e brief-ul unui site pe care îl construiesc. Recomandă-mi, 1) care dintre cele 7 pattern-uri dominante de layout să folosesc pentru hero, 2) care pentru secțiunea de features, 3) care pentru studiile de caz, 4) care pentru testimoniale, 5) care pentru contact. Justifică fiecare într-o singură propoziție. Notează orice secțiuni pe care ar trebui să le regândesc sau să le tai. Brief, <lipește brief-ul>.