Share
Oggi ho un trattamento speciale per tutti voi amanti della griglia là fuori! Khoi Vinh (una delle principali autorità sui sistemi di griglia tipografica nel web design) e Peachpit hanno accettato di farci pubblicare un estratto del nuovo libro di Khoi sul design della griglia: Disturbo dell'ordine: principi della griglia per il web design. In questo estratto, traccerà i principi che ogni designer dovrebbe tenere a mente quando progetta un sito web su una griglia.
La griglia è stata a lungo uno strumento prezioso per creare ordine dal caos per i progettisti di ogni tipo, dai pianificatori di città agli architetti, ai tipografi e agli artisti grafici. Negli ultimi anni anche i web designer hanno scoperto la straordinaria potenza che il design basato sulla griglia può permettersi per creare esperienze utente intuitive, coinvolgenti e meravigliose.
Ordering Disorder offre una visione definitiva delle griglie e del Web. Fornisce sia le grandi idee che le tecniche di puntinatura del design basato sulla griglia. I lettori sono sicuri di venire via con una profonda comprensione del potere delle griglie, così come gli strumenti di progettazione necessari per implementarli per il World Wide Web.
Quello che segue è un estratto, ma come leggerete, l'intero libro è scritto in modo che possa essere raccolto in qualsiasi capitolo e abbia ancora senso? quindi questo dovrebbe essere un posto perfetto per farti saltare dentro.
Abbiamo anche uno speciale sconto del 35% per i nostri lettori che vogliono ritirare l'intero libro (alla fine del post)!
Il bilancio di questo libro si concentra su come costruire una griglia, compresa una panoramica dei passaggi per una soluzione di lavoro. Prima di iniziare, tuttavia, è utile delineare i principi che ogni designer dovrebbe tenere a mente.
Una griglia dovrebbe concentrarsi sulla risoluzione dei problemi prima e sull'estetica in secondo luogo. Una griglia in grado di fornire un tale miglioramento estetico seducente a qualsiasi progetto che si sta tentando di concentrarsi sulla sua bellezza piuttosto che la sua utilità. Molti designer si preoccupano della bellezza della griglia e contendono il contenuto o la funzionalità per comprimerlo, indipendentemente da quanto possa essere scomodo o poco adatto. Ma le griglie di maggior successo sono costruite al servizio di problemi ben definiti. Che si tratti di problemi di comunicazione, problemi organizzativi o problemi di transazione, una griglia trae la sua bellezza dal modo in cui risolve queste sfide.
Una griglia è un componente dell'esperienza utente. Una griglia non è uno strumento per imporre il controllo completo dell'esperienza dell'utente di un sito web. Piuttosto, una griglia è una struttura in cui l'utente può controllare le proprie esperienze. I progettisti non dovrebbero forzare ogni elemento e interazione a verificarsi all'interno della griglia, né consentire che l'esperienza dell'utente sia informata e imprevedibile. È compito del progettista prendere determinate decisioni per l'utente, non tutte le decisioni, ma sufficienti affinché l'utente possa raggiungere i propri obiettivi senza ostacoli. La griglia è uno strumento per quel lavoro.
Più semplice è la griglia, più è efficace. I principi descritti in questo libro possono essere usati per creare griglie composte da sedici, venti o anche più unità, in qualsiasi combinazione di colonne di larghezza uniforme o irregolare. Tuttavia, il fatto è che il progettista dovrebbe sempre cercare di creare la griglia più semplice possibile. Come vedremo, la precisione matematica è un elemento chiave della buona progettazione della griglia, ma l'utilità matematica è altrettanto importante. Le formule che usi per calcolare unità e colonne combinate dovrebbero essere abbastanza semplici, anche abbastanza semplici da fare nella tua testa o per spiegare rapidamente a un collega. Più semplice è il sistema di griglia da utilizzare e da spiegare agli altri, più utenti trarranno beneficio da tale sistema di rete.
Ecco, quindi, i passaggi principali nella progettazione di una soluzione di rete:
Tieni presente che, sebbene il nostro modo di pensare debba essere rigoroso, il nostro processo non deve essere necessariamente. Sebbene l'ordine in cui ho presentato questi passaggi mi sia stato utile, potrebbe non funzionare necessariamente per tutti
progettista. Non tutti i passaggi devono essere seguiti esattamente nello stesso ordine, per un determinato periodo di tempo, in un modo specifico, o addirittura del tutto. Ad esempio, il passaggio 3, la progettazione preparatoria, è un insieme di tre diverse attività
che spesso vengono eseguiti in concomitanza, con il progettista che passa tra la matita e la carta, il software e la matematica back-of-the-envelope, se necessario. Ciò che conta non è la ripetizione meccanica di questi passaggi, ma il seguito
i principi del buon design della griglia in tutto.
Tuttavia, vale la pena dedicare un po 'di tempo a discusstwo di passaggi critici in questo processo. Il primo è la ricerca e il secondo è il disegno.
In primo luogo, giudichiamo un design davvero valido non per la sua bellezza o la sua capacità innovativa o la sua efficienza, ma piuttosto per il modo in cui risponde al suo problema originale. Le soluzioni di successo richiedono che il progettista cogli il problema che le viene presentato e i limiti entro cui lavora. Il progettista deve chiedere e comprendere la risposta a domande quali: chi è il pubblico, qual è il contesto, quando verrà trovata la soluzione, come verrà utilizzata la soluzione, e anche perché è la soluzione necessaria?
Queste domande possono essere difficili da rispondere e le risposte stesse spesso non sono chiare o difficili da analizzare. Un progettista deve essere persistente nel chiedere loro, nel premere per ottenere risposte corrette e accurate e nell'esaminare e comprendere a fondo tali risposte.
Poiché una griglia può darci un tale vantaggio nella creazione di soluzioni, può essere tentato di rinunciare a questa fase del processo. Una volta che un designer padroneggia i rudimenti delle griglie, diventa molto più facile iniziare il processo meccanico di costruzione di unità e colonne piuttosto che fare il duro lavoro di chiedere e rispondere a queste domande.
Ma quasi ogni problema di progettazione richiede un periodo di studio accurato prima che inizi la ricerca di una soluzione. Senza un chiaro senso della sfida, qualsiasi lavoro di progettazione, incluso lo sviluppo della rete, viene fatto invano. È un uso molto più produttivo del tempo fare ricerche all'inizio di un progetto piuttosto che passare direttamente al design.
I progetti basati sulla griglia non sono diversi. Più il problema è stato approfondito, migliore sarà la griglia. Griglie ben studiate massimizzano le opzioni creative disponibili per il progettista. Inoltre anticipano ed evitano le trappole di griglie costruite prematuramente: unità e colonne strutturate in modo inappropriato, griglie che fanno bene ad alcuni aspetti del problema ma inadeguati per gli altri, griglie che non tengono conto di vincoli che potrebbero non essere evidenti all'inizio, griglie che si dimostrano così inattuabili da dover essere ricostruiti in momenti impropri e da griglie che si rivelano inutilizzabili per i collaboratori.
Che tipo di vincoli dovrebbe cercare il designer? Si dividono in tre categorie principali:
Naturalmente, i progettisti si lamenteranno del disagio dei vincoli, o forse della spinosità di alcuni dei vincoli particolari con cui devono confrontarsi. Se venissero risolti solo quei vincoli, se solo il problema fosse leggermente diverso, allora la soluzione sarebbe molto più facile da raggiungere o più elegante in natura.
Tuttavia, questi vincoli hanno un rivestimento d'argento: in qualche modo potrebbero rendere un problema più difficile, ma possono anche facilitare l'arrivo a un progetto. Soluzioni complete come le griglie possono spesso trarre vantaggio dall'essere costruite attorno a uno o due vincoli non negoziabili, requisiti inamovibili che non possono essere facilmente modificati durante il processo di progettazione. Per cominciare, possono influenzare direttamente le proporzioni di una griglia, le stesse dimensioni delle unità, delle colonne e delle regioni costruite dal progettista. Questo tipo di vincoli potrebbe sembrare limitare le opzioni disponibili per un progettista, molto spesso hanno anche l'effetto di aumentare l'inventiva di un designer. Più un problema di progettazione è esteso e meno restrittivi sono i vincoli, meno un progettista è in grado di realizzare quegli insightful balzi di logica che sono il segno distintivo di un grande design. I vincoli non negoziabili possono aiutare a spronare un designer a farlo. Che si tratti di una dimensione particolare, di un imperativo tecnologico, di un'unità pubblicitaria o di un altro fattore che un designer deve aggirare piuttosto che modificare opportunamente i propri bisogni, avere un requisito immobile può essere estremamente utile.
Avendo trascorso così tanti paragrafi a discutere sull'importanza di investigare a fondo su un problema, posso fare questo succesivamente in modo più succinto: abbozzare su carta è uno strumento essenziale per la risoluzione di problemi di progettazione completa ed è particolarmente utile nello sviluppo di griglie. Il semplice atto di elaborare in modo rapido e generico combinazioni speculative di colonne e layout potenziali può far risparmiare molto tempo e spesso porta a soluzioni di griglia fertili molto più creative rispetto al semplice salto in avanti verso la progettazione o persino la codifica di una griglia.
Non sottolineerò mai abbastanza la potenza e l'utilità dell'uso di carta e matita vecchio stile per risolvere problemi, per delineare potenziali soluzioni e per esplorare idee promettenti o anche poco promettenti che potrebbero essere troppo costose o richiedere troppo tempo per testare altrimenti. In effetti, l'aspetto più importante del disegno non è tanto la realizzazione di segni sulla carta, quanto piuttosto la possibilità di analizzare molte idee rapidamente, con pochi costi. Ricorda, non hai alcuna aspettativa che gli schizzi siano qualcosa di più di semplici schizzi. Gli schizzi non devono essere belli.
Come accennato in precedenza, è anche importante ricordare che lo sketch non deve essere una fase discreta di costruzione di una griglia che inizia e finisce in punti specifici. Lo sketch può avvenire in qualsiasi fase del progetto, a più livelli di completamento, anche se ovviamente è più utile abbozzare prima, in modo che più idee e possibilità possano essere eseguite molto rapidamente. Mantenere una matita e un blocco di carta sempre a portata di mano è sicuro che si dimostrerà inestimabile.
Il vocabolario che descrive i vari componenti di una griglia può sembrare semplice, ma può anche essere sorprendentemente non specifico. Ad esempio: la nozione di una colonna sembra abbastanza semplice, ma su una pagina basata su una griglia a otto colonne, un progettista potrebbe creare un layout con solo due colonne di testo, rendendo impreciso il significato di quel termine. Persino i libri sull'artigianato della progettazione basata sulla griglia non sempre concordano sulla terminologia, con alcuni termini che utilizzano (ad es. Regioni, campi) che mancano agli altri. Per gli scopi di questo libro, quindi, è importante stabilire una terminologia di terra comune mentre procediamo ulteriormente verso discussioni più pratiche sulle griglie.
Il blocco di costruzione di qualsiasi griglia, un'unità è la più piccola divisione verticale della pagina (cioè, le unità sono misurate in larghezza), su cui sono costruite le colonne. Le unità sono in genere troppo strette per ospitare la maggior parte del contenuto testuale.
Le colonne sono gruppi di unità, combinati insieme per creare aree lavorabili per la presentazione dei contenuti. La maggior parte delle colonne di testo, ad esempio, richiede che due o più unità siano lavorabili. Un sistema a griglia di, diciamo, sedici unità può essere combinato in due colonne di otto unità ciascuna, o quattro colonne di quattro unità ciascuna, e così via.
Le regioni sono raggruppamenti di colonne simili che formano parti della pagina. Ad esempio, in una griglia a quattro colonne, le prime tre colonne da sinistra potrebbero costituire una singola regione per la visualizzazione di un tipo di contenuto e la colonna rimanente potrebbe formare un'altra regione.
I campi sono divisioni orizzontali della pagina (ovvero, i campi sono misurati in altezza) che aiutano il progettista a stimolare visivamente il posizionamento degli elementi sull'asse Y. I campi possono essere calcolati in molti modi, ma l'utilizzo della sezione aurea è uno dei metodi più efficaci.
Nella tipografia tradizionale, la linea di base è la linea invisibile su cui riposano le forme delle lettere, ad esempio il bordo inferiore di una capitale E poggia sulla linea di base, mentre il discendente di una p minuscola cadrà al di sotto della linea di base. La griglia della linea di base è formata da una ripetizione uniforme, dall'alto verso il basso, delle linee di base distanziate in base alla spaziatura iniziale o lineare del testo.
Questi concetti sono notoriamente facili da confondere (un'unità può essere pensata come una divisione orizzontale o verticale di una pagina, a seconda del punto di vista), quindi questo libro si riferisce invece alla griglia colonnare (divisioni della pagina misurate in larghezza ) e la griglia di riferimento e le regioni (divisioni della pagina misurate in altezza).
Le grondaie sono gli spazi vuoti tra unità e colonne. Quando le unità sono combinate in colonne, incorporano le grondaie tra di esse, ma non lo spazio a sinistra dell'unità più a sinistra né lo spazio a destra dell'unità più a destra.
I margini sono lo spazio esterno a un'unità o una colonna. Il riempimento è lo spazio all'interno di un'unità o di una colonna. I margini sono generalmente usati per creare grondaie, mentre il padding è generalmente usato per creare un piccolo riquadro visibile all'interno di un blocco di testo all'interno di una colonna.
Un elemento è qualsiasi singolo componente di un layout. Gli esempi includono un titolo, un blocco di testo, una foto o un pulsante.
I moduli sono gruppi di elementi, combinati per formare blocchi discreti di contenuto o funzionalità. Un modulo di registrazione, ad esempio, è un modulo composto da diversi elementi costitutivi come un'etichetta, un campo modulo, un pulsante e così via.
Questo è stato un capitolo unico del libro? se volete leggere il resto del libro, potete comprarlo su peachpit.com. La buona notizia è che abbiamo un codice promozionale speciale per i nostri lettori. Ottenere Sconto del 35% sul prezzo inserendo il codice "KHOI"durante il processo di checkout su peachpit.com Oh, e U.S. La spedizione nazionale è gratuita!
Accentsconagua