Slidegowebdesign

1,838 views

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,838
On SlideShare
0
From Embeds
0
Number of Embeds
944
Actions
Shares
0
Downloads
26
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Slidegowebdesign

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

×