Collana Apogeo: Art & Design
Una ventina di anni fa la casa editrice Apogeo presentò fra le sue edizioni un’interessante serie di volumi dedicati alla realizzazione di siti web. La collana, diretta originariamente da Alastair Campbell, si distingueva per una grafica molto curata: formato tendente al quadrato, volume cartonato, sovraccoperta con stampa lucida e opaca, prime pagine d’apertura in argento, pagine interne tutte a colori su carta patinata di pregevole grammatura. Nonostante gli anni che sono passati questi tre volumi sono un ottimo campionario di idee per progetti personali, buona parte di essi è dedicata all’analisi di siti che sono riportati come esempi su cui riflettere. Non manca una porzione introduttiva ad ogni tomo, che affronta i problemi tipici e la teoria di base relativa all’argomento, sempre specificatamente incentrata sul lavoro di realizzazione e gestione di siti per Internet. Un buon punto di inizio per analizzare le problematiche collegate alla realizzazione di pagine web.
www.colour
Uso efficace del colore per la progettazione di pagine Web
Se avete una pur minima esperienza nel realizzare pagine web, sapete benissimo che il colore che si vede su uno schermo può cambiare di molto quando viene visto sul monitor di un computer diverso da quello su cui è stato creato. Una pagina html potrà essere interpretata da un diverso browser, da un differente sistema operativo, da una scheda video, monitor e tipologia di computer molto diversi dal nostro. Non si tratta solamente di differenti prodotti ma anche della maniera in cui sono regolati, della loro luminosità, contrasto, ecc… I parametri che influiscono sulla mutabilità di una tinta sono moltissimi. Se poi dovete stampare un’immagine il concetto di fedeltà cromatica, rispetto a ciò che vediamo a schermo, spesso si lascia molto desiderare. In realtà, se ci pensate bene, non solo per quanto riguarda il mondo informatico i colori e le tonalità sono fenomeni estremamente variabili; tutto ciò che ci circonda ha una sfumatura che può mutare in base alla luce, alla posizione, all’ora del giorno. Esempio classico che avranno fatto mille volte le vostre madri o mogli: come cambia il tono dei vestiti osservati in negozio o alla luce del sole.
Il colore però, nonostante sia un fenomeno così mutevole, è uno strumento fondamentale per chi si occupa di grafica o arte. Trasmette messaggi, evoca emozioni, sentimenti, idee… con un colore possiamo creare un’idea o esattamente la sua opposta. Come si può prevedere la sua mutabilità? Per ciò che riguarda la stampa tipografica o l’utilizzo della vostra stampante a getto d’inchiostro se n’è parlato abbondantemente anche sulle pagine di questa rivista; il libro di Roger Pring (designer grafico, scrittore ed insegnante) affronta il problema specificatamente per quanto concerne le pagine che dovranno navigare nell’immenso mare del web, per naufragare a comando su di un computer che magari può essere lontano da noi migliaia di chilometri! Il compito che il volume si propone, così come citato nell’introduzione, è di far conoscere e utilizzare efficacemente il colore per la progettazione di pagine web in modo da mantenere il controllo sul risultato finale.
Il testo inizia correttamente con un approccio storico al problema (le prime analisi scientifiche della luce di Isaac Newton e la scomposizione della luce bianca nei colori dello spettro attraverso il prisma) e propone alcuni classici esercizi percettivi per dimostrare la persistenza dell’azione della luce sulla retina nel modo di recepire il colore dell’occhio e quindi del nostro cervello. La vista non si basa solo su una registrazione tecnica e fedele effettuata dall’organo della vista, ma è il cervello con il suo background esperienziale che funge da interprete delle tonalità in base al loro accostamento.
Le pagine seguenti dell’edizione, procedono ad affrontare le tematiche più tecniche come la differenza del sistema quadricromia (CMYK) della stampa tipografica e il sistema (RGB) del monitor. Quest’ultima offre molte più possibilità al grafico: colori luccicanti, ampi contrasti, immediato feedback e adattamento allo schermo, oltre alla possibilità, su internet, di arricchire un’immagine statica con animazioni, suoni, interazione, ecc… Tutto meraviglioso, se non avessimo il grosso problema della larghezza di banda attraverso cui la nostra creazione dovrà passare (il più rapidamente possibile) per raggiungere l’utente senza che questo si stanchi e s’indirizzi verso altri siti.
Un dilemma non trascurabile sono gli standard e le campionature del colore, che l’autore riprende in differenti capitoli. Ad esempio il problema dei gamma, il sistema di misurazione dei contrasti mostrati da un monitor: nei Macintosh sono impostati a 1.8 mentre nei PC a 2.2. Nel trasferimento da un sistema all’altro di un’immagine, gli spazi di colore possono variare creando effetti indesiderati (spazio LAB della CIE - Commission Inernationale d’Eclairage). A tal proposito vengono elencati, ma forse non abbastanza approfonditi, i sistemi per regolare il monitor e configurarlo via software per avere dei colori più fedeli.
Il secondo capitolo è più operativo e affronta la concreta realizzazione di pagine html e la gestione del colore sulle varie piattaforme, con utili consigli sui software usati e su come controllare le pagine realizzate prima di mandarle on-line. Alcune dritte su come impostare colori che siano interpretati da tutti i browser e non solo dal programma utilizzato, magari verificando direttamente il file html. Viene spiegata la differenza fra formato jpg e gif e loro modalità di utilizzo (ad esempio dove prediligere i colori concentrati tipici del formato gif, oppure come controllare i margini delle immagini per un’ottima compressione del jpg, e il rapporto qualità/scaricamento), la qualità fotografica, le varie fasi di lavorazione.
Interessante la parte che spiega come stampare una pagina web trasformandola in Adobe Acrobat per mantenerne la qualità cromatica il più fedele possibile, oppure quella che suggerisce come sfruttare le degradazioni di colore usate per la compressione web, unite a effetti come quelli di Photoshop (Plastic Wrap ad esempio) per ottenere immagini particolari.
La parte più ampia ed interessante del volume è sicuramente la galleria dei siti Internet. Sono analizzati moltissimi siti che vengono illustrati con immagini e didascalie descrittive che commentano e fanno riflettere su particolari soluzioni grafiche in cui il colore è utilizzato intelligentemente per creare effetti o soluzioni nuove ed intriganti, anche mostrandone gli eventuali errori. Un utile modo per capire come funziona il web e un catalogo da tenere sempre a portata di mano per prelevarvi idee e tattiche, oppure magari per mostrare in anteprima al cliente una particolare soluzione grafica.
L’ultimo capitolo del libro riporta un glossario e delle significative tabelle dei colori per il monitor.
www.colour
Roger Pring
Apogeo
192 pagine a colori
Euro 40,28
www.layout
Design efficace per il world wide web
“E’ lo strumento più giovane, vibrante, sfacciato, brillante e al di fuori di tutte le regole con il quale si sia mai potuto lavorare. Se sei un graphic designer pieno di idee rivoluzionarie, Internet è la chiave del tuo successo. (°°°) Il web è un mondo virtuale del quale si può avere esperienza senza, però, poterlo toccare. Le immagini, i suoni, le animazioni, i video e tutti gli altri strabilianti effetti disponibili durante la navigazione non sono altro che il risultato visibile e udibile tra i computer della rete interconnessa di reti di computer che rappresenta appunto Internet.” In questo modo si apre il libro di Jérry Glenwright, considerando appunto il mondo del web e quindi il suo design, come una grande frontiera di conquiste e sperimentazione, ma non priva di riferimenti percettivi ed esperienziali che non possono essere che tratti dal mondo del design tradizionale.
L’autore spiega che una delle principali leggi per creare il layout di una pagina di successo sta nella capacità di sottolineare dei particolari, anche con modifiche minime, per creare un effetto d’enfasi. Può sembrare strano ma è esattamente (e semplicemente) ciò che facciamo quando impostiamo una parola in grassetto o cambiandogli il colore del testo. Il concetto è basilare quanto apparentemente infantile, eppure tutto il gioco di “conquista” dei nostri ipotetici fruitori (almeno per chi si occupa di web) parte da qui.
Il primo capitolo è dedicato alla storia e al significato del design, una materia che unisce in se bellezza e funzionalità, e non può quindi esserne discinto, come invece accade in campo artistico. I siti web devono essere strabilianti, animati e belli ma anche veloci e pronti all’uso, funzionali al target di riferimento. L’utente deve riuscire a capire ed esplorare tutto ciò che il sito offre. Per quanto riguarda la storia del web (sembra ironico parlare di storia e risalire a soli pochi anni fa) il punto di partenza è il caro HTML (HyperText Markup Language), i newsgroup, i primi browser (Enquire e poi Mosaic) e gli hiperlinks.
Si passa quindi ad analizzare come è organizzato un sito. Essendo l’html fondamentalmente una raccolta e strutturazione di più realtà e file, come immagini, suoni, colori e animazioni, la prima cosa che ci viene consigliata di fare è una buona pianificazione e gestione della struttura. Rendere prima di tutto ben fruibile l’interfaccia grafica, uniforme nell’insieme delle varie pagine, soprattutto se ci sono varie sezioni, calcolando la possibilità di una successiva rielaborazione per gli aggiornamenti. Non c’è nulla di più demotivante per il navigante della rete che trovare pagine in costruzione o non aggiornate da parecchio tempo. Per far questo bisogna fin dall’inizio progettare e chiarire gli obiettivi. Una volta pianificato il sito si potrà caratterizzare attraverso la classica home-page, una struttura a frame o altre soluzioni riportate ad esempio nel testo.
Anche se velocemente, in www.layout, vengono esposte le novità dell’HTML 4 e i cascading style sheet (CSS), ovvero i fogli di stile per applicare i cambiamenti di stile di una pagina all’intero sito. Sono chiaramente differenziati i fogli di stile interni ed esterni (ovvero inline) o quelli collegati (per esempio per gestire la misurazione del colore in modo diverso dall’HTML standard). Grazie ad essi il browser interpreta nuove modalità per rendere effetti visivi da definire per tutte le pagine del sito o per la singola pagina o parte di essa.
Presentati i programmi che gestiscono l’Html come fossero software per il DTP (i programmi di creazione pagine web che offrono un ambiente WYSIWYG - what-you-see-is-what-you-get - ossia che permettano di ottenere e vedere subito il risultato del proprio lavoro di impaginazione, o almeno il più vicino possibile; in particolare sono citati FrontPage della Microsoft e PageMill o GoLive della Adobe) e spiegati i motivi per cui in alcuni casi convenga ancora sporcandosi le mani con il codice puro. Interessante la parte che spiega le differenze fra Explorer e Netscape, i problemi di lettura, il modo di interpretare sfondi o altre caratteristiche dei due programmi.
Diversi esempi sono dedicati a descrivere blocchi, tabelle semplici e nidificate per realizzare precise impaginazioni e ottenere tabulazioni che si ripetano con coerenza su altri computer. Le pagine colorate del volume passano in rassegna tutti i principali problemi della gestione di un layout per il web: misurare in pixel o a percentuale in base alle risoluzioni dello schermo per ovviare le fastidiose barre di scorrimento, leggibilità del testo e le ancore, gestire font scaricabili e i font WEFT di Microsoft (che permettono di incorporare i font nella pagina e scaricarli al momento della visualizzazione), dimensioni del testo, stili (grassetto, corsivo, ecc), rientri, elenchi, ecc.
Analizzate le immagini e i formati tipici: Gif (Graphics Interchange Format) a 256 colori, utile per grafica e immagini non fotorealistiche e le sue versioni GIF-87° e Gif-89° per trasparenze e animazioni; JPEG (Joint Photographic Experts Group) specifico per le immagini fotografiche con una profondità di colore più ampia (16,7 milioni di colori); e il nuovo formato PNG (Portable Network Graphics) che occupa il 30% in meno di spazio disco rispetto a Gif con una qualità superiore. Purtroppo oggi non ancora tutti i browser installati sono in grado di visualizzarlo. Per concludere il discorso sulle immagini non potevano mancare mappe e gestione dei frame sulle fotografie.
Alcune pagine sono spese per chiarire come essere segnalati nel web tramite i motori di ricerca con i classici trucchi come quello di inserire le parole chiave nelle Tag ALT, e la possibilità di inserire la propria marchio watermarking nelle immagini.
Come nel precedente volume la parte migliore del libro rimane comunque la presentazione di moltissimi esempi sia con immagini che commenti, tratti dai siti reperibili sulla rete, che rendono questa raccolta una vera miniera di riferimento e riflessione da cui attingere per i vostri lavori.
www.layout
Jerry Glenwright
Apogeo
192 pagine a colori
Euro 40,28
www.type
Tecniche tipografiche efficaci per il world wide web
Il libro mette a fuoco un elemento spesso trascurato dai manuali tecnici di progettazione grafica per siti Internet: l’aspetto dei caratteri e la loro resa funzionale. Nonostante che le pagine web si arricchiscano ogni giorno di più con filmati, immagini e suoni, magari con la possibilità di potervi interagire grazie ad una velocità di trasferimento sempre più alta, va comunque riconosciuto che il ruolo primario di ciò che appare nelle videate della rete è il testo. Multiforme, colorato e ibrido, ma sempre di lettere e font si tratta. E’ quindi il primo e più importante strumento con cui abbiamo a che fare e con il quale dobbiamo catturare l’attenzione del nostro pubblico. Il rapporto con le classiche regole della tipografia in parte si ribalta perché molte caratteristiche sono mutate e nuove scoperte si affacciano in ogni momento. Le tipografie da poco più di 15 anni hanno incominciato a lavorare in ambienti computerizzati, con software che offrono controlli precisi al millimetro. Ma anche in un ambiente così sorprendente e rivoluzionario come internet certe regole base non possono essere scordate, ci ricorda l’autore Roger Pring. Il problema più grande per il designer del web è dover fare i conti con utenti che avranno risoluzioni e impostazioni del proprio monitor estremamente differenti fra loro. Per cui l’allineamento delle lettere sarà il primo a variare nella nostra impaginazione. Anche il colore dei testi o la riconoscibilità del font da noi utilizzato sono a forte rischio. Se il carattere previsto nel file html non è installato nel computer di chi legge la nostra pagina, questo sarà sostituito dal font predefinito del browser. L’innovativo linguaggio di descrizione pagina (Page Description Language PDL) di Adobe offre font scalabili, indipendenti dalla risoluzione. E’ la base del formato PDF che in questo momento è ciò che garantisce la miglior fedeltà.
Con i fogli stile CDD (Cascading Style Sheet) possiamo, tramite piccoli script a livello del codice html, controllare stili di caratteri, interlinea, allineamento, ecc… Forniscono delle “regole di comportamento” al browser nel caso qualcosa non funzionasse come previsto (non è riconosciuto il carattere, il colore, ecc). Il volume continua nell’analisi dei problemi collegati alla gestione corretta dei testi parlando ad esempio del sistema Bitstream TrueDoc che cerca di velocizzare il trasferimento dei font inviando solo quelli necessari e richiesti. WebFont registra le forme dei caratteri necessari e produce una struttura di dati compatta (Portable Font Resource PFR). In Netscape il lettore è incorporato mentre in Explorer dev’essere installato un apposito controllo ActiveX. OpenType permette di scaricare gli “oggetti font” dei caratteri pertinenti come se fossero immagini Gif o Jpeg, quindi decompressi e inseriti all’interno della cache del browser. Vengono utilizzati solo dal browser e non da altre applicazioni.
Il manuale non si sofferma ad una spuria analisi di software e possibilità tecniche ma le collega anche a problemi percettivi. Noi leggiamo, non tanto riconoscendo la singola lettera e facendone una somma matematica, quanto piuttosto distinguendo e ricreando mentalmente blocchi di parole. Quindi un testo funziona bene se il rapporto tra la sua forma e colore e il fondo a cui è sovrapposto si integrano piacevolmente; se la relazione con i caratteri che ha di fianco è fluida e chiara; se il lettore riuscirà a raggruppare, velocemente e senza fatica, le parti delle parole per una lettura più comoda e veloce. La leggibilità aumenta impostando le colonne ed evitando frasi lunghe come tutta la larghezza dello schermo. Anche le colonne vano usate con la consapevolezza dei problemi che possono creare: analizzati diversi esempi e qualche trucco (come inserire un’immagine trasparente gif fra blocchi di testo per creare spazi. Sempre sperando che non visiti il nostro sito un utente con un browser non predisposto per scaricare immagini). Un altro sistema è di ricorrere alle tabelle con la possibilità di utilizzare opportuni filetti di divisione.
L’autore ci consiglia di aggiornare i nostri siti molto di frequente. Spesso questa necessità è richiesta anche dal cliente, per l’immissione di nuovi prodotti o cambiamenti della produzione. Sarà bene prevedere che le parti che dobbiamo cambiare con una frequenza quotidiana, o settimanale, siano realizzate in un formato vettoriale, proprio per evitarvi inutili lavori di rigenerazione e render d’immagini, magari proprio con testi. E’ importantissimo progettare il nostro sito fin dall’inizio ottimizzando e calcolando l’uso del testo.
Un ulteriore capitolo è dedicato ad esempi e consigli per creare parole (più che altro per titoli o loghi) con Photoshop e Freehand o addirittura in 3D con opportuni software di grafica tridimensionale. GifBuilder viene nominato per la gestione delle animazioni, in attesa che flash diventi lo standar dell’animazione. Un capitolo è infatti dedicato al programma di animazione Macromedia, mentre un’ultima parte cita Java indicando alcuni siti da cui reperire esempi e risorse. Sono sempre accenni perché ognuno di questi argomenti richiederebbe un libro specificatamente dedicato.
Come gli altri volumi della serie, buona parte del libro si arricchisce grazie ad una moltitudine di esempi tratti da siti Internet che vengono analizzati e studiati. Interessante anche un capitolo in cui ci sono gli esempi da non seguire affatto, un utile riflessione su errori e abitudini grafiche fin troppo abusate.
www.type
Roger Pring
Apogeo
192 pagine a colori
Euro 40,28
