Scrivere sul web: aspetti visivi

60 %
40 %
Information about Scrivere sul web: aspetti visivi
Design

Published on May 20, 2009

Author: mauriziob

Source: slideshare.net

Formattazione visiva per i testi

Font Dimensione e colori Interlinea Evidenziature Margini Link Liste

Font

Dimensione e colori

Interlinea

Evidenziature

Margini

Link

Liste

Font Font graziati (serif) Font bastoni (sans-serif) Font proporzionali Font monospaziati

Font graziati (serif)

Font bastoni (sans-serif)

Font proporzionali

Font monospaziati

Font graziati G Grazie

G

Usati per una maggior eleganza e morbidezza Si credeva che le grazie accompagnassero dolcemente l’occhio da una lettera all’altra Nei giornali e nei libri usati per il corpo del testo

Usati per una maggior eleganza e morbidezza

Si credeva che le grazie accompagnassero dolcemente l’occhio da una lettera all’altra

Nei giornali e nei libri usati per il corpo del testo

Font graziati Times Century Schoolbook Georgia

Times

Century Schoolbook

Georgia

Font bastoni (o senza grazie) T

T

Font bastoni Meno leggibili, ma più perentori Aumentando la dimensione, la leggibilità non è un problema Venivano usati spesso nei titoli dei giornali

Meno leggibili, ma più perentori

Aumentando la dimensione, la leggibilità non è un problema

Venivano usati spesso nei titoli dei giornali

Font bastoni Arial Trebuchet Lucida sans Verdana Futura Impact

Arial

Trebuchet

Lucida sans

Verdana

Futura

Impact

Font proporzionali La distanza fra le lettere dipende dalla forma della lettera Ogni lettera occupa un ingombro differente

La distanza fra le lettere dipende dalla forma della lettera

Ogni lettera occupa un ingombro differente

Font monospaziati Ogni lettera occupa la medesima dimensione, e la distanza fra gli ingombri delle lettere è identica Piccolo esempio 1230

Ogni lettera occupa la medesima dimensione, e la distanza fra gli ingombri delle lettere è identica

Piccolo esempio 1230

Font monospaziati Ogni lettera occupa la medesima dimensione, e la distanza fra gli ingombri delle lettere è identica

Ogni lettera occupa la medesima dimensione, e la distanza fra gli ingombri delle lettere è identica

Font monospaziati Nascono con la macchina da scrivere Sono usati non per i testi, ma per il codice di programmazione o html Non a caso è il font di default di Explorer per mostrare il codice

Nascono con la macchina da scrivere

Sono usati non per i testi, ma per il codice di programmazione o html

Non a caso è il font di default di Explorer per mostrare il codice

Font monospaziati Courier Monaco OCR

Courier

Monaco

OCR

Aria di famiglia Il nome del font-family identifica famiglie di carattere che condividano le metriche di fondo, le forme, le linee Esistono molte varianti di alcune di esse: Futura è una di quelle che ha il maggior numero di versioni Ogni tipo di carattere di una famiglia ha le metriche per calcolare italico, grassetto, sottolineato

Il nome del font-family identifica famiglie di carattere che condividano le metriche di fondo, le forme, le linee

Esistono molte varianti di alcune di esse: Futura è una di quelle che ha il maggior numero di versioni

Ogni tipo di carattere di una famiglia ha le metriche per calcolare italico, grassetto, sottolineato

Questione di risoluzione A causa della bassa risoluzione del monitor i font pensati per la stampa non si vedono bene, sono sgranati Per sopperire a questa caratteristica alcuni programmi usano una tecnica chiamata anti-aliasing

A causa della bassa risoluzione del monitor i font pensati per la stampa non si vedono bene, sono sgranati

Per sopperire a questa caratteristica alcuni programmi usano una tecnica chiamata anti-aliasing

Anti-alias

Antialiasing in piccolo

