Colore Modelli HTML

Modelli HTML a colori basati su un chiaro ordine dei contenuti

In una demo per desktop, tre blocchi di servizio su tre sfondi diversi appaiono ben definiti. I colori sono affiancati; il contrasto fa parte della composizione e l'intera riga è leggibile a colpo d'occhio. Aprite lo stesso modello su un telefono e quei blocchi si trasformano in una sequenza verticale di rettangoli luminosi. Nulla è cambiato, se non l'ordine in cui appare il contenuto, ed è quest'ordine che ora determina l'intera pagina.

Quando le colonne diventano pile verticali

Affiancati, uno sfondo colorato comunica in modo discreto che tre elementi appartengono allo stesso gruppo. Quando sono impilati, il messaggio scompare perché il lettore non li vede mai contemporaneamente. Un modello HTML a colori o ha un elemento sottostante che mantiene il raggruppamento, oppure la palette di colori fa tutto il lavoro.

Prima di scegliere un file, vale la pena fare tre verifiche:

1. Immaginate che gli sfondi non ci siano più e verificate se le sezioni sono ancora separate. Se esistono solo come colore, in realtà non esistono affatto.

2. Leggi la visualizzazione per dispositivi mobili dall'alto verso il basso e verifica che la sequenza racconti la storia che desideri, escludendo la composizione per desktop.

3. Cerca elementi distintivi solo dal colore: categorie, disponibilità, articoli in evidenza. Un visitatore dovrebbe essere in grado di distinguerli anche dal testo.

Markup che resiste al riordino

Le intestazioni mantengono il raggruppamento anche in caso di cambio di layout. Quando ogni servizio o caso di studio si apre con la propria intestazione e gli elementi simili ripetono la stessa struttura, il raggruppamento rimane invariato. Il lettore sa dove finisce un elemento e inizia il successivo anche su uno sfondo semplice. Nicepage Grid Element inserisce testo, immagini e pulsanti in celle che si riorganizzano su schermi più piccoli e le Modalità Responsive consentono di controllare la visualizzazione per dispositivi mobili separatamente da quella per desktop.

In questa visualizzazione più ristretta, vale la pena esaminare tre aspetti:

1. Ogni blocco colorato si apre ancora con un'intestazione, inclusi quelli molto al di sotto dell'elemento principale.

2. Le schede comparabili mantengono la stessa struttura interna anziché trasformarsi in tre varianti personalizzate.

3. Il testo rimane leggibile indipendentemente dall'elemento di accento su cui si posiziona una volta formata la pila.

Un esperimento mentale con la scala di grigi

Ecco il modo più rapido per valutare un modello di colori HTML. Immaginate la pagina con tutti gli sfondi impostati su bianco e tutti gli elementi di accento su grigio. Riuscite ancora a distinguere le sezioni, gli elementi che appartengono allo stesso gruppo e l'ordine degli elementi? Se la risposta è sì, la palette di colori può essere vivace quanto necessario per il progetto. Se la pagina risulta disordinata, significa che il colore sosteneva una struttura che nessuno aveva costruito.