960 Grid System: dalla progettazione allo sviluppo

 
di Luca Mascaro il September 21, 2008 alle 08:46
 

La griglia è a mio vedere uno degli elementi fondamentali per la sostenibilità di una qualsiasi interfaccia. Per esempio sulla griglia  si basa il presente e il futuro di ciò che potrà essere presentato su un sito in termini di struttura ed elementi di contenuto.

Da anni si discute sul come strutturare al meglio una grigli intermediando esigenze di risoluzione, di contenuti, di elementi dalla dimensione standardizzata (es: la pubblicità) e di percezione visiva senza però trovare una soluzione unica che si adatti a tutte le interfacce.

Fino ad oggi chi ha fatto il ragionamento più esteso e approfondito sulle griglie è stato Khoi Vinh con l’aiuto di Mark Boulton presentando durante SXSW Interactive una riflessione completa su come strutturare una griglia.

Comunque elidendo i ragionamenti più teorici sulla strutturazione delle griglie (che in genere vengono definite a livello di wireframes) vi è quasi sempre stato un problema a mantenerle poi coerenti nel visual design e nell’implementazione.

Oggi Nathan Smith ci da una mano nel risolvere questa problematica proponendo il 960 Grid System una libreria pronta per creare griglie a 12 e 16 colonne regolari all’interno di wireframes, photoshop e CSS.

Questa griglia è molto interessante per accellerare la progettazione e lo sviluppo ed eccelle nelle caratteristiche di percezione anche se pecca notevolmente nell’integrare i formati pubblicitari.

In ogni caso vi suggerisco di provarla ;-)

Related Posts with Thumbnails
Condividi :)
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • Segnalo
  • Technorati
  • TwitThis
  • Wikio IT
  • Tumblr
  • Upnews
  • Yahoo! Buzz
 

La discussione è già avviata

  1. Tiziano Fogliata il September 21, 2008 alle 10:20 am ha detto:

    In effetti il limite che subito mi è venuto in mente guardando le caratteristiche di 960 Grid è l’eccessiva larghezza della colonna base, che può diventare facilmente un grosso vincolo quando si devono inserire elementi dalle dimensioni fisse come banner e annunci pubblicitari.
    Con BluePrint, ad esempio, è possibile generare il css di base del framework decidendo la larghezza totale, il numero delle colonne e la loro dimensione.

    Rispondi

  2. lucamascaro il September 21, 2008 alle 3:31 pm ha detto:

    Questo e vero ma BluePrint non ti da una mano dal lato progettuale

    Rispondi

  3. Tiziano Fogliata il September 22, 2008 alle 10:33 am ha detto:

    E’ vero, al massimo ti permette di visualizzare la griglia come sfondo della pagina.

    Rispondi

  4. Luca Mascaro il October 13, 2008 alle 11:39 pm ha detto:

    Giusto un’interessante aggiornamento. Stephen Bau ha sviluppato una variante del 960gs su layout liquido che di fatto permette di progettare in modo fisso e sviluppare in modo liquido.. una bella comodità

    http://www.designinfluences.com/fluid960gs/

    Rispondi

  5. Gabriele il January 19, 2009 alle 9:09 pm ha detto:

    Ciao volevo chiedere se ci sono delle alternative a 960grid system per
    progettare un sito perchè le dimensioni della larghezza della colonna sono eccessive e non mi permette di realizzare il sito come volevo perchè dovrei ricalcolare tutte le dimensioni delle immagini e dei vari contenuti del sito come barra di navigazione etc etc…
    Mi servirebbe qualcosa di simile ma con una larghezza di 800px

    Rispondi

  6. Luca Mascaro il January 20, 2009 alle 7:05 am ha detto:

    Per una griglia più stretta ci sarebbe blueprint css

    http://www.blueprintcss.org/

    Rispondi

Lascia un commento

Torna in cima


Contatti veloci VCARD

Telefono: 0041 79 375 83 85
E-mail: info@lucamascaro.info
Skype: lucamascaro Il mio stato su skype

View Luca Mascaro's profile on LinkedIn

Resta aggiornato!

Rimani sempre aggiornato su questo blog tramite i Feed RSS

Cosa sono e come posso usarli i feed rss?

oppure iscriviti alla newsletter settimanale

UX magazine logo

Su queste pagine parlo di...