SlideShare a Scribd company logo
1 of 67
CREARE UN LAYOUT
    EFFICACE


       WPCon 2012 - RELATORE: Francesco Marzoli
Pensare un LEIaut
Colorare un LEIaut
  I tipi di LEIaut
 LEIaut e natura?
Un po' di pratica...




         WPCon 2012 - RELATORE: Francesco Marzoli
PENSARE UN LAYOUT




        WPCon 2012 - RELATORE: Francesco Marzoli
CREAZIONE DI UN CONCEPT




           WPCon 2012 - RELATORE: Francesco Marzoli
Non sono solo forme, immagini e testo
ma dobbiamo “comunicare” un concetto.




                   WPCon 2012 - RELATORE: Francesco Marzoli
Parole chiave che raccogliamo dal cliente




                    WPCon 2012 - RELATORE: Francesco Marzoli
Brainstorming!!!



        WPCon 2012 - RELATORE: Francesco Marzoli
Ricordatevi che carta e penna
      sono vostri amici




              WPCon 2012 - RELATORE: Francesco Marzoli
Raccolta ispirazione
          Es: istockphoto
per la ricerca delle parole chiave




                 WPCon 2012 - RELATORE: Francesco Marzoli
E' IMPORTANTE TROVARE IL “CONCETTO”




                 WPCon 2012 - RELATORE: Francesco Marzoli
Non date niente per scontato.




              WPCon 2012 - RELATORE: Francesco Marzoli
Se è possibile far fare la ricerca a più persone




                        WPCon 2012 - RELATORE: Francesco Marzoli
I BRAVI ARTISTI COPIANO
I GRANDI ARTISTI RUBANO.
         P ablo P icasso.




            WPCon 2012 - RELATORE: Francesco Marzoli
Cercate ispirazione fuori dallo schermo
    del vostro cazzo di computer.




                   WPCon 2012 - RELATORE: Francesco Marzoli
Infine ricordiamoci che...




             WPCon 2012 - RELATORE: Francesco Marzoli
“I bambini prima imparano a riconoscere
             e poi parlano.”




                   WPCon 2012 - RELATORE: Francesco Marzoli
Noi “guardiamo” prima di leggere
      Noi “guardiamo” prima di parlare
Noi “guardiamo” prima di fare bunga bunga
               ( e mentre....)




                    WPCon 2012 - RELATORE: Francesco Marzoli
Il concept ed il layout sono
le PRIME cose che vengono “guardate”.

 Specialmente da un cliente caprone!




                  WPCon 2012 - RELATORE: Francesco Marzoli
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
Nel nostro caso, “l'abito fa il monaco”.




                    WPCon 2012 - RELATORE: Francesco Marzoli
COLORARE UN LAYOUT




         WPCon 2012 - RELATORE: Francesco Marzoli
Importanza del colore in un layout




                 WPCon 2012 - RELATORE: Francesco Marzoli
A chi è rivolto.....




          WPCon 2012 - RELATORE: Francesco Marzoli
PROGRAMMATORI.




       WPCon 2012 - RELATORE: Francesco Marzoli
Un po' di teoria sul colore...




               WPCon 2012 - RELATORE: Francesco Marzoli
I colori vanno visti sempre
  in “relazione” tra di loro.




              WPCon 2012 - RELATORE: Francesco Marzoli
COMPLEMENTARI



       Sono detti i colori
        COMPLEMENTARI
       quelli disposti in modo
        opposto nella scala
        cromatica


      WPCon 2012 - RELATORE: Francesco Marzoli
Il contrasto aiuta l'occhio a focalizzare
l'attenzione su determinati punti del layout




                      WPCon 2012 - RELATORE: Francesco Marzoli
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.




                          WPCon 2012 - RELATORE: Francesco Marzoli
MA QUALI SONO I COLORI CHE STANNO
       BENE TRA LORO?!?!?!




                WPCon 2012 - RELATORE: Francesco Marzoli
TRIADICI


     Disposti a 120° l'uno
      dall'altro
     Creano un rettangolo
      equilatero




    WPCon 2012 - RELATORE: Francesco Marzoli
