Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,651
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
22
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. CREARE UN LAYOUT EFFICACE RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 2. 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
  • 3. PENSARE UN LAYOUT RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 4. CREAZIONE DI UN CONCEPT RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 5. Non sono solo forme, immagini e testoma dobbiamo “comunicare” un concetto. RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 6. Parole chiave che raccogliamo dal cliente RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 7. Brainstorming!!! RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 8. Ricordatevi che carta e penna sono vostri amici RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 9. Raccolta ispirazione Es: istockphotoper la ricerca delle parole chiave RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 10. E IMPORTANTE TROVARE IL “CONCETTO” RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 11. Non date niente per scontato. RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 12. Se è possibile far fare la ricerca a più persone RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 13. I BRAVI ARTISTI COPIANOI GRANDI ARTISTI RUBANO. Pablo Picasso. RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 14. Cercate ispirazione fuori dallo schermo del vostro cazzo di computer. RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 15. Infne ricordiamoci che... RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 16. “I bambini prima imparano a riconoscere e poi parlano.” RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 17. 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
  • 18. 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
  • 19. 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
  • 20. Nel nostro caso, “labito fa il monaco”. RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 21. COLORARE UN LAYOUT RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 22. Importanza del colore in un layout RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 23. A chi è rivolto..... RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 24. PROGRAMMATORI. RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 25. Un po di teoria sul colore... RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 26. I colori vanno visti sempre in “relazione” tra di loro. RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 27. COMPLEMENTARI Sono detti i colori COMPLEMENTARI quelli disposti in modo opposto nella scala cromatica RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 28. Il contrasto aiuta locchio a focalizzarelattenzione su determinati punti del layout RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 29. 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
  • 30. MA QUALI SONO I COLORI CHE STANNO BENE TRA LORO?!?!?! RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 31. TRIADICI Disposti a 120° luno dallaltro Creano un rettangolo equilatero RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 32. COMPLEMENTARI DOPPI Composta da 2 colori complementari RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 33. ANALOGHI 3 Colori della stessa parte della scala cromatica RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 34. Dobbiamo essere dei geometri per calcolare i colori nel nostro sito? RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 35. CERTO CHE...SNI!Per fortuna ci vengono incontro delle utility! RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 36. kuler.adobe.com kuler.adobe.com RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 37. colorschemedesigner.com kuler.adobe.com RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 38. 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
  • 39. Oltre ai colori i nostri occhi scansionano “automaticamente” la pagina RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 40. Quale percorso fa locchio allinterno di una pagina web? Dove guarda per prima? RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 41. F-LAYOUT RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 42. Leggiamo sempre dallalto verso il basso e da destra verso sinistra. (arabi a parte...) RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 43. 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
  • 44. RELATORE: Francesco MarzoliRELATORE: Francesco Marzoliwww.digitalpostproduction.it
  • 45. Quando funziona?Quando abbiamo un contenuto principale e abbiamo bisogno di una buona lettura confortevole RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 46. Z - LAYOUT RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 47. Se prima abbiamo visto un layoutper una comoda e riposata lettura... ora ne vedremo uno.... RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 48. PRONTO ALLAZIONE! RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 49. 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
  • 50. RELATORE: Francesco MarzoliRELATORE: Francesco Marzoliwww.digitalpostproduction.it
  • 51. 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
  • 52. WEBDESIGN E NATURA RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 53. Cèra una volta tanto tempo fa... Un signore chiamato Leonardo Pisano Bigollo In arte... RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 54. Fibonacci. RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 55. 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
  • 56. In naturaComunemente chiamata SEZIONE AUREA RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 57. Sezione Aurea o Golden Ratio < RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 58. ENVATO RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 59. SMASHING MAGAZINE RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 60. 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
  • 61. 960.gs GRID SYSTEM RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 62. Molti dicono che le grigliesono dannose alla creatività RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 63. Oggi abbiamo visto come le grigliesono presenti già nella natura stessa. RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 64. Per crearle possiamo andare a mano...o possiamo prendere un format già esitente. RELATORE: Francesco Marzoli RELATORE: Francesco Marzoli www.digitalpostproduction.it
  • 65. 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