I browser e gli screen font Explorer di default non applica antialiasing, dunque il testo è sgranato Per risolvere questi problemi, Microsoft commissiona a Mattew Carter un set di Screen-font da usare sui propri sistemi operativi

Explorer di default non applica antialiasing, dunque il testo è sgranato

Per risolvere questi problemi, Microsoft commissiona a Mattew Carter un set di Screen-font da usare sui propri sistemi operativi

Verdana e Georgia 1994: Verdana In seguito: Georgia Lettere di forma chiara anche a piccole dimensioni Sfruttano la matrice di pixel usando linee verticali, orizzontali e inclinate a 45, dove non c’è bisogno di correzioni Spaziatura regolare Studio del grassetto Esistono per le famiglie sans-serif e serif

1994: Verdana

In seguito: Georgia

Lettere di forma chiara anche a piccole dimensioni

Sfruttano la matrice di pixel usando linee verticali, orizzontali e inclinate a 45, dove non c’è bisogno di correzioni

Spaziatura regolare

Studio del grassetto

Esistono per le famiglie sans-serif e serif

Browser e font In seguito ne sono stati ideati altri, come il Trebuchet e il Lucida, il Tahoma I browser quando vengono installati, installano automaticamente sul sistema molti font Per questa ragione, esiste una serie di famiglie di font che è più probabile che gli utenti abbiano

In seguito ne sono stati ideati altri, come il Trebuchet e il Lucida, il Tahoma

I browser quando vengono installati, installano automaticamente sul sistema molti font

Per questa ragione, esiste una serie di famiglie di font che è più probabile che gli utenti abbiano

Font diffusi Arial Verdana Times New Roman Courier Georgia Trebuchet Lucida

Arial

Verdana

Times New Roman

Courier

Georgia

Trebuchet

Lucida

Di fatto Si usano Verdana, Arial, Times New Roman, Georgia, Trebuchet, Courier

Si usano Verdana, Arial, Times New Roman, Georgia, Trebuchet, Courier

Dimensione Bernard: Sopra i 10 px non c’è significativa differenza di accuratezza di lettura fra screen font e font tradizionali Times e Arial: lettura più veloce rispetto a Courier e Georgia Leggibilità percepita: Courier, Arial, Georgia (in parziale contraddizione con i dati reali)

Bernard: Sopra i 10 px non c’è significativa differenza di accuratezza di lettura fra screen font e font tradizionali

Times e Arial: lettura più veloce rispetto a Courier e Georgia

Leggibilità percepita: Courier, Arial, Georgia (in parziale contraddizione con i dati reali)

Piacevolezza Georgia meglio di Arial e Courier Times più piacevole di Courier Ma… Carattere preferito: Verdana Verdana ha le prestazioni mediamente buone, anche se non eccellenti, in tutte le misure

Georgia meglio di Arial e Courier

Times più piacevole di Courier

Ma…

Carattere preferito: Verdana

Verdana ha le prestazioni mediamente buone, anche se non eccellenti, in tutte le misure

Coerenza Usare un solo tipo di carattere per i testi: Verdana, o Arial, o Times, o Georgia Usare un solo tipo di carattere per i titoli A volte si tende a invertire la convenzione cartacea: Verdana per i testi e Georgia per i titoli! Coerenza anche nelle dimensioni

Usare un solo tipo di carattere per i testi: Verdana, o Arial, o Times, o Georgia

Usare un solo tipo di carattere per i titoli

A volte si tende a invertire la convenzione cartacea: Verdana per i testi e Georgia per i titoli!

Coerenza anche nelle dimensioni

Colori Nero su bianco L’uso del grigio crea seri problemi di leggibilità, affatica Nero su giallo

Nero su bianco

L’uso del grigio crea seri problemi di leggibilità, affatica

Nero su giallo

Interlinea L’interlinea di circa 1.5 o leggermente superiore aumenta la leggibilità sulla carta Purtroppo questo non pare confermato sul web L’interlinea aumentata è scomoda per gli ipovedenti

L’interlinea di circa 1.5 o leggermente superiore aumenta la leggibilità sulla carta

