Slidegowebdesign

RELATORE: Francesco Marzoli

CREARE UN LAYOUT EFFICACE

RELATORE: Francesco Marzoliwww.digitalpostproduction.it


Pensare un LEIautColorare un LEIaut

I tipi di LEIautLEIaut e natura?

Un po' di pratica...

RELATORE: Francesco Marzoli RELATORE: Francesco Marzoliwww.digitalpostproduction.it


PENSARE UN LAYOUT



CREAZIONE DI UN CONCEPT

RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli RELATORE: Francesco Marzoliwww.digitalpostproduction.it


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

RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli RELATORE: Francesco Marzoliwww.digitalpostproduction.it


Parole chiave che raccogliamo dal cliente



Brainstorming!!!



Ricordatevi che carta e penna sono vostri amici



Raccolta ispirazioneEs: 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 COPIANOI 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 leggereNoi “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.



Sono detti i colori COMPLEMENTARIquelli disposti in modo opposto nella scala cromatica

COMPLEMENTARI



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'altroCreano 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


RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli

www.digitalpostproduction.it


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”


RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli

www.digitalpostproduction.it


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 paginaSi 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 grigliesono 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


Slidegowebdesign

Documents

Transcript of Slidegowebdesign