Il principio del contrasto generalizzato. Base di conoscenza del web designer
Printed 2016-10-20
Nella sezione sui prototipi, abbiamo scoperto come, quando si crea un semplice schizzo, viene risolto il compito principale della progettazione delle informazioni: la posizione delle informazioni sul sito in base alla sua priorità.
Ora parlerò di come risolvere questo problema a un livello più dettagliato. Siamo finalmente arrivati __al layout “live” in PSD!
Lo strumento principale di cui avrai bisogno, io chiamo il metodo del contrasto generalizzato. Questa è una cosa ben nota e ci sono molti nomi per essa.
Per evidenziare l'elemento principale nel design del sitoe rimuovere il secondario, è necessario distinguere, separare l'uno dall'altro gli elementi che compongono il sito. In altre parole, devi ottenere il contrasto: la cosa principale è il contrasto, il secondario è disattivato.
Ci sono molti modi per mettere in contrasto gli elementi:
1. Contrasto nelle dimensioni. Questa è la cosa più semplice e ovvia che possa essere. Realizziamo blocchi importanti grandi, blocchi minori piccoli. Dai un'occhiata a qualche giornale ben fatto o al sito web di un giornale. Vedrai grandi titoli, un testo grande delle notizie principali e piccoli blocchi ordinatamente inseriti in diverse angolazioni con notizie minori.
2. Contrasto di colore. Questo è ciò che di solito intendono quando pronunciano la parola "contrasto". Nello stesso esempio (su un sito di notizie), il testo principale può essere scritto in lettere nere su fondo bianco o anche su fondo grigio chiaro.
3. Contrasto in nitidezza e saturazione. Qualsiasi fotografo lo sa: il soggetto principale è “a fuoco”, è chiaro e nitido. E quelli secondari sono vaghi (o ovattati, secondo il principio della prospettiva aerea). Ad esempio, sono 10 i vantaggi dell'azienda con icone sul sito, di cui 7 secondari e 3 principali. Cosa puoi fare: rendere le prime 3 icone luminose e le restanti 7 icone traslucide, "distanti".
4. Contrasto nei dettagli. Immagina un grande sito pieno di informazioni diverse. E in qualche parte - un grande blocco bianco vuoto, al centro del quale c'è un'iscrizione o un simbolo di qualche tipo. Sullo sfondo di tutti i gusci, di tutta la spazzatura di questa pagina, un tale elemento risalta nettamente. Questo è strettamente legato allo spazio personale, di cui parlerò più avanti.
5. Il contrasto nei dettagli è l'opposto. Il principio precedente può funzionare nella direzione opposta. Ad esempio, ci sono diversi blocchi sul sito che assomigliano a un'icona + testo. E c'è un altro blocco, che è più dettagliato: il testo con elementi secondari, con bollettini, icone e il suo sfondo è un motivo traslucido chiaro. In questo caso, al contrario, viene selezionato un oggetto più dettagliato!
6. Contrasto nella forma. Basato su compiti di una scuola elementare come "qui ci sono 2 cerchi e un triangolo, trova il superfluo". Sì, puoi farlo anche tu. Se il tuo sito ha forme arrotondate ovunque, risalterà un dado rettangolare con un messaggio importante. È vero, la domanda qui è piuttosto come farlo graficamente ed elegantemente.
7. Contrasto nello stile del design. L'intero layout tipografico è costruito su questo: una parola evidenziata in grassetto o in corsivo è in contrasto! In tutti questi esempi, il principio è lo stesso, ma le modalità per raggiungere l'obiettivo sono diverse.
Come applicare il metodo del contrasto generalizzato? So che vuoi di nuovo una "pillola magica", ma non c'è. Qui devi guardare la situazione: se il sito è costruito su grafica e illustrazioni, io uso più metodi "grafici", ad esempio. E così via.
Questa è già creatività, perché stiamo parlando su un design unico del sito , non su un modello.
Ulteriori informazioni sulla composizione:
Metodo: Il principio del contrasto generalizzato
Metodo: verifica della composizione
Costruire una pagina da blocchi
Spazio personale
