Slidegowebdesign

CREARE UN LAYOUT EFFICACE RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

Pensare un LEIautColorare un LEIaut I tipi di LEIaut LEIaut e natura?Un po di pratica... RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

PENSARE UN LAYOUT RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

CREAZIONE DI UN CONCEPT RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

Non sono solo forme, immagini e testoma dobbiamo “comunicare” un concetto. RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

Parole chiave che raccogliamo dal cliente RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

Brainstorming!!! RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

Ricordatevi che carta e penna sono vostri amici RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

Raccolta ispirazione Es: istockphotoper la ricerca delle parole chiave RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

E IMPORTANTE TROVARE IL “CONCETTO” RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

Non date niente per scontato. RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

Se è possibile far fare la ricerca a più persone RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

I BRAVI ARTISTI COPIANOI GRANDI ARTISTI RUBANO. Pablo Picasso. RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

Cercate ispirazione fuori dallo schermo del vostro cazzo di computer. RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

Infne ricordiamoci che... RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

“I bambini prima imparano a riconoscere e poi parlano.” RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

Noi “guardiamo” prima di leggere Noi “guardiamo” prima di parlareNoi “guardiamo” prima di fare bunga bunga ( e mentre....) RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

Il concept ed il layout sonole PRIME cose che vengono “guardate”. Specialmente da un cliente caprone! RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

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? RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

Nel nostro caso, “labito fa il monaco”. RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

COLORARE UN LAYOUT RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

Importanza del colore in un layout RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

A chi è rivolto..... RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

PROGRAMMATORI. RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

Un po di teoria sul colore... RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

I colori vanno visti sempre in “relazione” tra di loro. RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

COMPLEMENTARI Sono detti i colori COMPLEMENTARI quelli disposti in modo opposto nella scala cromatica RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

Il contrasto aiuta locchio a focalizzarelattenzione su determinati punti del layout RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

Se volete attirare lattenzione, guardatevi intorno.Ve la ricordate la donna vestita di rosso nel primo Matrix? Attirava lattenzione...infatti aveva un colore diverso rispetto al contesto. RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

MA QUALI SONO I COLORI CHE STANNO BENE TRA LORO?!?!?! RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

TRIADICI Disposti a 120° luno dallaltro Creano un rettangolo equilatero RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

COMPLEMENTARI DOPPI Composta da 2 colori complementari RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

ANALOGHI 3 Colori della stessa parte della scala cromatica RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

Dobbiamo essere dei geometri per calcolare i colori nel nostro sito? RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

CERTO CHE...SNI!Per fortuna ci vengono incontro delle utility! RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

kuler.adobe.com kuler.adobe.com RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

colorschemedesigner.com kuler.adobe.com RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

RICAPITOLANDO...● Scegli i colori opposti allo spettro per creare armonia● Il contrasto aiuta a guida locchio● I colori chiari fanno consumare meno cervello● Usa le utility risparmi tempo...e puoi fare altro........................ RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

Oltre ai colori i nostri occhi scansionano “automaticamente” la pagina RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

Quale percorso fa locchio allinterno di una pagina web? Dove guarda per prima? RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

F-LAYOUT RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

Leggiamo sempre dallalto verso il basso e da destra verso sinistra. (arabi a parte...) RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

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

RELATORE: Francesco MarzoliRELATORE: Francesco Marzoliwww.digitalpostproduction.it

Quando funziona?Quando abbiamo un contenuto principale e abbiamo bisogno di una buona lettura confortevole RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

Z - LAYOUT RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

Se prima abbiamo visto un layoutper una comoda e riposata lettura... ora ne vedremo uno.... RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

PRONTO ALLAZIONE! RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

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

RELATORE: Francesco MarzoliRELATORE: Francesco Marzoliwww.digitalpostproduction.it

Quando funziona? Quando vogliamo “forzare” il visitatore a compiere unazioneEs: Download, acquisto di un oggetto, visita del portfolio ecc ecc.. RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

WEBDESIGN E NATURA RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

Cèra una volta tanto tempo fa... Un signore chiamato Leonardo Pisano Bigollo In arte... RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

Fibonacci. RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

Fn = Fn-1 + Fn-20,1,1,3,5,8,13,21,34,55,89,144.... = 1,618... φ RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

In naturaComunemente chiamata SEZIONE AUREA RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

Sezione Aurea o Golden Ratio < RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

ENVATO RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

SMASHING MAGAZINE RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

Come si calcola?Si prende la larghezza intera della pagina Si divide per 1,618Il risultato sarà la larghezza del contenuto principale Es: 960px / 1,618 = 593 px RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

960.gs GRID SYSTEM RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

Molti dicono che le grigliesono dannose alla creatività RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

Oggi abbiamo visto come le grigliesono presenti già nella natura stessa. RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

Per crearle possiamo andare a mano...o possiamo prendere un format già esitente. RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

Il più famoso è il 960 grid system. Ha un CSS generator Un PSD nativo con tutte le guide e le griglie RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it

Slidegowebdesign

by francescomarzoli on Feb 13, 2011

Accessibility

Upload Details

Usage Rights

1 Embed 679

Statistics

Slidegowebdesign — Presentation Transcript