(stralci
tratti da www.htlm.it) Immagini Clip Corel Draw
si
occupa dell'aspetto visivo e del coinvolgimento emotivo di siti Web
business to business e business to consumer . Il web designer risolve i
problemi di comunicazione dei loro clienti, valorizzando l'identità del
marchio in modo specificamente pensato per il web, sfruttandone i punti di
forza, conoscendo le possibilità offerte dalla tecnologia. Collabora con
il gruppo di lavoro e con i clienti per realizzare siti che siano
accattivanti dal punto di vista grafico, abbiano un buon impatto visivo,
siano semplice da navigare , compatibili con le esigenze dei visitatori e
accessibili utilizzando browser e componenti diversi. A lui spetta il
compito di coniugare design e navigazione mediante l'utilizzo delle
tecnologie disponibili.
Le sue funzioni si articolano in diversi compiti, svolti in collaborazione
con un team di lavoro. Il web designer è fondamentalmente un comunicatore,
capace di coniugare le esigenze del cliente con quelle degli utenti. Egli
infatti:
-
comprende la tecnologia da usare, conoscendo le possibilità e i limiti che si possono incontrare nella realizzazione di un sito e ne discute con i clienti e gli altri professionisti impegnati nel progetto
-
traduce le esigenze, i contenuti e il marchio del cliente in concetti strutturati adatti a un sito web, rispondendo alle esigenze degli utenti e proponendo prove a colori, adatte allo strumento su cui saranno veicolate e realizzabili dal punto di vista tecnico
-
progetta i componenti necessari alla navigazione
-
trasforma gli elementi di progettazione realizzati con software grafici (Photoshop e Illustrator per esempio) in componenti utilizzabili e modificabili su un sito Web
-
prepara il layout delle pagine del sito utilizzando l'HTML e altri linguaggi di programmazione (JavaScript e fogli di stile) insieme a sviluppatori e tecnici web
-
decide lo stile delle pagine web a livello di grafica, layout, tipografia, colori…
-
prepara e presenta i contenuti in modo che risultino ben leggibili e ben strutturati seguendo le linee guida stabilite dal content manager
-
è responsabile del mantenimento del sito, apporta le modifiche grafiche e di codice necessarie, aggiornando e curando il sito
Il tipo di carattere
Il tipo di carattere utilizzato è uno degli elementi più
importanti di un sito Web ben realizzato. I caratteri predefiniti
residenti nella maggior parte dei sistemi operativi sono: Arial, Courier,
Georgia, Times New Roman, Trebuchet e Verdana. Analizzando nello specifico
possiamo fare un'ulteriore distinzione:
Sistemi Windows: Times New Roman, Arial e Courier New
Sistemi Mac OS: Times, Helvetica e Courier
Ma questi caratteri, come già saprai, non sono tutti
uguali. Possiamo dividerli ulteriormente in tre grandi famiglie:
Times e Times New Roman sono caratteri serif. Vanno bene per i documenti
stampati, ma sono meno leggibili sullo schermo di un computer.
Arial e Helvetica sono caratteri sans-serif. Sono chiaramente leggibili
sullo schermo.
Courier e Courier New sono caratteri a larghezza fissa, sono come i
caratteri di una macchina da scrivere.
Leggibilità dei caratteri sul monitor
Ti sei mai chiesto da cosa dipende la leggibiltà o meno
di un font? È presto detto: dipende soprattutto dalla cosiddetta altezza
x (l'altezza di una x minuscola) e dalla dimensione generale del
carattere. Così un tipo di carattere come Times New Roman ha una
leggibilità media sullo schermo del computer perché ha un'altezza x
moderata. Invece caratteri quali Georgia e Verdana sono stati progettati
per essere letti su schermo, infatti hanno altezze x esagerate e sono
molto grandi, se paragonati a tipi di caratteri più tradizionali con la
stessa dimensione di punti. Per risolvere questo inconveniente, come
abbiamo già detto più volte devi offrire al tuo visitatore una scelta di
caratteri. Hai la possibilità di associare ad una pagina una lista di
caratteri. Se il browser dell'utente non trova il primo carattere
elencato, tenta con il successivo e così via. La cosa migliore da fare è
di definire un elenco di caratteri come segue:
Scegli un carattere che ti piace, e verifica che sia tra quelli più
comunemente disponibili.
Dai caratteri di più largo uso, scegline uno che sia simile (per Windows
e per Mac) al tuo preferito.
La maggior parte degli editor HTML WYSIWYG come Dreamweaver o GoLive
consentono di selezionare un carattere da una lista. Come puoi vedere in
figura con Dreamweaver, basta scegliere la lista di caratteri desiderati.
Puoi anche modificare la lista dei font modificando nel codice HTML la
lista presente nell'attributo FACE, come ormai avrai già imparato a fare
nelle lezioni sullo HTML. Utilizza sempre pochi font e poche dimensioni,
per dare alle pagine un aspetto più chiaro, inoltre, per dare
uniformità, applica sempre lo stesso tipo di carattere e la stessa
combinazione di stili in tutte le pagine di un sito Web evitando
cambiamenti casuali.
La leggibilità delle pagine
Ricorda che in un sito il cui contenuto è rapprsentato prevalentemente
dal testo, la tipografia è uno strumento fondamentale per organizzare
anche la grafica.
Cerca di non riempire le tue pagine con un testo denso, ma organizza le
tue schermate fornendo sempre un minimo di contrasto con un giusto
equilibrio tra grafica e testo, in modo da facilitare la comprensione
dell'organizzazione delle informazioni ed aumentare la leggibilità del
documento.
Un buon uso dei margini e dello spazio bianco aumenta la leggibilità di
una pagina web quindi puoi utilizzarli per diversificare il testo
principale dagli altri elementi della pagina.
Diamo risalto alle parole
Cerca sempre di attirare l'occhio del lettore anche
attraverso un giusto "movimento" del testo. A volte basta una
piccola modifica per creare un contrasto visivo che attira l'occhio. Hai a
tua disposizione strumenti tipografici consolidati che permettono di dare
risalto ad un blocco di testo, ma è importante non utilizzarli in modo
errato.
Corsivo (es: Corsivo) - Il testo corsivo attira l'occhio perché è in
contrasto con la forma del corpo del testo ma non è molto leggibile sullo
schermo, utilizzalo all'interno del testo per parole o frasi accentuate o
straniere e comunque quando non puoi proprio farne a meno.
Grassetto (es: Grassetto) - Il testo in grassetto conferisce risalto
essendo in contrasto con il colore del testo normale. Il grassetto è
abbastanza leggibile su schermo, ma è bene usare il grassetto per
evidenziare singole parole e non intere frasi, altrimenti la sua funzione
viene a cadere.
Sottolineato (es: Sottolineato) - Il testo sottolineato è una convenzione
tipografica che risale ai tempi delle macchine da scrivere, quando il
corsivo e il grassetto non erano disponibili. È buona norma evitare la
sottolineatura nei documenti web poichè generalmente indica un
collegamento ipertestuale. Se usi testo sottolineato in una pagina web,
puoi star certo che sarà sicuramente confuso con un collegamento
ipertestuale.
Testo Colorato (es: Testo Colorato) - Generalmente il testo colorato come
il testo sottolineato ha funzione di collegamento ipertestuale, perciò
usalo solo per questa funzione, cercando di dare lo stesso colore a tutti
i link presenti nei tuoi testi.
Lettere maiuscole (es: LETTERE MAIUSCOLE) - Il testo in lettere maiuscole
è uno dei metodi più comuni e meno efficaci per aggiungere risalto
tipografico. Ha più o meno la stessa funzione del grassetto, ma
probabilmente non ha la stessa efficacia. Considera sempre di usarlo solo
per dare risalto ad alcune parole, quando proprio non puoi usare il
grassetto, e comunque non usarlo per grandi blocchi di testo.
Spaziatura tra paragrafi - Uno dei modi più efficaci e sottili per
variare il contrasto visivo e l'importanza relativa di una porzione di
testo consiste semplicemente nell'isolarla o trattarla in modo diverso dal
testo circostante. Dividi il testo in tanti piccoli blocchi e distanziali
leggermente tra di loro sarà più facile leggerli e comprenderli.
Quanto scrivere?
Scegli parole corte che entrano più facilmente nel
processo di comprensione, fai in modo che le tue frasi siano composte da
un massimo di 24, 25 parole, e usa espressioni concrete, tangibili.
Anche la lunghezza delle righe di testo delle pagine web gioca un ruolo
fondamentale per la leggibilità. È opportuno restringere la lunghezza
delle righe di testo a circa 60/70 caratteri per riga.
Il conteggio esatto dei caratteri è difficile da prevedere perché le
dimensioni dei caratteri variano a seconda dei browser e dei sistemi
operativi. Una soluzione consiste nell'usare tabelle di layout di pagine
con celle di testo non superiori a 365 pixel di larghezza.
Gli allineamenti
Le opzioni di allineamento disponibili sul web sono quelle di allineamento
standard:
Giustificazione a destra
Giustificazione al centro
Giustificazione a sinistra
Testo giustificato
La giustificazione a sinistra è l'opzione più leggibile
per le pagine web, perché il margine sinistro è uniforme e prevedibile e
quello destro è irregolare. L'irregolarità del margine destro aggiunge
diversità e interesse alla pagina, senza interferire con la leggibilità.
Immagini come testo
Se desideri utilizzare un carattere non standard per un
titolo o un capolettera, il codice HTML non è di alcuna utilità. La
soluzione consiste nel creare un'immagine GIF del tuo testo o lettera in
un programma di gestione delle immagini e semplicemente inserirla come
immagine nel tuo documento.
Verifica però che il colore di sfondo del testo sia lo stesso della
pagina. Non ricorrere troppo spesso a questo metodo perchè, come ormai
avrai ben capito, un file con immagini è di dimensioni superiori rispetto
ad un file di testo e che di conseguenza aumenta il tempo necessario allo
scaricamento della pagina. Questo trucco, inoltre impedisce ai motori di
ricerca di leggere i tuoi testi.