Tag: Tipografia

  • Web Design: dizionario per principianti

    Ecco una piccola guida per Non-Designer ai termini più diffusi ed usati nel Web Design, perché relazionarsi con un grafico per la prima volta potrebbe essere un po’ stressante, dal momento che inizierete a sentire termini come layout, mockup e responsivo…
    Niente paura… proprio per questo abbiamo pensato ad un piccolo dizionario con i termini essenziali e più usati che vi aiuteranno a comunicare al meglio con il vostro Web Designer!

    ALLINEAMENTO

    Iniziamo con un termine facile: lo avrete sicuramente già sentito ed usato in merito alla formattazione di un testo: allineato a sinistra, destra, giustificato o centrato.
    Bene, sappiate che allineamento può esse applicato a qualsiasi elemento che compone una pagina web!

    BRANDING E BRAND IDENTITY

    Molte persone credono che il termine Branding sia una sorta di sinonimo di logo. Invece indica una vasta gamma di opzioni, che vanno dal sito web ai biglietti da visita, dalla carta intestata a qualsiasi altro gadget usiate per pubblicizzare la vostra attività.
    Il Branding presenta il vostro business ai clienti e vi rende individuabili al primo colpo d’occhio. E’ importantissimo che il vostro Web Designer comprenda la vostra attività e lo spirito che volete comunicare, per creare una Brand Identity forte e presente in ogni aspetto della vostra comunicazione verso il mondo.

    COLOR SCHEME (SCHEMA COLORE)

    Un Color Scheme è una selezione di colori che vengono usati insieme. I colori di uno schema devono essere armonici ed attraenti quando vengono accostati.
    Anche se non esiste una regola predefinita su quanti colori è possibile usare, è abbastanza facile comprendere che più colori si vuole impiegare, più difficile sarà dare coesione e coerenza al design.
    Per questo normalmente si scelgono dai 3 ai 5 colori al massimo, che possono essere accostati ai neutri (bianco, nero e grigio). Una volta scelto un Color Scheme questo verrà impiegato e mantenuto in ogni aspetto della Brand Identity.

    COPY O COPYWRITING

    Questi termini indicato tutti i testi che verranno inseriti nel vostro sito ed include non solo i testi principali, ma anche i titoli, le voci di menù, le didascalie, ecc.
    Se vi interessa capire quanto è importante un buon Copywring all’interno del Web Design, vi consigliamo di leggere l’articolo che tratta proprio questo argomento!

    HEADER, BODY E FOOTER

    Header letteralmente significa “intestazione” ed è la sezione iniziale di una pagina web, la prima ad essere visualizzata dall’utente. Di solito contiene gli elementi distintivi del sito stesso, come il logo, il motto aziendale, elementi grafici, ma anche il menu di navigazione.
    Body ovvero “corpo”, è la sezione centrale, o corpo appunto, delle pagine web. Questa sezione racchiude tutti i contenuti, come il testo, le immagini e i collegamenti che costituiscono la parte visualizzata dal browser.
    Footer è termine inglese usato per “piè di pagina”, è la sezione della pagina web posizionata sotto il corpo (body), ovvero la sezione che chiude la pagina web. In genere nel footer vengono riassunti i dati e le informazioni più importanti, come ad esempio gli indirizzi, i recapiti, numero di partita iva, copyright, ternimi e condizioni d’uso, normative su privacy e cookie, ecc.
    Generalmente l’Header e il Footer sono uguali ed in comune a tutte le pagine che compongono il sito.

    CAROUSEL E SLIDER

    Uno Slider è una sezione orizzontale che contiene immagini scorrevoli. É un modulo dal forte impatto visivo ed estetico, ed è ottimo per presentare il sito stesso, oltre ad essere un efficace metodo di Web Design per catturare l’attenzione del visitatore attraverso la visualizzazione di immagini impattanti che scorrono automaticamente.
    Il Carousel invece è una sezione orizzontale che contiene a sua volta diversi box che scorrono a rotazione in maniera ciclica. Si differenzia dallo Slider proprio per la possibilità di mostrare simultaneamente più elementi. Viene impiegato, ad esempio, per visualizzare varie thumbnail (miniature) di immagini, loghi di clienti e testimonial o anteprime di articoli e news.

    LAYOUT

    Il Layout di un sito web è la composizione di tutti gli elementi grafici visualizzati all’interno di una pagina. Questo include la posizione del logo, del menù di navigazione, il testo e le immagini.
    Il Layout è paragonabile alle fondamenta di un sito ed in generale del web design, su cui vengono costruite tutte le pagine e serve a dare coerenza grafica e a guidare l’utente nella navigazione.

    LOREM IPSUM e SEGNAPOSTO

    Non spaventatevi se il vostro grafico vi mostra un lavoro con alcuni testi in latino, è solo un Lorem Ipsum! Si tratta di testi falsi e di riempimento che i designer utilizzano per mostrare i diversi font oppure per riempire una sezione di testo nel caso un cui il Copy non sia ancora pronto.
    I Segnaposto invece sono immagini non definitive che vengono inserite per stabilire le dimensioni e impostare la struttura delle pagine.

    MOCKUP

    Si tratta di una rappresentazione non funzionante delle pagine di un sito web. I Mockup vengono normalmente disegnati in Photoshop e servono a mostrare quale sarà la grafica di un sito prima di iniziarne lo sviluppo.
    Un mockup statico consente di modificare in modo abbastanza semplice e veloce il font, i colori e la struttura, in modo da risparmiare tempo, energie e… denaro!

    RESPONSIVE DESIGN O DESIGN RESPONSIVO

    Il Responsive Design è nato dopo l’avvento e la diffusione di smartphone e tablet, per risolvere i problemi di visualizzazione dei siti web su questi dipositivi.
    Tradizionalmente un sito web viene studiato e creato per la navigazione da computer desktop, ed il Design Responsivo consente di ottimizzare la visualizzazione delle pagine sui diversi dispositivi, con monitor delle più disparate misure e risoluzioni, senza dover creare dei veri e propri siti appositi.
    Leggi questo post e scopri se il tuo sito web è responsivo o se è arrivato il momento di rinnovarlo!

    CONTACT FORM

    Significa letteralmente “modulo di contatto”, non è altro che il modulo presente in moltissimi siti per inviare un messaggio al proprietario o l’amministratore del sito web compilando direttamente dal browser alcuni campi prestabiliti.

    GALLERY

    Ovvero la “galleria”, è una sezione di un sito web o una pagina appositamente dedicata ad accogliere una galleria fotografica, oppure (più raramente) dei video.
    Se ti interessa capire come inserire i video in modo ottimale nel tuo sito WordPress, qui trovi tutte le informazioni che ti servono.

    SITE MAP E MENU

    La Site Map, cioè la Mappa del Sito è l’elenco gerarchico delle pagine web che compongono il vostro sito. Generalmente è la base su cui viene costruito il menu di navigazione che consente agli utenti di trovare in modo intuitivo i contenuti.
    Il Menu si trova normalmente all’interno dell’Header e rappresenta la lista delle pagine o delle sezioni di cui è composto un sito web; posizionando e/o cliccando con il cursore del mouse su una voce di Menu è possibile accedere al contenuto della pagina selezionata oppure a un sottomenu che mostra nuove opzioni di scelta.

    BANNER

    É una piccola area, in genere rettangolare o quadrata, che contiene solitamente un’immagine con link pubblicitario. L’utilizzo dei banner è una delle forme pubblicitarie più diffuse su internet.

    AVATAR

    Si tratta di quella che i social network hanno rinominato “immagine di profilo”. L’Avatar è la foto che viene scelta solitamente dai blogger come immagine rappresentativa e identificativa dell’autore di un articolo. Usata soprattutto nei magazine on-line o nei siti che raccolgono contenuti di diversi autori.

     

    Ecco qui, speriamo che questo piccolo vademecum sulla terminologia del Web Design per principianti vi possa aiutare a comunicare al meglio con i professionisti del settore.
    E nel caso ve lo siate perso, vi invitiamo a leggete anche il precedente articolo “WordPress dizionario per principianti.”

  • Tipografia #3: pesi e stili dei FONT

    Tipografia #3: pesi e stili dei FONT

    Eccoci con un nuovo articolo della rubrica sulla Tipografia. È arrivato il momento di addentrarci nei tecnicismi di questo argomento: scopriamo quindi cosa sono pesi e stili dei vostri font preferiti, e qualche altra curiosità!

    Proseguiamo questa rubrica con un approfondimento su alcune caratteristiche che possono influenzare i font: pesi e stili, se scelti nel modo giusto possono aiutare a migliorare la leggibilità di un testo.

    Point Size o Dimensione

    Il Point Size è un valore numerico che descrive in modo relativo la dimensione dei caratteri. Per esempio, se un font è “Times New Roman 12”, il numero “12” indica il Point Size.
    In tutti gli editor di testo è possibile modificare le dimensioni dei caratteri di un font. Scegliere il Point Size corretto quando si sviluppano le pagine di un sito web, è importante per incrementarne la leggibilità.
    Esempi di Point size o Dimensione

    Weight o Peso

    Il Peso di un font si riferisce allo spessore di un testo. Un font molto sottile viene definito “leggero” (light o thin), mentre un font più cicciotto è chiamato “grassetto” (bold) oppure “ispessito/pesante” (heavy).
    L’impiego di font con diversi pesi all’interno di un testo, ad esempio per distinguere i titoli dal corpo, può aiutare a rendere il copywriting più semplice di leggere.
    Esempi di Weight o Peso

    Italic o Corsivo, Roman o Tondo e Bold o Grassetto

    Roman (o tondo) descrive un font nella sua apparenza “normale”, ovvero come è stato ideato all’origine. Normalmente è la forma idealmente più leggibile e quindi quella più impiegata per i testi principali.
    Italic (o corsivo) è un effetto inclinato che viene dato ai glifi per dare l’idea di una scrittura (appunto) corsiva. Di solito il corsivo viene utilizzato per evidenziare delle citazioni da altre fonti.
    Bold (o grassetto) identifica l’ispessimento di un font Roman. Così come il corsivo, il grassetto viene impiegato per evidenziare alcuni passaggi o parole di un testo.
    Esempi di Italic o Corsivo, Roman o Tondo, Bold o Grassetto

    Baseline o Linea di Base

    La Baseline è una linea immaginaria su cui posano le lettere del font.
    Esempio di Baseline o Linea di Base

    Capline

    Capline identifica la linea immaginaria che identifica il limite superiore delle lettere maiuscole (capital letter in inglese)
    Esempio di Capline
    Con il termine Midline si intende la linea immaginaria che determina l’altezza massima delle lettere minuscole (escludendo ascendenti e discendenti).
    Esempio di Midline o Linea Mediana
    Tutte le linee – Baseline, Capline e Midline – servono a determinare le proporzioni per le ascendenti e le discendenti dei glifi di un font.

    x-height o Altezza della x

    La x-height è (letteralmente) l’altezza della “x”. Questa misure serve per determinare se un font è alto o basso.
    Esempio di x-height o Altezza della x
    Eccoci giunti alla fine di questa “terza puntata” che speriamo vi abbia aiutato a capire pesi e stili che possono influenzare e modificare i font!

  • Tipografia #2: i Font

    Tipografia #2: i Font

    Leggibilità è il mantra di web designer e sviluppatori di siti internet. Perché un glifo non deve essere solo bello, ma anche chiaro e leggibile.
    Quindi è davvero importante conoscere cosa compone un font e quali possono essere le differenze che li distinguono.

    Come promesso, dopo il primo articolo di questa Rubrica, è arrivato il momento di proseguire l’approfondimento dell’argomento Tipografia.
    Prima di iniziare ad approfondire l’argomento “Font”, dobbiamo fare una considerazione importantissima: il 75% delle informazioni di lettura vengono acquisite tramite la visione della parte centrale delle lettere.
    Questo significa che le parti che compongono i glifi devono rispettare alcune proporzioni per non inficiare la leggibilità del nostro testo.

    Le Proporzioni

    Tutti i glifi poggiano su una Baseline (o linea base), e hanno come riferimento una Midline (o linea mediana) che viene calcolata sull’altezza della “x” minuscola (ovvero la x-height). Però non tutti i caratteri rientrano completamente tra queste due guide: esistono infatti lettere che si allungano verso l’alto o verso il basso e presentano dei bracci chiamati ascendentidiscendenti.
    Tornando alla questione della leggibilità, ci è chiaro ora perché è molto importante che la parte centrale delle lettere non sia troppo piccola rispetto alle ascendenti e alle discendenti, altrimenti il nostro testo potrebbe essere non solo sproporzionato e “brutto” ma anche troppo difficoltoso la leggere.
    Proporzioni

    Font

    Conosciuto anche come “carattere tipografico”, Font è un termine ampio che comprende lo stile, la grandezza ed il peso di un testo. Font molto conosciuti sono ad esempio “Arial” e “Times New Roman”.
    La scelta del Font influenza il modo in cui l’utente fruisce del nostro sito web. Differenti Font hanno differenti personalità, che possono produrre un effetto diverso, anche in modo molto sottile, sulla percezione del messaggio da parte del lettore.
    Esempio di Font

    Serif (o Graziato)

    Un “Serif” è una piccola appendice che è presente al termine delle linee di un carattere. I Font che presentano questa particolarità vengono appunto chiamati Serif Font (o Graziati in italiano).
    Questo tipo di font è stato tradizionalmente impiegato nel corpo del testo per le stampe di libri e giornali ed era il carattere usato nelle macchine da scrivere.
    Quindi usare un Graziato per i testi del nostro sito potrebbe essere una buona idea se vogliamo richiamare lo stile vintage di una pagina stampata.
    Serif o Graziato - Esempio: Times New Roman

    Sans-serif (o Bastoni)

    Sans-Serif è un carattere “senza Serif”, ovvero lettere che terminano in modo preciso e netto.
    La semplicità dei font Bastoni cattura l’attenzione del lettore rendendoli ideali per enfatizzare i titoli.
    Il contrasto tra i Bastoni e i Graziati è il principio fondamentale per cui utilizzarli insieme, nelle diverse parti che compongono la nostra pagina, ci aiuta a guidare l’utente nella lettura di un testo.
    Sans-serif o Bastoni - Esempio: Arial

    Script (o Calligrafici)

    Questi tipi di font simulano la scrittura a mano libera.
    Sono tornati molto di moda negli anni scorsi, con il proliferare dei blog personali, quasi “casalinghi”, perché riescono a trasmettere la sensazione di qualcosa di intimo, come erano le lettere tradizionali scritte a mano che si spedivano una volta.
    Vengono diffusamente utilizzati per i loghi ed titoli di siti dedicati al mondo femminile.
    Script o Calligrafico - Esempio: Comforter Brush

    Originali

    Si tratta di font con caratteri molto particolari, che hanno un uso ristretto se non addirittura mirato.
    Anche se molto belli e “scenografici”, risultano quasi sempre poco leggibili.
    Originali - Esempio: Zengo
    Eccoci giunti alla fine di questa “seconda puntata”, ma arriverà presto un nuovo aggiornamento di questa rubrica, perché ci sono ancora tantissime cose da scoprire ed imparare sulla Tipografia!

  • Tipografia #1: piccole basi per il Webdesign

    Tipografia #1: piccole basi per il Webdesign

    Tipografia nella concezione moderna significa “la tecnica e l’attività del comporre e stampare, o anche l’insieme delle arti grafiche“. Il linguaggio verbale è rappresentato tramite le lettere, e le lettere vengono accostate e impaginate per creare composizioni e comunicare.

    La progettazione di un elemento abbastanza complesso come la redazione di un testo, non coinvolge solo il lato puramente compositivo e stilistico dello “scrivere“, ma anche quello estetico/funzionale di fruizione di uno scritto e comunicativo nella chiarezza del messaggio.
    Questa nuova Rubrica vuole essere un piccolo vademecum in pillole, sui termini tipografici più importanti e più utilizzati, o comunque “quelli da sapere“… per riuscire a capire come scegliere un font, cosa lo compone e come poterlo gestire al meglio per fare un Copywriting non solo ottimizzato dal punto di vista dei contenuti, ma anche della tipografia!

    Glifo

    Il Glifo è la più piccola particella che compone un font e può avere qualunque significato. Glifi possono essere le lettere, i numeri, la punteggiatura e qualsiasi altro carattere.
    Se dobbiamo scegliere un font per un sito web o qualsiasi altra produzione, è importante valutare se questo dovrà essere prodotto in diverse lingue. Questo perché occorre controllare che il carattere tipografico scelto includa tutti i glifi necessari (caratteri speciali, accenti particolari, ecc).
    Esempi di Glifo

    Kerning o Crenatura

    Il Kerning o Crenatura indica la riduzione dello spazio in eccesso fra coppie specifiche di caratteri, con lo scopo di diminuire gli spazi bianchi antiestetici e dare un aspetto più omogeneo al testo e varia in funzione delle diverse parti che compongono il carattere.
    Il Kerning è particolarmente importante nel Web Design perché può sottilmente influenzare il modo in cui le persone percepiscono un testo. Se non viene usato il Kerning, le lettere di un testo potrebbero apparire o troppo appiccicate o troppo distanti, quindi, quando dobbiamo scegliere un font sarebbe meglio provare a scrivere un piccolo paragrafo per verificarne la leggibilità.
    Esempi di Kerning o Crenatura

    Tracking o Spaziatura

    Il Tracking o Spaziatura è l’aggiustamento complessivo dello spazio tra le lettere di un testo.
    Si differenzia dal Kerning in quanto si tratta di una regolazione uniforme della spaziatura dei caratteri, piuttosto che una rettifica delle distanze tra i singoli caratteri.
    Per esempio è utilizzato per allargare o comprimere un testo perché possa occupare uniformemente lo spazio di un pulsante.
    Esempio di Tracking o Avvicinamento
    Se volete approfondire l’argomento Kerning/Traking potete trovare maggiori informazioni in questa piccola guida.

    Leading o Interlinea

    Il Leading o Interlinea, è lo spazio verticale che separa due righe di testo.
    La corretta distanza dell’interlinea aiuta gli occhi del lettore a leggere in modo scorrevole, aumentandone la leggibilità. Altrimenti, un’interlinea sproporzionata potrebbe dare l’effetto di un testo sgraziato se le righe saranno troppo vicine, oppure incoerente e difficile da seguire se troppo lontane.
    Esempio di Leading o Interlinea
    Speriamo che questo primo articolo possa aver chiarito qualche dubbio e approfondito certe definizioni.
    Il mondo della Tipografia è non solo estremamente vasto, ma anche molto interessante, dato che ha radici lontane nel tempo… quindi aspettatevi presto nuovi approfondimenti si questo affascinante argomento!