Purtroppo questo non pare confermato sul web

L’interlinea aumentata è scomoda per gli ipovedenti

Evidenziature Usare il grassetto Non il corsivo Non altri colori

Usare il grassetto

Non il corsivo

Non altri colori

A proposito del corsivo Inizialmente, con una cattiva resa a monitor, il corsivo rendeva le lettere ancora più seghettate I sistemi operativi più recenti hanno fatto passi avanti nella resa dei caratteri: ora il corsivo, se a caratteri abbastanza grandi e per piccole porzioni di testo, può risultare comunque leggibile

Inizialmente, con una cattiva resa a monitor, il corsivo rendeva le lettere ancora più seghettate

I sistemi operativi più recenti hanno fatto passi avanti nella resa dei caratteri: ora il corsivo, se a caratteri abbastanza grandi e per piccole porzioni di testo, può risultare comunque leggibile

Margini I margini a destra e a sinistra aumentano la velocità di lettura e persino la comprensione! Spezzare i margini tra i paragrafi

I margini a destra e a sinistra aumentano la velocità di lettura e persino la comprensione!

Spezzare i margini tra i paragrafi

Link No ai link dello stesso colore del testo! I link sottolineati sono meglio, lontani dai menu Link esterni segnalati come tali Lo stato hover Lo stato active Lo stato visited

No ai link dello stesso colore del testo!

I link sottolineati sono meglio, lontani dai menu

Link esterni segnalati come tali

Lo stato hover

Lo stato active

Lo stato visited

Link visitati Uno degli indizi più importanti per gli utenti è il cambio di colore per i link già visitati A questo è correlata una migliore usabilità (una forma di feedback)

Uno degli indizi più importanti per gli utenti è il cambio di colore per i link già visitati

A questo è correlata una migliore usabilità (una forma di feedback)

Tipi di layout Fisso Fluido Puro Misto Elastico

Fisso

Fluido

Puro

Misto

Elastico

Layout fisso Il layout fisso ha le dimensioni dell’area utile definite in pixel, e non modificabili, a qualunque risoluzione del monitor Consente di impaginare anche le immagini in maniera precisa, perché gli allineamenti vengono rispettati I caratteri però hanno comunque una resa leggermente differente su diversi browser e sistemi operativi Può essere centrato o allineato a sinistra (raramente a destra)

Il layout fisso ha le dimensioni dell’area utile definite in pixel, e non modificabili, a qualunque risoluzione del monitor

Consente di impaginare anche le immagini in maniera precisa, perché gli allineamenti vengono rispettati

I caratteri però hanno comunque una resa leggermente differente su diversi browser e sistemi operativi

Può essere centrato o allineato a sinistra (raramente a destra)

Layout fluido Puro: le dimensioni orizzontali delle aree (colonne) sono definite in percentuale Si adattano a tutte le dimensioni della finestra A dimensioni piccole, però, alcune parole indivisibili sforano A dimensioni grandi, le righe di testo sono molto lunghe

Puro: le dimensioni orizzontali delle aree (colonne) sono definite in percentuale

Si adattano a tutte le dimensioni della finestra

A dimensioni piccole, però, alcune parole indivisibili sforano

A dimensioni grandi, le righe di testo sono molto lunghe

Layout fluido misto Solo una colonna è libera di variare, mentre l’altra o le altre sono bloccate in pixel Consente di impaginare meglio alcune aree (menu, immagini) Riga comunque lunga a dimensioni grandi

Solo una colonna è libera di variare, mentre l’altra o le altre sono bloccate in pixel

Consente di impaginare meglio alcune aree (menu, immagini)

Riga comunque lunga a dimensioni grandi

Layout elastico Le dimensioni sono proporzionali, e in più, dipendono dalla grandezza del testo! Un testo più grande genera impaginati più grandi Il problema è che l’impaginato facilmente diventa troppo grande e fuoriesce dall’area visibile … o diventa troppo piccolo ed è illeggibile Difficile impaginare i form!