COMPLEMENTARI DOPPI



           Composta da 2 colori
            complementari




         WPCon 2012 - RELATORE: Francesco Marzoli
ANALOGHI
     3 Colori della stessa
       parte della scala
       cromatica




    WPCon 2012 - RELATORE: Francesco Marzoli
Dobbiamo essere dei geometri per calcolare i
          colori nel nostro sito?




                      WPCon 2012 - RELATORE: Francesco Marzoli
CERTO CHE...SNI!

Per fortuna ci vengono incontro delle utility!




                       WPCon 2012 - RELATORE: Francesco Marzoli
kuler.adobe.com
        kuler.adobe.com




       WPCon 2012 - RELATORE: Francesco Marzoli
colorschemedesigner.com
            kuler.adobe.com




           WPCon 2012 - RELATORE: Francesco Marzoli
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........................



                           WPCon 2012 - RELATORE: Francesco Marzoli
I nostri occhi scansionano “automaticamente” la
                      pagina




                       WPCon 2012 - RELATORE: Francesco Marzoli
Quale percorso fa l'occhio all'interno di una
              pagina web?

         Dove guarda per prima?




                      WPCon 2012 - RELATORE: Francesco Marzoli
F-LAYOUT




    WPCon 2012 - RELATORE: Francesco Marzoli
Leggiamo sempre dall'alto verso il basso
       e da destra verso sinistra.
            (arabi a parte...)




                    WPCon 2012 - RELATORE: Francesco Marzoli
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
Infine il testo ci appare come “macchia” di
  riempimento



                         WPCon 2012 - RELATORE: Francesco Marzoli
WPCon 2012 - RELATORE: Francesco Marzoli
WPCon 2012 - RELATORE: Francesco Marzoli
Quando funziona?



Quando abbiamo un contenuto principale e
  abbiamo bisogno di una buona lettura
             confortevole




                    WPCon 2012 - RELATORE: Francesco Marzoli
Z - LAYOUT




     WPCon 2012 - RELATORE: Francesco Marzoli
Se prima abbiamo visto un layout
per una comoda e riposata lettura...
      ora ne vedremo uno....




                  WPCon 2012 - RELATORE: Francesco Marzoli
PRONTO ALL'AZIONE!




         WPCon 2012 - RELATORE: Francesco Marzoli
Z – LAYOUT
Il logo e la navigazione sono le prime cose ad
   essere viste
Successivamente slogan o campagna
 pubblicitaria
Contenuti e tasto “Azione”




                        WPCon 2012 - RELATORE: Francesco Marzoli
WPCon 2012 - RELATORE: Francesco Marzoli
Quando funziona?


    Quando vogliamo “forzare” il visitatore
             a compiere un'azione


Es: Download, acquisto di un oggetto, visita del
              portfolio ecc ecc..


                       WPCon 2012 - RELATORE: Francesco Marzoli
WEBDESIGN E NATURA




         WPCon 2012 - RELATORE: Francesco Marzoli
C'èra una volta tanto tempo fa...
     Un signore chiamato
    Leonardo Pisano Bigollo

            In arte...




                 WPCon 2012 - RELATORE: Francesco Marzoli
Fn = Fn-1 + Fn-2
0,1,1,3,5,8,13,21,34,55,89,144....

                =


        1,618...     φ


                 WPCon 2012 - RELATORE: Francesco Marzoli
Fibonacci.




     WPCon 2012 - RELATORE: Francesco Marzoli
In natura




Comunemente chiamata
  SEZIONE AUREA



                  WPCon 2012 - RELATORE: Francesco Marzoli
Sezione Aurea o Golden Ratio




       <




              WPCon 2012 - RELATORE: Francesco Marzoli
ENVATO




  WPCon 2012 - RELATORE: Francesco Marzoli
SMASHING MAGAZINE




        WPCon 2012 - RELATORE: Francesco Marzoli
Come si calcola?


Si prende la larghezza intera della pagina
            Si divide per 1,618

Il risultato sarà la larghezza del contenuto
                   principale

       Es: 960px / 1,618 = 593 px


                      WPCon 2012 - RELATORE: Francesco Marzoli
