Come si impara a creare grafiche web accattivanti?

[amamax]

Ciao ragazzi,

il mio dubbio è che nonostante so disegnare in generale, non so che regole seguire per creare una interfaccia web accattivante.

Ho già letto tutte le guide che spiegano l'importanza dei contenuti, di fare una bozza di come disporli ecc...ma lo step dopo è quello che mi manca. Qual'è la scintilla che mi fa capire che il disegno dell'interfaccia che ho fatto è bella?

[slegolego]

di base l'effetto visuale dipende dal gusto personale. In realta' dovresti partire dallo studio della teoria del colore, ritmo e armonia , studio dell'impaginazione (anche classica e cartacea, sezione aurea etc etc) nonche' della tipografia e dei font web.
Inoltre esistono regole nella produzione dei siti internet (certe cose magari artisticamente eccellenti , non sono molto fruibili dall'utente) per cui anche conoscere le basi dell'UI (user interface) e UX (user experience) sono nozioni fondamentali.
Quindi studiare le basi, scorrere tante pagine web , leggere riviste , ma per sviluppare uno stile personale e un workflow tuo ci vuole del tempo e della dedizione.

Ti consiglio , a random due punti di partenza
http://960.gs/
http://www.thefwa.com/

Divertitela

[amamax]

Non esistono dei tutorial di grafica mirati alla grafica dei layout dei siti web? Non tanto il fatto di fare il singolo bottone, ma un layout generale, la filosofia proprio che c'è dietro per farne una bella?

[Merrill Stubing]

Originariamente inviato da amamax
Non esistono dei tutorial di grafica mirati alla grafica dei layout dei siti web? Non tanto il fatto di fare il singolo bottone, ma un layout generale, la filosofia proprio che c'è dietro per farne una bella?

Originariamente inviato da slegolego
di base l'effetto visuale dipende dal gusto personale. In realta' dovresti partire dallo studio della teoria del colore, ritmo e armonia , studio dell'impaginazione (anche classica e cartacea, sezione aurea etc etc) nonche' della tipografia e dei font web.

[Brown]

Originariamente inviato da amamax
... la filosofia proprio che c'è dietro per farne una bella?

- senso artistico, tecnica, esperienza e... per farne una bella? è la virtù dei grandi! dei pochi...

[amamax]

Originariamente inviato da Brown
- senso artistico, tecnica, esperienza e... per farne una bella? è la virtù dei grandi! dei pochi...

ok ok capita l'antifona devo creare un'area di cervello nuova

[blackflower]

Buon gusto: 70%
Tecnica: 30%

Ecco le mie dosi per fare un bel sito web..

Comunque per imparare a fare dei bei template grafici, cerca in rete delle gallerie da dove prendere spunto, poi man mano che ci prendi confidenza riuscirai a trovare il tuo stile.

[Camarillo]

Ciao Amamax.

Ci sono alcune accortezze e buone regole da seguire, almeno secondo me. Non ho una grandissima esperienza in questo settore (sono pochi mesi che smanetto con il codice) ma mi sento comunque di darti questi consigli, quasi tutti validi anche per la grafica in generale:

1) Non utilizzare mai il bianco e il nero, piuttosto utilizza un grigio molto chiaro per il bianco e per il nero un grigio scuro magari virato verso un colore particolare, in modo che non sia proprio neutro.

2) Per scegliere dei colori che "stanno bene insieme" puoi utilizzare uno strumento come Adobe kuler, Colorschemedesigner o Colorcombos. Una volta scelto lo schema colore, utilizza solo quelle tonalità (oltre al quasi-bianco e quasi-nero), magari con varianti più chiare o più scure. Non utilizzare dieci tonalità per un sito, in genere tre-quattro bastano.

3) Due font, uno per i titoli e uno per i testi, in genere sono sufficienti, cerca di sceglierli molto diversi (in genere uno serif e uno sans-serif).

4) Utilizza un grid system, ti aiuta a tenere ordinata la pagina. Oltre a quelli che ti sono stati segnalati mi sento di consigliarti Skeleton.

5) Ritmo verticale: fai in modo che tutte le misure in verticale (principalmente line-height, padding e margin top e bottom) siano multipli dello stesso numero. Ad es. se il numero base è sette, le misure possono essere 7px, 14px, 21px...

6) Non utilizzare font-size troppo simili, in genere non vale la pena di fare un h3 da 15px e un h4 da 16px, scegli uno o l'altro, font-size simili creano confusione.

7) Fai in modo che ci sia una media di 12-15 parole per riga di testo, paragrafi troppo corti o troppo lunghi rendono difficoltosa la lettura.

Queste ovviemente non sono leggi, ma mi sembrano delle caratteristiche che hanno in comune siti internet (ma anche manifesti, cataloghi ecc...) fatti bene.

Se ti serve un po' di ispirazione puoi cominciare da Awwwards.