Le dimensioni sono proporzionali, e in più, dipendono dalla grandezza del testo!

Un testo più grande genera impaginati più grandi

Il problema è che l’impaginato facilmente diventa troppo grande e fuoriesce dall’area visibile

… o diventa troppo piccolo ed è illeggibile

Difficile impaginare i form!

Comparazione Fluido Fisso a sinistra Fisso Centrato Nessuna differenza in prestazione, ma i soggetti tendono a preferire il fluido per leggere e trovare informazioni. A sinistra è il meno apprezzato. (Bernard e Larsen, 2001)

Fluido

Fisso a sinistra

Fisso Centrato

Nessuna differenza in prestazione, ma i soggetti tendono a preferire il fluido per leggere e trovare informazioni. A sinistra è il meno apprezzato.

(Bernard e Larsen, 2001)

Riepilogo Testi più piccoli a 10 px (ma meglio di più) Testi normali 12-14 px (tendenza al rialzo per effetto di aumento età e risoluzioni monitor) Colori molto contrastati Titoli e link distinti Parole chiave in grassetto Margini laterali abbondanti (o layout centrato) Font standard e sicuri (o graceful degradation nei CSS)

Testi più piccoli a 10 px (ma meglio di più)

Testi normali 12-14 px (tendenza al rialzo per effetto di aumento età e risoluzioni monitor)

Colori molto contrastati

Titoli e link distinti

Parole chiave in grassetto

Margini laterali abbondanti (o layout centrato)

Font standard e sicuri (o graceful degradation nei CSS)

Fine

Add a comment

Related presentations

My Music Magazine Pitch

My Music Magazine Pitch

October 30, 2014

music mag pitch

Questionaire charts

Questionaire charts

November 4, 2014

bk

Final research

Final research

November 5, 2014

final research

Cersaie 2014

Cersaie 2014

October 30, 2014

allestimento in cartone per il Cersaie 2014 alberi in cartone scultura in cartone

Quarta turma do workshop de Infografia, ministrado por Beatriz Blanco e Marcos Sin...

Related pages

Scrivere sul web: aspetti visivi - Design - DOCSLIDE.IT

Editoria Digitale: scrivere e raccontare sul web - Digital for Job Un incontro a due voci tra Claudia del Giudice, editor della casa editrice nativa ...
Read more

4.2 - Scrivere per il web - Jimdo Academy

Bisogna infatti tenere conto che la lettura sul web è ... Scrivere per il web significa scrivere contenuti ... Come scrivere per il web: aspetti visivi. 1.
Read more

Scrivere per il web | Usabile.it

Home » Articoli » Scrivere per il web. 27/12/2000. ... Sul web vi sono però ulteriori ... eviterete di creare inconvenienti visivi a quegli utenti che ...
Read more

Scrivere per il web - Il mestiere di scrivere

Come scrivere sul web ... Se siete animali visivi, ... Jakob Nielsen ci allerta puntualmente ogni quindici giorni sui vari aspetti dell'usabilità web.
Read more

Scrivere Sul Blog - Business - docslide.it

Scrivere sul web: aspetti visivi 1. Formattazione visiva per i testi 2. ... Web Writing: 10 Regole per Scrivere sul Web VEDI I VIDEO DEL CORSO: ...
Read more

Come scrivere testi per il web e essere visibili su Google

Uno degli aspetti principali su come scrivere testi per il web è ... hanno punti di ancoraggio visivi in ... dei copywriter sul web e dei ...
Read more

Aspetti visivi della scrittura su web | Scrittura creativa

Ottima presentazione sull'importanza della scrittura usabile sul web da un punto di vista visivo di Maurizio Boscarol di Usabile.it.
Read more

La scelta dei colori per il sito - sito-perfetto.it

... se il sito ci ha impressionato negativamente tenderemo inconsapevolmente a notare soprattutto gli aspetti ... sul web è comunque molto ... visivi) è ...
Read more