�ݺ�ߣ

CREARE UN LAYOUT
EFFICACE

RELATORE: Francesco Marzoli
www.digitalpostproduction.it

Pensare un LEIaut
Colorare un LEIaut
I tipi di LEIaut
LEIaut e natura?
Un po' di pratica...


PENSARE UN LAYOUT


CREAZIONE DI UN CONCEPT


Non sono solo forme, immagini e testo
ma dobbiamo “comunicare” un concetto.


Parole chiave che raccogliamo dal cliente


Brainstorming!!!


Ricordatevi che carta e penna
sono vostri amici


Raccolta ispirazione
Es: istockphoto
per la ricerca delle parole chiave


E' IMPORTANTE TROVARE IL “CONCETTO”


Non date niente per scontato.


Se è possibile far fare la ricerca a più persone


I BRAVI ARTISTI COPIANO
I GRANDI ARTISTI RUBANO.
Pablo Picasso.


Cercate ispirazione fuori dallo schermo
del vostro cazzo di computer.


Infne ricordiamoci che...


“I bambini prima imparano a riconoscere
e poi parlano.”


Noi “guardiamo” prima di leggere
Noi “guardiamo” prima di parlare
Noi “guardiamo” prima di fare bunga bunga
( e mentre....)


Il concept ed il layout sono
le PRIME cose che vengono “guardate”.

Specialmente da un cliente caprone!


Ogni volta che apriamo un sito diciamo:
“Oh, quant'è bello!
“Mio dio che merda!!!”

E poi...

Ma secondo te è javascript?
Quanta programmazione ci sarà dietro?


Nel nostro caso, “l'abito fa il monaco”.


COLORARE UN LAYOUT


Importanza del colore in un layout


A chi è rivolto.....


PROGRAMMATORI.


Un po' di teoria sul colore...


I colori vanno visti sempre
in “relazione” tra di loro.


COMPLEMENTARI

Sono detti i colori
COMPLEMENTARI
quelli disposti in modo
opposto nella scala
cromatica


Il contrasto aiuta l'occhio a focalizzare
l'attenzione su determinati punti del layout


Se volete attirare l'attenzione, guardatevi intorno.

Ve la ricordate la donna vestita di rosso nel primo
Matrix?

Attirava l'attenzione...infatti aveva un colore
diverso rispetto al contesto.


MA QUALI SONO I COLORI CHE STANNO
BENE TRA LORO?!?!?!


TRIADICI

Disposti a 120° l'uno
dall'altro
Creano un rettangolo
equilatero


COMPLEMENTARI DOPPI

Composta da 2 colori
complementari


ANALOGHI
3 Colori della stessa
parte della scala
cromatica


Dobbiamo essere dei geometri per calcolare i
colori nel nostro sito?


CERTO CHE...SNI!

Per fortuna ci vengono incontro delle utility!


kuler.adobe.com
kuler.adobe.com


colorschemedesigner.com
kuler.adobe.com


RICAPITOLANDO...
● Scegli i colori opposti allo spettro per creare
armonia
● Il contrasto aiuta a guida l'occhio
● I colori chiari fanno consumare meno cervello
● Usa le utility risparmi tempo...e puoi fare
altro........................


Oltre ai colori i nostri occhi scansionano
“automaticamente” la pagina


Quale percorso fa l'occhio all'interno di una
pagina web?

Dove guarda per prima?


F-LAYOUT


Leggiamo sempre dall'alto verso il basso
e da destra verso sinistra.
(arabi a parte...)


F-LAYOUT
● Il logo e la navigazione sono le prime cose ad
essere viste
● Successivamente vengono gli elementi come foto
sempre da Sx a Dx
● Infne il testo ci appare come “macchia” di
riempimento


Quando funziona?

Quando abbiamo un contenuto principale e
abbiamo bisogno di una buona lettura
confortevole


Z - LAYOUT


Se prima abbiamo visto un layout
per una comoda e riposata lettura...
ora ne vedremo uno....


PRONTO ALL'AZIONE!


Z – LAYOUT
● Il logo e la navigazione sono le prime cose ad
essere viste
● Successivamente slogan o campagna pubblicitaria
● Contenuti e tasto “Azione”


Quando funziona?

Quando vogliamo “forzare” il visitatore
a compiere un'azione

Es: Download, acquisto di un oggetto, visita del
portfolio ecc ecc..


WEBDESIGN E NATURA


C'èra una volta tanto tempo fa...
Un signore chiamato
Leonardo Pisano Bigollo

In arte...


Fibonacci.


Fn = Fn-1 + Fn-2
0,1,1,3,5,8,13,21,34,55,89,144....

=

1,618... φ


In natura

Comunemente chiamata
SEZIONE AUREA


Sezione Aurea o Golden Ratio

<


ENVATO


SMASHING MAGAZINE


Come si calcola?

Si prende la larghezza intera della pagina
Si divide per 1,618

Il risultato sarà la larghezza del contenuto
principale

Es: 960px / 1,618 = 593 px


960.gs GRID SYSTEM


Molti dicono che le griglie
sono dannose alla creatività


Oggi abbiamo visto come le griglie
sono presenti già nella natura stessa.


Per crearle possiamo andare a mano...
o possiamo prendere un format già esitente.


Il più famoso è il 960 grid system.

Ha un CSS generator
Un PSD nativo
con tutte le guide e le griglie


�ݺ�ߣ

�ݺ�ߣgowebdesign

More Related Content

�ݺ�ߣgowebdesign