960.gs GRID SYSTEM




         WPCon 2012 - RELATORE: Francesco Marzoli
Molti dicono che le griglie
sono dannose alla creatività




              WPCon 2012 - RELATORE: Francesco Marzoli
Oggi abbiamo visto come le griglie
sono presenti già nella natura stessa.




                   WPCon 2012 - RELATORE: Francesco Marzoli
Per crearle possiamo andare a mano...
o possiamo prendere un format già esitente.




                     WPCon 2012 - RELATORE: Francesco Marzoli
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
Ora...FINALMENTE un po' di pratica...
           ahhhhhhhhh




                  WPCon 2012 - RELATORE: Francesco Marzoli

More Related Content

Similar to Slidegowebdesign

If the future is for interdisciplinary team, we need to change something!
If the future is for interdisciplinary team, we need to change something!If the future is for interdisciplinary team, we need to change something!
If the future is for interdisciplinary team, we need to change something!Paolo Montevecchi
 
Visual Design in Exhibition Culture
Visual Design in Exhibition CultureVisual Design in Exhibition Culture
Visual Design in Exhibition CultureMichela Sarzotti
 
Web Design - Connessi con il Mondo (Presentazione Estesa)
Web Design - Connessi con il Mondo (Presentazione Estesa)Web Design - Connessi con il Mondo (Presentazione Estesa)
Web Design - Connessi con il Mondo (Presentazione Estesa)P-Soft di Codebue Fabio
 
Deals, Mayor & Online2Offline – Alessandro Centonze
Deals, Mayor & Online2Offline – Alessandro CentonzeDeals, Mayor & Online2Offline – Alessandro Centonze
Deals, Mayor & Online2Offline – Alessandro CentonzeYoung Digital Lab
 
Venezia Camp 2012 - Working Digital
Venezia Camp 2012 - Working DigitalVenezia Camp 2012 - Working Digital
Venezia Camp 2012 - Working DigitalGiorgio Marandola
 

Similar to Slidegowebdesign (6)

If the future is for interdisciplinary team, we need to change something!
If the future is for interdisciplinary team, we need to change something!If the future is for interdisciplinary team, we need to change something!
If the future is for interdisciplinary team, we need to change something!
 
Visual Design in Exhibition Culture
Visual Design in Exhibition CultureVisual Design in Exhibition Culture
Visual Design in Exhibition Culture
 
Web Design - Connessi con il Mondo (Presentazione Estesa)
Web Design - Connessi con il Mondo (Presentazione Estesa)Web Design - Connessi con il Mondo (Presentazione Estesa)
Web Design - Connessi con il Mondo (Presentazione Estesa)
 
Deals, Mayor & Online2Offline – Alessandro Centonze
Deals, Mayor & Online2Offline – Alessandro CentonzeDeals, Mayor & Online2Offline – Alessandro Centonze
Deals, Mayor & Online2Offline – Alessandro Centonze
 
Road to ninja presentation
Road to ninja presentationRoad to ninja presentation
Road to ninja presentation
 
Venezia Camp 2012 - Working Digital
Venezia Camp 2012 - Working DigitalVenezia Camp 2012 - Working Digital
Venezia Camp 2012 - Working Digital
 

