1.IL CONTRASTO TRA I COLORI
Chi ha frequentato Internet anche solo da
un anno o due ha visto l'evolversi del gusto e dell'aspetto delle pagine
in maniera impressionante. In questo momento vanno di moda gli sfondi bianchi,
ma occorre fare attenzione. Il bianco della carta non è la stessa
cosa del bianco dello schermo.
La pagina di carta è illuminata da
una fonte esterna, lo schermo emette luce.
La quantità di luce emessa è
massima con lo sfondo bianco, e le lettere sottili; questa condizione può
affaticare l'occhio.
E' curioso sapere che le immagini che noi "vediamo"
sullo schermo esistono in realtà solo nella nostra testa: oggettivamente,
sullo schermo vi è solo un punto illuminato che si sposta molto
velocemente. A seconda della velocità di spostamento di questo punto
si ha un fenomeno chioamato "sfarfallamento", che induce un forte affaticamento
della vista.
A parità di schermo (hardware) si hanno
le condizioni di minore affaticamento quando
si hanno delle lettere chiare su fondo nero. Lo
sfarfallamento dello schermo in queste condizioni viene insomma minimizzato.
Ma non dovete pensare di creare solo sfondi neri o molto scuri: vanno benissimo
anche fondi chiari, purchè le lettere abbiano un
contrasto ragionevole con il colore dello
sfondo. Porre (ad esempio) delle lettere azzurrine su un fondo bianco comporta
uno scarso contrasto, e quindi una difficile lettura. Per contro, un
leggero sfondo colorato
rende più facile e gradevole la lettura anche di lettere scure. |
prova di scittura con lo
stesso colore del fondo
ma con luminosità diversa.
Prova con gli i stessi caratteri
e di dimensioni uguali a prima
ma più sottili.
Prova con
gli stessi
caratteri
e colore ma con dimensioni
maggiori. |
2.LA LARGHEZZA DELLE RIGHE
Da molto tempo (diciamo...da secoli!) è
stato notato che delle righe brevi sono leggibili con maggior facilità
che non delle righe lunghe. Alla fine della riga lunga l'occhio deve andare
a capo, va a "cercare" l'inizio della riga seguente e perde più
tempo.
Per contro, degli a-capo troppo frequenti rendono
spezzettata la continuità di lettura. Per testi brevi il problema
non si pone, per testi lunghi adottate un giusto compromesso: se i caratteri
sono grandi, mettete il testo su una sola colonna a tutto schermo. Se i
caratteri sono piccoli, mettete il testo su più colonne o (meglio
ancora) "stringete" artificialmente la colonna mettendo a lato qualche
ornamento o le immagini.
Se il testo è lungo è quasi sempre
meglio usare una sola colonna, perchè
mentre in un libro o una rivista avete sempre la pagina sotto gli occhi,
sullo schermo può essere molto difficile e fastidioso scendere oltre
il bordo inferiore per leggere delle righe e poi risalire oltre il bordo
superiore per andare avanti sulla colonna successiva. |
|
3.ANCHE IL COLORE DI SFONDO!
Gli sfondi di grandi dimensioni (ad esempio,
JPG di 7-10K) sono caricati più lentamente, e il visitatore delle
vostre pagine può iniziare a leggere senza
l'effetto iniziale che avete ricercato con
cura.
E' opportuno non mettere degli sfondi di dimensioni
notevoli, ma se volete farlo, ricorrete almeno ad un espediente:
oltre all'"immagine" dello sfondo, mettete
anche un "colore" di sfondo
(bg color...) che sia simile nell'effetto
a quello generato dall'immagine.
Ad esempio, se la vostra immagine di sfondo
è un cielo stellato, mettete nella pagina anche un blu notte, se
la texture è costituita dal legno come in questa pagina, mettete
anche un colore di fondo marrone... Quando l'immagine verrà caricata,
essa si sostituirà automaticamente al colore di fondo, che viene
invece caricato velocemente, e comunque prima del testo. |
|
4.LUMINANZA E CROMA
Nella scelta del colore, è più
importante valutare la differenza di luminosità (=luminanza) che
la differenza di tono (=crominanza).
Due colori anche diversissimi tra di loro
ma con una luminosità simile possono generare una pagina praticamente
illeggibile.
Qui a destra riporto l'esempio di uno sfondo
blu.
Il rosso è un colore del tutto differente
dal blu (sono due colori primari). Ma se mettiamo il rosso puro sul blu
puro ecco che il risultato è difficile da leggere.
L'azzurro è invece un colore molto
simile (anzi, assimilabile) al blu: l'azzurro dell'esempio è addirittura
costituito dallo stesso blu dello sfondo, semplicemente schiarito!
Ma così ha una luminosità molto
diversa, e (come vedete) la scritta viene letta bene. |
questa scritta è fatta
con lo stesso colore
del fondo ma con
diversa luminosità.
Questa è fatta con un colore
diverso ma con
luminosità simile a
quella dello sfondo.... |
5.NEGATIVO/POSITIVO
Se il vostro sfondo ha una luminosità
troppo vicina alle lettere, o è troppo riconoscibile, una buona
soluzione può essere quella di cambiare
la luminosità dello sfondo agendo sui
comandi di un buon programma di gestione delle immagini (ad esempio, paintShop).
Un metodo che fornisce risultati sorprendenti
consiste invece nella semplice inversione negativa dell'immagine: notate
ad esempio nella pagina dedicata agli sfondi come l'inversione della copertina
del dizionario divenga qualcosa di simile ad un cielo stellato. |
sopra: la copertina
sotto: il negativo
dell'immagine
precedente
 |
