Esistono molti tipi differenti di layout nel web, ma uno dei più utilizzati e funzionali è sicuramente il layout fisso e centrato. Ottenerlo con CSS non è difficile, ma bisogna stare attenti alla larghezza da dare al contenitore centrale, in modo da non creare scroll orrizzontali per utenti con risoluzioni minori, in quanto risultano (almeno personalmente) molto fastidiosi per la navigazione. Read more →
Un CMS (content management system) è un software che viene installato sui server web per realizzare siti efficaci completi e personalizzabili avendo conoscenze scarse se non nulle di programmazione web (quindi html, CSS, javascript, PHP e compagnia bella). Read more →
La combinazione dei font può essere una vera e propria sfida. Selezionare due o più tipi di carattere che funzionano bene è un conto- selezionare due caratteri insieme per raggiungere i propri obiettivi tipografici, invece, può provocare un vero e proprio mal di testa. Per evitare di pendere un’aspirina, è consigliabile leggere questa guida sulla corretta combinazione dei font.
Le regole e le convenzioni tipografiche sono tante, soprattutto sul web. L’unico problema è che si rischia di dover far fronte a opinioni contrastanti tra di loro. Vediamo, quindi, se riusciamo a chiarire un paio di cose.
Ecco una rapida distribuzione di ciò che tratteremo in questa guida:
La cosa principale da fare è tenere a mente tutti gli elementi essenziali. Quando si stanno selezionando più tipi di carattere per combinarli insieme è fondamentale mantenere unità e varietà.
Bisogna sempre tenere a mente l’effetto complessivo che si sta cercando di raggiungere. Ogni tipo di carattere, come le persone, ha una personalità. Proprio per questo, le personalità dei font , proprio come quelli delle persone, a volte possono scontrarsi. Pensate ai vostri font come degli ospiti seduti ai tavoli durante un ricevimento di nozze oppure uno spettacolo in cui personalità troppo forti possono rendere l’intera atmosfera molto imbarazzante come, ad esempio, una puntata del Grande Fratello.
E’ necessario assicurarsi che ci sia qualche carisma nel gruppo perché se si mettono insieme otto persone con poco da dire, i discorsi saranno superficiali e poco sorprendenti…
Non è più in giro, ma la Fusion Annunci 2011 malati di bundle del sito nella mia mente come un grande esempio di successo dello stack-em-alto uso dei font.
Non ci sono regole per dire se si dovrebbe o non si dovrebbe usare un numero specifico di caratteri su un layout di pagina. Usare più caratteri insieme può essere difficile, raggiungere l’armonia è impegnativo, ma se lo si sa gestire, il risultato può essere decorativo e suggestivo. Se si utilizzano meno caratteri, il vostro compito è più semplice. Provate a fare il meglio in entrambi i casi, selezionando font con molteplici varianti e pesi. In questo modo è possibile usufruire di una vasta gamma di stili, con la certezza che si completeranno molto bene a vicenda.
Ci sono un sacco di servizi gratuiti attraverso i quali è possibile usufruire di diversi font: i font google , fonts.com , fontsquirrel del generatore di kit dicarattere, ma senza sconto, pagando i singoli font se il progetto che merita. Il costo di una licenza per un singolo dominio può variare, ma ci sono molti vantaggi.
Qualità. La cura e l’attenzione presenti nella produzione di ogni tipo di carattere commerciale è di solito evidente in fatto di qualità. Con questo, non si vuole suggerire ai designer di non fare affidamento ai caratteri gratis ma si fa riferimento all’evidente differenza qualitativa. E ‘una notevole differenza nei dettagli più fini, la linea di spessore, le forme, lo spazio bianco e la crenatura (spaziatura tra i caratteri).
Confronta questi due font simili ..
La crenatura eseguita con il Museo è superiore. Senza un po’ di ritocchi, la crenatura in Quicksand è imperfetta (fuoco sulla ‘o ‘e la ‘i’ per esempio), e armeggiare con la crenatura sul web non è estremamente sicuro. Ci sono strumenti, kern.js per esempio, che consentono di specificare la crenatura per ogni singolo carattere di base, ma per grandi corpi di testo è impossibile.
“Un grosso problema, la differenza è appena percettibile!” Può succedere, ma il difetto è nei dettagli.
Originalità. Un altro vantaggio è la possibilità di rendere il lavoro sempre originale. Dopo aver pagato per ogni tipo di carattere, c’è una possibilità maggiore che il progetto manterrà un elemento di unicità.
Comunità. E’ consigliabile fare affidamento sul commercio sano per continuare il loro mestiere. In ogni caso, stiamo guardando un costo che può essere preso in considerazione nel progetto e passato al client.
Quando si selezionano i font è importante considerare la natura del layout che si sta trattando. Ci sono diversi titoli, sottotitoli? In questo caso, se si utilizzano più tipi di carattere bisogna fare in modo che i ruoli siano chiaramente definiti, se un font viene utilizzato come sottotitolo, non passare a un altro tipo di carattere per una sottorubrica. Scegliere sempre un tipo di font chiaro.
Potreste aver già sentito questa frase, una combinazione di successo si basa sulla concordia, o il contrasto, ma non sul conflitto. Vale a dire che i font selezionati possono lavorare bene insieme, per condividere alcune qualità, o per essere completamente diversi l’uno dall’altro. Tuttavia, le coppie di caratteri possono essere in conflitto in diversi modi.
Esaminiamo ciascuna delle possibilità di successo.
Descrivere due caratteri che hanno delle evidenti concordanze consente si usare lo stesso tratto in entrambi i casi. Forse la loro crenatura, le proporzioni e gli altri elementi sono simili. Date un’occhiata a questi esempi di Kerry Scott Jenkins e noterete chiare similitudini proporzionali.
Un modo per raggiungere la concordanza tra i caratteri è di accoppiare due caratteri della stessa famiglia. Se sono di famiglia, si conciliano bene, giusto?! In ogni caso, la famiglia Droid, progettata da Steve Matteson per l’uso su dispositivi Android di Google, dispone di vari pesi e stili, con serif e sans-serif facce. Questi due caratteri lavorano molto bene insieme. Uno o l’altro carattere si fa carico delle voci, l’altra il corpo del testo.
O viceversa è una grande combinazione.
Sono puliti e moderni e adatti (come ci si aspetterebbe) per il web e dispositivi più piccoli a causa della loro grande x-height.
L’x-height di un carattere descrive l’altezza dalla linea di base per i tratti superiori dei caratteri minuscoli, come la x. Un grande x-height aiuta con leggibilità. E questi due caratteri condividono questa qualità.
Più linee morbide insieme possono essere altrettanto efficaci:
Abbinamento 2: Contrasto
Nella sua forma più semplice, prendere in considerazione il contrasto tra serif e sans-serif.
E’un modo classico di accoppiamento. Un passo sicuro è prendere un serif decorativo per la voce e un sans-serif per il corpo o prendere un no-nonsense sans-serif per le linee, con un serif piacevolmente leggibile per il corpo..Un connubio di successo in molti casi. Diamo un’occhiata ad alcune combinazioni, iniziando con due font di sistema. Proprio così, anche loro possono stare bene insieme.
Dove si possono usare questi due caratteri insieme? Dai un’occhiata allo scheletrodel Boilerplate. Spogliati di ogni stile superfluo, Georgia e Arial funzionano perfettamente in questo ambiente.
Per avere un effetto più raffinato…
Da non dimenticare è il ruolo di qualsiasi testo per la scelta dei caratteri. Nei casi indicati sopra, abbiamo dimostrato una gerarchia tramite font-size, le voci sono più grandi rispetto al corpo del testo. Ci sono altri modi per stabilire chi è il capo, ossia notare il preso del testoCi sono altri modi per stabilire chi è il capo, ossia notare il preso del testo.
Nel caso in cui non siamo interessati ad un layout di pagina del tutto testuale. O forse abbiamo a che fare con due voci e nulla più (In un messaggio di costruzione, per esempio).Possiamo permetterci di essere un po’ più avventurosi. Come su un h1 sorprendente, accoppiato con un rinforzo h2?
Font abbreviati funzionano sempre bene per attirare l’attenzione.
Ecco un esempio di una combinazione simile ed efficace:
E per coloro che sono interessati, ecco una sintesi di ciò che questi caratteri sono:
E ancora si può far riferimento a una gerarchia chiara per scegliere il colore che sia in grado di non danneggiare l’altro:
Il titolo principale è un tipo di carattere in linea progettato espressamente per la titolazione. Nel caso in cui sia un tipo di carattere maiuscolo, potrebbe essere necessario espandere un pò il letter-spacing, come fatto nell’esempio qui sotto.
In linea descrive un carattere tipografico con linee bianche che appaiono all’interno dei tratti dei caratteri.- fonts.com
Purtroppo, non è ancora disponibile come un font web ma, nonostante ciò, è sicuramente uno dei font preferiti al momento.
Prendete questo font serif lastra, il minimo sforzo, il massimo impatto.
Terminazioni in Slab e Grabber sono molto efficaci, ma possono essere un po ‘insistenti, se non si sta attenti. E’ come mettere un elefante in un negozio di porcellane. L’esempio di sopra effettivamente funziona molto bene con un partner più delicato, perché contrasta e allo stesso tempo accompagna alcuni tratti della personalità. I caratteri sembrano molto diversi, ma se si esaminano le curve, vedremo che non sono così dissimili come si può pensare.
Alcuni tipi di carattere sono così deliziosi che quasi non possono fallire. Guardate Latticello, per esempio, che è sontuoso, elaborato e decorativo. Qui abbiamo l’accoppiamento con la Georgia:
E con Aller o un altrettanto sottile sans-serif:
Ecco un esempio di combinazione in cui ci sono due caratteri con una personalità che li fa scontrare– sono caratteri troppo forti e a sé stanti. Ma sapete una cosa? Questo connubio in realtà è molto bello!Quindi non si sa mai ..
Cerchiamo di non concentrarsi troppo su ciò che non funziona bene, noi non vogliamo inasprire le combinazioni gioiose vero? Detto questo, facciamo facciamo vedere come due font, che sono forse troppo simili, possono apparire imbarazzanti insieme.
Ma perché non funzionano bene insieme? La nostra idea era quella di contrastare, garantendo al contempo un elemento di unità?
Sono stili diversi, uno è un Blackletter , l’altro romano serif.
Hanno proporzioni diverse, un o è condensato con un x-height relativamente grande, l’altro è più estes o e con alti ascendenti.
Eppure, essi sono simili per il peso e le dimensioni, ed entrambi condividono strani speroni sulla fine di ogni carattere.
Qui sta il problema.Condividendo questi ultimi tre dettagli (peso, dimensioni e decorazione) sono diventati troppo simili. Stanno eseguendo ruoli molto simili, ma le piccole differenze sono in conflitto e rende l’effetto complessivo molto imbarazzante.
Le curvature degli speroni, per esempio, sono in totale contrasto:
I loro assi sono troppo distanti:
E il modo in cui è formato un Blackletter dà una direzione leggermente in contrapposizione alla natura verticale della romana:.
Queste differenze non potrebbero essere un problema in altri esempi, ma qui abbiamo due caratteri, che (a prima vista) hanno lo stesso aspetto. E’un po’ come quando si vede una celebrità in piedi accanto a un modello di cera al Madame Toussauds . Non è mai bello da guardare.
Una volta giunti alla conclusione che non vi piace un abbinamento del tipo di carattere, dovete cercare in modo da prendere decisioni più rapid e in futuro.
Spero che il vostro approccio alla combinazione dei font venga semplificata da questa Guida per principianti. La principale regola è “Non si sa fino a quando non si prova!”
Essere avventuroso. Come tutti i web designer, abbiamo un grande archivio di font disponibili per usarli nei nostri disegni. Bisogna prendere in considerazione i fondamenti, per poi provare. Sarete sicuramente sorpresi dal risultato.
Come sappiamo Facebook si sta impegnando molto per combattere la diffusione di notizie false, fake news, affiliazioni, sul proprio network, e su svariati fronti. Una delle manovre annunciate e ora realizzate riguarda alcune restrizioni sulla pubblicazione dei link da parte delle Pagine.
Realizzare siti web professionali che offrono servizi ben precisi e definiti non è un compito facile. Vi sono delle fasi ben precise da seguire per fare in modo di non bloccarsi durante lo sviluppo, in modo da renderlo più fluido e nel complesso più veloce. Read more →
Ormai risulta inevitabile avere un sito web per il proprio business, un sito ben fatto e curato, intendiamoci. Secondo recenti studi, i consumatori prima di procedere con un acquisto, consultano il web in cerca di recensioni e pareri altrui.
Ovviamente non possiamo partire alla sprovvista: se decidiamo di esser presenti dobbiamo farlo bene, altrimenti rischiamo solamente di fare danni all’immagine del nostro brand. D’altronde è l’apparenza la prima cosa che conta: se un sito web ha una grafica pessima, dei pessimi contenuti e un codice non molto pulito, non può suggerisce professionalità e sicurezza, al contrario no. Read more →
Tantissime aziende realizzano il proprio sito e poi pensano: “Ecco, è fatta!” e non si preoccupano mai di rivalutare il progetto tramite restylin grafico e/o funzionale o la sua posizione all’interno del mercato. (posizionamento sui motori di ricerca) Read more →
La realizzazione di un sito web richiede numerosi passaggi. Si parte dalla raccolta di informazioni iniziali, alla concreta creazione del sito, terminando con la manutenzione che consente di mantenerlo sempre aggiornato e attuale. Read more →
Gli spider (detti anche crawler) sono dei bot programmati per scansionare periodicamente la rete alla ricerca di informazioni che vengono poi memorizzate e dotate di un indice, in modo da essere messe a disposizione del motore di ricerca per il quale lo spider “lavora”. Read more →
La scelta dei colori che andremo ad utilizzare durante la creazione del nostro sito web è un passo fondamentale per la buona riuscita grafica dell’intero progetto. La prima cosa che l’occhio umano percepisce al caricamento di una pagina è proprio la combinazione di colori che viene utilizzata, che può risultare poi interessante o meno, indipendentemente dalle preferenze. Questo interesse viene infatti suscitato dalla combinazione, dalla leggibilità e dall’armonia che questi colori riescono a dare nel loro complesso. Inoltre una scelta ponderata può aiutare l’utente ad orientarsi ed indentificare subito le varie sezioni di cui un sito è composto, in modo da farlo arrivare immediatamente a quello che cerca .
Read more →
Commenti Recenti