Slidegowebdesign

448 views
369 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
448
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Slidegowebdesign

  1. 1. CREARE UN LAYOUT EFFICACE WPCon 2012 - RELATORE: Francesco Marzoli
  2. 2. Pensare un LEIautColorare un LEIaut I tipi di LEIaut LEIaut e natura?Un po di pratica... WPCon 2012 - RELATORE: Francesco Marzoli
  3. 3. PENSARE UN LAYOUT WPCon 2012 - RELATORE: Francesco Marzoli
  4. 4. CREAZIONE DI UN CONCEPT WPCon 2012 - RELATORE: Francesco Marzoli
  5. 5. Non sono solo forme, immagini e testoma dobbiamo “comunicare” un concetto. WPCon 2012 - RELATORE: Francesco Marzoli
  6. 6. Parole chiave che raccogliamo dal cliente WPCon 2012 - RELATORE: Francesco Marzoli
  7. 7. Brainstorming!!! WPCon 2012 - RELATORE: Francesco Marzoli
  8. 8. Ricordatevi che carta e penna sono vostri amici WPCon 2012 - RELATORE: Francesco Marzoli
  9. 9. Raccolta ispirazione Es: istockphotoper la ricerca delle parole chiave WPCon 2012 - RELATORE: Francesco Marzoli
  10. 10. E IMPORTANTE TROVARE IL “CONCETTO” WPCon 2012 - RELATORE: Francesco Marzoli
  11. 11. Non date niente per scontato. WPCon 2012 - RELATORE: Francesco Marzoli
  12. 12. Se è possibile far fare la ricerca a più persone WPCon 2012 - RELATORE: Francesco Marzoli
  13. 13. I BRAVI ARTISTI COPIANOI GRANDI ARTISTI RUBANO. P ablo P icasso. WPCon 2012 - RELATORE: Francesco Marzoli
  14. 14. Cercate ispirazione fuori dallo schermo del vostro cazzo di computer. WPCon 2012 - RELATORE: Francesco Marzoli
  15. 15. Infine ricordiamoci che... WPCon 2012 - RELATORE: Francesco Marzoli
  16. 16. “I bambini prima imparano a riconoscere e poi parlano.” WPCon 2012 - RELATORE: Francesco Marzoli
  17. 17. Noi “guardiamo” prima di leggere Noi “guardiamo” prima di parlareNoi “guardiamo” prima di fare bunga bunga ( e mentre....) WPCon 2012 - RELATORE: Francesco Marzoli
  18. 18. Il concept ed il layout sonole PRIME cose che vengono “guardate”. Specialmente da un cliente caprone! WPCon 2012 - RELATORE: Francesco Marzoli
  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? WPCon 2012 - RELATORE: Francesco Marzoli
  20. 20. Nel nostro caso, “labito fa il monaco”. WPCon 2012 - RELATORE: Francesco Marzoli
  21. 21. COLORARE UN LAYOUT WPCon 2012 - RELATORE: Francesco Marzoli
  22. 22. Importanza del colore in un layout WPCon 2012 - RELATORE: Francesco Marzoli
  23. 23. A chi è rivolto..... WPCon 2012 - RELATORE: Francesco Marzoli
  24. 24. PROGRAMMATORI. WPCon 2012 - RELATORE: Francesco Marzoli
  25. 25. Un po di teoria sul colore... WPCon 2012 - RELATORE: Francesco Marzoli
  26. 26. I colori vanno visti sempre in “relazione” tra di loro. WPCon 2012 - RELATORE: Francesco Marzoli
  27. 27. COMPLEMENTARI Sono detti i colori COMPLEMENTARI quelli disposti in modo opposto nella scala cromatica WPCon 2012 - RELATORE: Francesco Marzoli
  28. 28. Il contrasto aiuta locchio a focalizzarelattenzione su determinati punti del layout WPCon 2012 - RELATORE: Francesco Marzoli
  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. WPCon 2012 - RELATORE: Francesco Marzoli
  30. 30. MA QUALI SONO I COLORI CHE STANNO BENE TRA LORO?!?!?! WPCon 2012 - RELATORE: Francesco Marzoli
  31. 31. TRIADICI Disposti a 120° luno dallaltro Creano un rettangolo equilatero WPCon 2012 - RELATORE: Francesco Marzoli
  32. 32. COMPLEMENTARI DOPPI Composta da 2 colori complementari WPCon 2012 - RELATORE: Francesco Marzoli
  33. 33. ANALOGHI 3 Colori della stessa parte della scala cromatica WPCon 2012 - RELATORE: Francesco Marzoli
  34. 34. Dobbiamo essere dei geometri per calcolare i colori nel nostro sito? WPCon 2012 - RELATORE: Francesco Marzoli
  35. 35. CERTO CHE...SNI!Per fortuna ci vengono incontro delle utility! WPCon 2012 - RELATORE: Francesco Marzoli
  36. 36. kuler.adobe.com kuler.adobe.com WPCon 2012 - RELATORE: Francesco Marzoli
  37. 37. colorschemedesigner.com kuler.adobe.com WPCon 2012 - RELATORE: Francesco Marzoli
  38. 38. RICAPITOLANDO...Scegli i colori opposti allo spettro per crearearmoniaIl contrasto aiuta a guida locchioI colori chiari fanno consumare meno cervelloUsa le utility risparmi tempo...e puoi farealtro........................ WPCon 2012 - RELATORE: Francesco Marzoli
  39. 39. I nostri occhi scansionano “automaticamente” la pagina WPCon 2012 - RELATORE: Francesco Marzoli
  40. 40. Quale percorso fa locchio allinterno di una pagina web? Dove guarda per prima? WPCon 2012 - RELATORE: Francesco Marzoli
  41. 41. F-LAYOUT WPCon 2012 - RELATORE: Francesco Marzoli
  42. 42. Leggiamo sempre dallalto verso il basso e da destra verso sinistra. (arabi a parte...) WPCon 2012 - RELATORE: Francesco Marzoli
  43. 43. F-LAYOUTIl logo e la navigazione sono le prime cose ad essere visteSuccessivamente vengono gli elementi come foto sempre da Sx a DxInfine il testo ci appare come “macchia” di riempimento WPCon 2012 - RELATORE: Francesco Marzoli
  44. 44. WPCon 2012 - RELATORE: Francesco Marzoli
  45. 45. WPCon 2012 - RELATORE: Francesco Marzoli
  46. 46. Quando funziona?Quando abbiamo un contenuto principale e abbiamo bisogno di una buona lettura confortevole WPCon 2012 - RELATORE: Francesco Marzoli
  47. 47. Z - LAYOUT WPCon 2012 - RELATORE: Francesco Marzoli
  48. 48. Se prima abbiamo visto un layoutper una comoda e riposata lettura... ora ne vedremo uno.... WPCon 2012 - RELATORE: Francesco Marzoli
  49. 49. PRONTO ALLAZIONE! WPCon 2012 - RELATORE: Francesco Marzoli
  50. 50. Z – LAYOUTIl logo e la navigazione sono le prime cose ad essere visteSuccessivamente slogan o campagna pubblicitariaContenuti e tasto “Azione” WPCon 2012 - RELATORE: Francesco Marzoli
  51. 51. WPCon 2012 - RELATORE: Francesco Marzoli
  52. 52. Quando funziona? Quando vogliamo “forzare” il visitatore a compiere unazioneEs: Download, acquisto di un oggetto, visita del portfolio ecc ecc.. WPCon 2012 - RELATORE: Francesco Marzoli
  53. 53. WEBDESIGN E NATURA WPCon 2012 - RELATORE: Francesco Marzoli
  54. 54. Cèra una volta tanto tempo fa... Un signore chiamato Leonardo Pisano Bigollo In arte... WPCon 2012 - RELATORE: Francesco Marzoli
  55. 55. Fn = Fn-1 + Fn-20,1,1,3,5,8,13,21,34,55,89,144.... = 1,618... φ WPCon 2012 - RELATORE: Francesco Marzoli
  56. 56. Fibonacci. WPCon 2012 - RELATORE: Francesco Marzoli
  57. 57. In naturaComunemente chiamata SEZIONE AUREA WPCon 2012 - RELATORE: Francesco Marzoli
  58. 58. Sezione Aurea o Golden Ratio < WPCon 2012 - RELATORE: Francesco Marzoli
  59. 59. ENVATO WPCon 2012 - RELATORE: Francesco Marzoli
  60. 60. SMASHING MAGAZINE WPCon 2012 - RELATORE: Francesco Marzoli
  61. 61. 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 WPCon 2012 - RELATORE: Francesco Marzoli
  62. 62. 960.gs GRID SYSTEM WPCon 2012 - RELATORE: Francesco Marzoli
  63. 63. Molti dicono che le grigliesono dannose alla creatività WPCon 2012 - RELATORE: Francesco Marzoli
  64. 64. Oggi abbiamo visto come le grigliesono presenti già nella natura stessa. WPCon 2012 - RELATORE: Francesco Marzoli
  65. 65. Per crearle possiamo andare a mano...o possiamo prendere un format già esitente. WPCon 2012 - RELATORE: Francesco Marzoli
  66. 66. Il più famoso è il 960 grid system. Ha un CSS generator Un PSD nativo con tutte le guide e le griglie WPCon 2012 - RELATORE: Francesco Marzoli
  67. 67. Ora...FINALMENTE un po di pratica... ahhhhhhhhh WPCon 2012 - RELATORE: Francesco Marzoli

×