6.TESTO LUNGO E CORTO
Quando scegliete il colore dello sfondo e
delle lettere, facilitate la lettura scegliendo dei colori e delle tonalità
differenti.
Leggere delle lettere nere su un fondo grigio
è più difficoltoso che leggere delle lettere nere su fondo
chiaro. Ma (si diceva prima) il fondo chiaro affatica di più. Occorre
trovare dunque un giusto compromesso tra la leggibilità favorita
dalla presenza di contrasto e la leggibilità favorita dalla mancanza
di sfarfallamento (=vedi il punto precedente). Faccio un esempio. Se il
testo è breve, è bene che sia ben contrastato; anche se il
fondo è bianco, non si ha molto tempo per "soffrire" per lo sfarfallamento.
Se il testo è molto lungo e impegnativo, meglio uno sfondo riposante. |
|
7.RIDIMENSIONARE GLI SFONDI
Gli sfondi costituiti da immagini di piccole
dimensioni spesso sono molto vantaggiosi rispetto a quelli di dimensioni
più grandi. Se volete rendere più "piccola" un'immagine,
passandola ad esempio da 7 a 2K, provate con due metodi distinti: innanzitutto,
facendo un "resample" (o un "resize",
a seconda del programma) impostando valori corrispondenti a dimensioni
più piccole. Partendo dall'immagine originale, provate anche a selezionarne
una sola parte, e poi ad effettuare un "copping".
Nel primo caso avrete la stessa immagine più
piccola, nel secondo caso avrete mantenuto la stessa texture con le stesse
dimensioni. Provate la differenza su diversi
sfondi e vedrete che in molti casi l'effetto finale è completamente
diverso, e può anche capitare che sia migliore dell'originale. |
|
8.CALCOLATE I TEMPI
Quando formate una pagina, calcolate le dimensioni
delle immagini in base ai tempi medi di caricamento di Internet, e non
sulla velocità di caricamento dle vostro computer. Mentre caricate
la pagina nel browser partendo da una subdirectory del vostro computer
tutto pare andare liscio. Se però la caricate partendo dal server,
ecco che spesso vi viene da perdere la pazienza e passare a qualcos'altro...
Ricordate: minimizzate le dimensioni delle immagini, e mettete quelle indispensabili! |
|
9.TESTO O IMMAGINI?
Netscape e Explorer 3 hanno delle grosse limitazioni
nel controllo della spaziatura tra le righe di testo (interlinea), tra
le parole di una riga e tra i caratteri di una parola. Per ovviare a questo
inconveniente, alcuni designer di pagine web mettono quasi tutte le scritte
sotto forma di immagine. In altre parole, molte scritte sono state fatte
scrivendo su una immagine (GIF o JPG) mediante un programma come PhotoShop,
PaintShop, eccetera, e poi salvate e caricate come immagini. Questo metodo
ha anche altri due vantaggi:
1-si possono usare font di fantasia, modificati
in maniera creativa
2-è l'unico modo per essere sicuri
che l'utente finale veda quel font, e non altri font più o meno
simili a seconda di come ha configurato il proprioc omputer e il proprio
browser. Tuttavia questo metodo ha due svantaggi:
1-caricare delle immagini è molto più
lento che caricare il testo, e molti utenti perdono la pazienza, sopratutto
se il pensiero corre agli scatti che salgono solo per caricare cosette
di scarso rilievo...
2-si occupa molto più spazio sul server,
e quindi si possoo "mangiare" i mega concessi solo per aspetti secondari.
Davanti a questa possibilità, vi è
ancora una volta la necessità di studiare un rapporto ragionevole
tra testo ed immagini: se in una pagina vi sono già molte foto,
ricorrete al testo e basta. Se c'è quasi solo testo, titoletti e
sommari sotto forma di immagine possono milgiorare moltissimo l'aspeto
generale della pagina. Ricordate che un testo in forma di immagine può
impegnare uno spazio in bit considerevole, per rendere nitidi i contorni
delle lettere o per renderle abbastanza grandi da essere leggibili! |
|
10. DIMENSIONARE LE IMMAGINI
Per rispermiare spazio sul server o rendere
più umani i tempi di caricamento delle immagini nei browser, è
opportuno preparare delle immagini che abbiano una risoluzione giusto giusto
sufficiente per le dimensioni richieste. Per valutare quali sono le dimensioni
minime in termini di bit delle immagini, salvate innanzitutto la vostra
immagine in JPG, il sistema oggi più efficiente dotato di uan diffusione
adeguata. A questo punto caricate le immagini nel browser con le dimensioni
originali (senza i parametri "size..."). Primo caso. Immaginate che (per
la grafica della vostra pagina) vi piacerebbe averla più grande.
Provate ora a dimensionarle in modo che siano
funzionali alla pagina, aumentandone le dimensioni fin che l'immagine non
appare sgranata e qualitativamente inaccettabile. Potete ora tornare ai
valori in cui la ritenete adeguata qualitativamente ai vostri scopi. Secondo
caso.
Immaginate invece che vi sembri accettabile
(per la grafica della vostra pagine) che l'immagine possa essere più
piccola. Inq uesto caso, non agite come nel caso precedente, riducendo
le dimensioni (con il comando HTML size o con l'editor HTML) ma agite sull'immagine
originale. Caricatela in un programma di gestione delle immagini (PaintShop,
PhotoShop, eccetera...) e ridimensionatela diminuendo il suo peso in bit;
ridicendola ad esempio da 9K a 7K.
In conclusione: se
dovete ingrandire un'immagine (anche a scapito
di un po' di qualità) potreste farlo anche con i comandi HTML
o con l'editor HTML. Se dovete ridurla,
non fatelo in HTML o con un editor HTML, ma con un programma di elaborazione
delle immagini, in modo da ridurre il nuemro di bit usati. |
|
11.GIF PSEUDO-TRASPARENTI
Alcuni programmi (paintShop) permettono di
creare delle "gif trasparenti".
Ad esempio, una immagine con i contorni irregolari
può andare su uno sfondo (es. su marmo) senza tirarsi dietro lo
sfondo su cui era prima. Creare delle "gif trasparenti" a volte è
comunque un'impresa, perchè i comandi di questi elaboratori d'immagini
possono essere complicatissimi.
Se volete usare un metodo un po' più
lungo ma che vi consente di vedere subito l'effetto, oppure se non avete
un programma di elaborazione che vi consente di creare GIF trasparenti,
adottate il sistema che vi vado a illustrare.
Primo passo. Aprite lo sfondo che volete usare.
Salvatelo con il nome dell'immagine definitiva (es. medaglia.jpg)
Secondo passo. Espandete l'immagine ai lati
dello sfondo.
Terzo passo. Con il comando taglia e incolla
tappezzate l'immagine con lo sfondo.
Quarto passo: aprite l''immagine che volete
montare sullo sfondo.
Quinto passo: selezionate il contorno della
sola parte che volete usare, e con il "taglia e incolla" (generalmente
control+c e control+v) portatela sulla prima immagine (es. medaglia.jpg).
Se caricate questa immagine sullo sfondo originale,
ecco che l'effetto sarà quello di continuità con lo sfondo
presente sul browser! |
1 passo: aprite lo sfondo.
terzo passo: ingrandire lo sfondo
quarto passo: aprite l'immagine e selezionate
la parte da incollare
incollatela sullo sfondo.
Questa immagine (collocata sullo sfondo iniziale) non sembra avere
uno sfondo suo. Il sole dell'home - page è stato ottenuto con questo
sistema... |
|
|
|
|
