Sei principi di web design (gerarchia, spazio bianco, contrasto, allineamento, prossimità, aree di tocco), ognuno mostrato come un prima e dopo live che puoi alternare, con il CSS dietro la correzione.
Un buon web design nasce soprattutto da sei abitudini: ordina i contenuti con una gerarchia visiva chiara, lascia abbastanza spazio bianco, mantieni il contrasto del testo a 4.5:1 o più, allinea gli elementi a bordi comuni, raggruppa vicini gli elementi correlati e rendi le aree di tocco almeno di 24 pixel per lato. Alterna ogni demo qui sotto tra prima e dopo per vedere la differenza.
I sei principi e il CSS che di solito li corregge
Gli articoli sui principi di design li descrivono a parole e con foto di repertorio. Qui ogni principio è una piccola scheda prodotto o un modulo disegnato due volte, sbagliato e corretto, così puoi passare da una versione all'altra e vedere esattamente cosa è cambiato.
Quelli che contano di più ogni giorno sono gerarchia, spazio bianco, contrasto, allineamento, prossimità e aree di tocco comode. La coerenza li tiene insieme: le stesse spaziature, dimensioni del testo e colori ripetuti su ogni pagina.
La gerarchia visiva è l'ordine in cui le persone notano le cose in una pagina. I designer la controllano con dimensione, peso, colore, posizione e spazio, così il titolo si vede per primo, i dettagli di supporto dopo e l'azione principale è facile da trovare.
Il criterio di successo 1.4.3 delle WCAG 2.2, livello AA, chiede almeno 4.5:1 per il testo normale e 3:1 per il testo grande, definito come almeno 18 punti, o 14 punti in grassetto.
Descrive come le persone scorrono spesso le pagine ricche di testo: lungo la parte alta, di nuovo un po' più in basso, poi giù lungo il lato sinistro. La lezione pratica è mettere le parole chiave all'inizio di titoli e righe, e non nascondere i punti importanti a metà paragrafo.
Il criterio 2.5.8 delle WCAG 2.2 di livello AA fissa un minimo di 24 per 24 pixel CSS per le aree di puntamento, con alcune eccezioni come i link dentro una frase. Molti team di design scelgono dimensioni maggiori per i pulsanti principali, così sono facili da premere.
Tre livelli tipografici ordinano il contenuto, le spaziature vengono da una scala di 8px e il testo attenuato resta abbastanza scuro da superare 4.5:1 sul bianco.
Titolo, prezzo e pulsante hanno la stessa dimensione e lo stesso peso, quindi l'occhio non sa dove posarsi.
Dimensione, peso e colore ordinano il contenuto: prima il titolo, poi il prezzo, poi l'azione.
Tutto è ammassato da bordo a bordo, e risulta affollato e difficile da scorrere.
Padding e spazi generosi separano i gruppi e lasciano respirare ogni elemento.
Il testo grigio chiaro sul bianco è ben al di sotto del minimo WCAG per il testo normale.
Il testo scuro sul bianco supera 4.5:1, il minimo WCAG 2.2 di livello AA per il testo di dimensione normale.
Righe centrate e allineate a sinistra mescolate creano bordi irregolari che l'occhio deve inseguire.
Un unico bordo sinistro comune trasforma righe separate in un solo blocco leggibile.
Le etichette sono alla stessa distanza da ogni campo, quindi non è chiaro quale etichetta appartenga a cosa.
Ogni etichetta sta attaccata al proprio campo e le coppie sono distanziate, così il raggruppamento è evidente.
Link minuscoli si affollano e sono facili da mancare con un dito.
Le aree sono almeno 24 per 24 pixel CSS, il minimo WCAG 2.2 di livello AA, con spazio tra l'una e l'altra.
Principio
Versione
Prima
Dopo
Prima: {text}
Dopo: {text}
Pagnotta a lievitazione naturale
$9, sfornata ogni giorno
Ordina ora
Orari di apertura
Lun-Ven, dalle 7 del mattino alle 6 di sera
Sab, dalle 8 del mattino alle 2 del pomeriggio
Consegniamo entro 5 km dal negozio, ogni mattina prima delle 9.
Colore del testo {hex} sul bianco
Catering
Vassoi da 10 a 100 persone.
Ordina con due giorni di anticipo.
Nome
Telefono
Menu
Orari
Ordina
Inizia gratis · Nessuna carta di credito richiesta