Slidegowebdesign

  • 1. CREARE UN LAYOUT EFFICACE WPCon 2012 - RELATORE: Francesco Marzoli
  • 2. Pensare un LEIaut Colorare un LEIaut I tipi di LEIaut LEIaut e natura? Un po' di pratica... WPCon 2012 - RELATORE: Francesco Marzoli
  • 3. PENSARE UN LAYOUT WPCon 2012 - RELATORE: Francesco Marzoli
  • 4. CREAZIONE DI UN CONCEPT WPCon 2012 - RELATORE: Francesco Marzoli
  • 5. Non sono solo forme, immagini e testo ma dobbiamo “comunicare” un concetto. WPCon 2012 - RELATORE: Francesco Marzoli
  • 6. Parole chiave che raccogliamo dal cliente WPCon 2012 - RELATORE: Francesco Marzoli
  • 7. Brainstorming!!! WPCon 2012 - RELATORE: Francesco Marzoli
  • 8. Ricordatevi che carta e penna sono vostri amici WPCon 2012 - RELATORE: Francesco Marzoli
  • 9. Raccolta ispirazione Es: istockphoto per la ricerca delle parole chiave WPCon 2012 - RELATORE: Francesco Marzoli
  • 10. E' IMPORTANTE TROVARE IL “CONCETTO” WPCon 2012 - RELATORE: Francesco Marzoli
  • 11. Non date niente per scontato. WPCon 2012 - RELATORE: Francesco Marzoli
  • 12. Se è possibile far fare la ricerca a più persone WPCon 2012 - RELATORE: Francesco Marzoli
  • 13. I BRAVI ARTISTI COPIANO I GRANDI ARTISTI RUBANO. P ablo P icasso. WPCon 2012 - RELATORE: Francesco Marzoli
  • 14. Cercate ispirazione fuori dallo schermo del vostro cazzo di computer. WPCon 2012 - RELATORE: Francesco Marzoli
  • 15. Infine ricordiamoci che... WPCon 2012 - RELATORE: Francesco Marzoli
  • 16. “I bambini prima imparano a riconoscere e poi parlano.” WPCon 2012 - RELATORE: Francesco Marzoli
  • 17. Noi “guardiamo” prima di leggere Noi “guardiamo” prima di parlare Noi “guardiamo” prima di fare bunga bunga ( e mentre....) WPCon 2012 - RELATORE: Francesco Marzoli
  • 18. Il concept ed il layout sono le PRIME cose che vengono “guardate”. Specialmente da un cliente caprone! WPCon 2012 - RELATORE: Francesco Marzoli
  • 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. Nel nostro caso, “l'abito fa il monaco”. WPCon 2012 - RELATORE: Francesco Marzoli
  • 21. COLORARE UN LAYOUT WPCon 2012 - RELATORE: Francesco Marzoli
  • 22. Importanza del colore in un layout WPCon 2012 - RELATORE: Francesco Marzoli
  • 23. A chi è rivolto..... WPCon 2012 - RELATORE: Francesco Marzoli
  • 24. PROGRAMMATORI. WPCon 2012 - RELATORE: Francesco Marzoli
  • 25. Un po' di teoria sul colore... WPCon 2012 - RELATORE: Francesco Marzoli
  • 26. I colori vanno visti sempre in “relazione” tra di loro. WPCon 2012 - RELATORE: Francesco Marzoli
  • 27. COMPLEMENTARI Sono detti i colori COMPLEMENTARI quelli disposti in modo opposto nella scala cromatica WPCon 2012 - RELATORE: Francesco Marzoli
  • 28. Il contrasto aiuta l'occhio a focalizzare l'attenzione su determinati punti del layout WPCon 2012 - RELATORE: Francesco Marzoli
  • 29. 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. WPCon 2012 - RELATORE: Francesco Marzoli
  • 30. MA QUALI SONO I COLORI CHE STANNO BENE TRA LORO?!?!?! WPCon 2012 - RELATORE: Francesco Marzoli
  • 31. TRIADICI Disposti a 120° l'uno dall'altro Creano un rettangolo equilatero WPCon 2012 - RELATORE: Francesco Marzoli
  • 32. COMPLEMENTARI DOPPI Composta da 2 colori complementari WPCon 2012 - RELATORE: Francesco Marzoli
  • 33. ANALOGHI 3 Colori della stessa parte della scala cromatica WPCon 2012 - RELATORE: Francesco Marzoli
  • 34. Dobbiamo essere dei geometri per calcolare i colori nel nostro sito? WPCon 2012 - RELATORE: Francesco Marzoli
  • 35. CERTO CHE...SNI! Per fortuna ci vengono incontro delle utility! WPCon 2012 - RELATORE: Francesco Marzoli
  • 36. kuler.adobe.com kuler.adobe.com WPCon 2012 - RELATORE: Francesco Marzoli
  • 37. colorschemedesigner.com kuler.adobe.com WPCon 2012 - RELATORE: Francesco Marzoli
  • 38. 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........................ WPCon 2012 - RELATORE: Francesco Marzoli
  • 39. I nostri occhi scansionano “automaticamente” la pagina WPCon 2012 - RELATORE: Francesco Marzoli
  • 40. Quale percorso fa l'occhio all'interno di una pagina web? Dove guarda per prima? WPCon 2012 - RELATORE: Francesco Marzoli
  • 41. F-LAYOUT WPCon 2012 - RELATORE: Francesco Marzoli
  • 42. Leggiamo sempre dall'alto verso il basso e da destra verso sinistra. (arabi a parte...) WPCon 2012 - RELATORE: Francesco Marzoli
  • 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 Infine il testo ci appare come “macchia” di riempimento WPCon 2012 - RELATORE: Francesco Marzoli
  • 44. WPCon 2012 - RELATORE: Francesco Marzoli
  • 45. WPCon 2012 - RELATORE: Francesco Marzoli
  • 46. Quando funziona? Quando abbiamo un contenuto principale e abbiamo bisogno di una buona lettura confortevole WPCon 2012 - RELATORE: Francesco Marzoli
  • 47. Z - LAYOUT WPCon 2012 - RELATORE: Francesco Marzoli
  • 48. Se prima abbiamo visto un layout per una comoda e riposata lettura... ora ne vedremo uno.... WPCon 2012 - RELATORE: Francesco Marzoli
  • 49. PRONTO ALL'AZIONE! WPCon 2012 - RELATORE: Francesco Marzoli
  • 50. Z – LAYOUT Il logo e la navigazione sono le prime cose ad essere viste Successivamente slogan o campagna pubblicitaria Contenuti e tasto “Azione” WPCon 2012 - RELATORE: Francesco Marzoli
  • 51. WPCon 2012 - RELATORE: Francesco Marzoli
  • 52. Quando funziona? Quando vogliamo “forzare” il visitatore a compiere un'azione Es: Download, acquisto di un oggetto, visita del portfolio ecc ecc.. WPCon 2012 - RELATORE: Francesco Marzoli
  • 53. WEBDESIGN E NATURA WPCon 2012 - RELATORE: Francesco Marzoli
  • 54. C'èra una volta tanto tempo fa... Un signore chiamato Leonardo Pisano Bigollo In arte... WPCon 2012 - RELATORE: Francesco Marzoli
  • 55. Fn = Fn-1 + Fn-2 0,1,1,3,5,8,13,21,34,55,89,144.... = 1,618... φ WPCon 2012 - RELATORE: Francesco Marzoli
  • 56. Fibonacci. WPCon 2012 - RELATORE: Francesco Marzoli
  • 57. In natura Comunemente chiamata SEZIONE AUREA WPCon 2012 - RELATORE: Francesco Marzoli
  • 58. Sezione Aurea o Golden Ratio < WPCon 2012 - RELATORE: Francesco Marzoli
  • 59. ENVATO WPCon 2012 - RELATORE: Francesco Marzoli
  • 60. SMASHING MAGAZINE WPCon 2012 - RELATORE: Francesco Marzoli
  • 61. Come si calcola? Si prende la larghezza intera della pagina Si divide per 1,618 Il risultato sarà la larghezza del contenuto principale Es: 960px / 1,618 = 593 px WPCon 2012 - RELATORE: Francesco Marzoli
  • 62. 960.gs GRID SYSTEM WPCon 2012 - RELATORE: Francesco Marzoli
  • 63. Molti dicono che le griglie sono dannose alla creatività WPCon 2012 - RELATORE: Francesco Marzoli
  • 64. Oggi abbiamo visto come le griglie sono presenti già nella natura stessa. WPCon 2012 - RELATORE: Francesco Marzoli
  • 65. Per crearle possiamo andare a mano... o possiamo prendere un format già esitente. WPCon 2012 - RELATORE: Francesco Marzoli
  • 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. Ora...FINALMENTE un po' di pratica... ahhhhhhhhh WPCon 2012 - RELATORE: Francesco Marzoli