Wordmark. Anteprima online dei font sul tuo pc.

Digita una frase o una singola parola e grazie alla preview online di Wordmark potrai vederla utilizzando i font installati sul tuo pc. 

Wordmark è un’applicazione web gratuita che consente di effettuare un’anteprima di un determinato testo sfruttando i caratteri installati sul nostro computer. Un servizio simile trova applicazione nella grafica, ma anche nella realizzazione di contenuti per siti web o slide multimediali. È vero che le ultime versioni di software come Photoshop e Word/Open Office consentono questo tipo di anteprima, ma hanno delle limitazioni quanto a praticità e velocità d’uso.

Wordmark.it

“Wordmark.it abbrevia il processo di progettazione attraverso la selezione dei caratteri dal punto di vista di un designer”, spiega la società che ha realizzato l’applicazione. “Vi permette di navigare velocemente attraverso anteprime dei font, effettuare un check them out su sfondo scuro, visionare a caso titolo o anteprime, selezionando quelli che vi piacciono e confrontarli per la decisione finale.”

Non resta che andare sul sito e digitare una frase d’esempio, scegliendo positivo (carattere nero su sfondo bianco) o negativo (carattere bianco su sfondo nero). Quindi selezionare la dimensione del carattere, che può essere ingrandito o rimpicciolito in seguito, e premere invio.

wordmark

Avremo la possibilità di confrontare i risultati ottenuti con differenti font e sarà più semplice scegliere il carattere adatto alle nostre necessità, avendoli tutti a portata “di occhio”. Con i programmi sopra citati questo non sempre è possibile o è molto più complesso fare un raffronto tra ogni singolo font, rendendo più lunghi i tempi di realizzazione del progetto.

Visita wordmark.it oppure scarica l’app per il browser Google Chrome.

Testare font online. 4 ottimi tool gratuiti

Trova il font che soddisfa le tue necessità utilizzando quattro ottimi servizi gratuiti. Soluzione adatta a web designer e blogger particolarmente esigenti.

Tra le varie problematiche da affrontare in fase di realizzazione di un sito c’è la scelta del font adatto. I caratteri a disposizione sono numerosi, spesso belli e d’impatto, ma come sarà la resa una volta ultimate le pagine? E se dopo un lungo e faticoso lavoro di restyle il risultato non ci soddisferà? Per evitare noiosi test, delusioni e perdite di tempo, ci vengono incontro quattro servizi online gratuiti.

FONTPRO

L’unico dei quattro a richiedere una registrazione, se pur rapida visti i pochi campi da compilare e l’assenza dell’email di conferma, prima di iniziare i nostri test. Effettuato l’accesso è possibile scegliere una delle tre opzioni:

  • semplice articolo di un blog (con varie dimensioni di testo),

  • Due o più colonne affiancate.

  • Una pagina completamente bianca.

 Si aprirà una nuova scheda con a sinistra l’area gestionale per la scelta del carattere e dei relativi settaggi (dimensione, colore, interlinea, spaziatura), mentre sulla destra troviamo il testo dell’intestazione e del corpo, personalizzabile con un semplice clic.

 Al momento è possibile scegliere solo tra i font in locale e quelli di Google, ma sono previste altre opzioni tra cui Typekit e Fonts.com.

testare font online con fontpro

http://fontpro.com

TYPETESTER

Nonostante la grafica confusa e le sezioni d’aiuto poco leggibili perché coscritte in un’area troppo piccola, Typetester dimostra d’essere una valida proposta.

La textarea, personalizzabile qualora non dovesse andare bene il classico Lorem ipsum, è divisa in tre colonne ognuna delle quali permette di visualizzare il carattere con 12 opzioni differenti. Normale, grassetto, corsivo, maiuscolo, maiuscolo grassetto e corsivo e via dicendo. Una volta scelto possiamo impostare i parametri a partire dalla sua dimensione, interlinea, allineamento, eccetera.
Il risultato è visibile in tempo reale, già durante la digitazione.

Per funzionare, Typetester necessità della presenza di Javascript sul computer.
Abilitando i cookie nel browser le ultime impostazioni applicate verranno memorizzate e automaticamente caricate ricollegandosi al sito.

testare font online con typetester

http://www.typetester.org/

TYPEWONDER

Vogliamo effettuare un restyle delle nostre pagine web, ma non abbiamo le idee ben chiare? Basta una rapida preview del nostro sito/blog per verificare l’efficacia di uno specifico font.
La procedura da seguire è semplice e consta solo di tre passaggi:

  • inserire l’url del sito.

  • Selezionare il font che più ci piace, scegliendolo tra quelli archiviati per popolarità o per nome. Volendo è possibile personalizzare la stringa di testo che apparirà nell’anteprima.

  • Visualizzare il risultato ottenuto.

A questo punto possiamo: cambiare il font, copiare le stringhe di codice utili per inserirlo nel sito, condividere il link dell’anteprima ottenuta.
Tutto questo tramite il menù posto in alto nella pagina.

Typewonder utilizza i Google Font.

testare font online con typewonder

http://typewonder.com/

Web Font Combinator

Ultimo strumento e anche il più semplice da usare, per via di una grafica essenziale e al tempo stesso funzionale al massimo. Possiamo testare il font personalizzando titolo, sottotitolo e corpo del testo, ma anche lo sfondo. In questo modo il risultato sarà quanto più vicino a quello che otterremo sul nostro sito.

Le modifiche, da effettuare tramite i controlli posti nella parte inferiore della pagina, riguardano ovviamente il tipo di carattere, la dimensione, l’altezza e il colore.

Anche in questo caso vengono utilizzati i Google Fonts.

Testare font online con webfont combinator

 http://font-combinator.com/

Responsive portfolio con Parallelism

Vuoi creare una galleria immagini adatta alla navigazione su tablet e dispositivi di telefonia mobile? Parallelism è il template che fa per te.

parallelism responsive porfolio

Parallelism

Sito-portfolio a una sola pagina realizzato con Javascript e CSS, ha una struttura molto semplice e per questo risulta facilmente personalizzabile. Non servono dunque particolari conoscenze tecniche per poterlo adattare a ogni specifica esigenza o caricare le nostra immagini.

Nella home page viene visualizzata l’intera gallery, navigabile utilizzando le frecce sulla tastiera, lo scroll (la rotella) del mouse o spostando il cursore da sinistra verso destra e viceversa. Cliccando su ogni singola fotografia è possibile ingrandirla continuando, da qui, la navigazione all’interno dell’intero portfolio, sempre tramite le frecce sulla tastiera o quelle poste in calce alla foto. A queste ultime si potrà anche aggiungere un breve testo descrittivo.

Parallelism è rilasciato sotto licenza Creative Commons e può essere usato, gratuitamente, in progetti personali o commerciali.

Tridiv. Crea oggetti 3D in CSS

Tridiv è un editor web-based per la creazione di forme tridimensionali in CSS. Oggetti e animazioni da impiegare nella realizzazione di loghi o elementi d’interfaccia utente, ma non solo.

Tridiv

3D e CSS con Tridiv

L’applicazione consente la scelta tra quattro forme geometriche (parallelepipedo, piramide, cilindro, prisma) personalizzabili a nostro piacimento, agendo su vari parametri. Le possiamo ruotare, ridimensionare, inserire un’immagine di sfondo, settare colore e opacità.

L’interfaccia, suddivisa in quattro quadranti, permette la visualizzazione in tempo reale di cosa stiamo facendo e da ogni prospettiva. Con l’anteprima possiamo vedere il risultato ottenuto e prelevare i codici HTML e CSS, modificabili all’interno di Tridiv o tramite CodePen.

tridiv intro

La compatibilità è l’unico aspetto negativo, visto che Tridiv dà risultati solo con browser che supportano la tecnologia Webkit. Ecco perché l‘applicazione funziona esclusivamente con Google Chrome, Safari e Opera.

Un vero peccato perché l’editor è utile e, tutto sommato, nemmeno eccessivamente difficile da usare. In ogni caso una visita al sito bisogna farla: http://tridiv.com/

Giphy, il motore di ricerca per le gif animate

Sembravano destinate a scomparire, ma grazie alla crescente diffusione di social network come Tumblr e Buzzfeed riappaiono prepotentemente nel web. Sto parlando delle Gif animate che da qualche mese hanno un motore di ricerca dedicato.

Giphy

Il progetto realizzato da Alex Chung e Jace Cooke si propone di catalogare e ordinare le Gif Animate tenendo conto della loro rilevanza. L’idea è creare un’immensa libreria d’alta qualità, come conferma lo stesso Chung:

“Abbiamo un crawler Web personalizzato che va su Internet e guarda le fonti migliori per le nuovi GIF. Cerchiamo di ottenere i metadati dalle immagini utilizzando alcuni algoritmi, così come i tag se la GIF è presente su Tumblr.”

Nella prima settimana di vita il sito ha ricevuto ben 30.000 visitatori, a dimostrazione che l’interesse per le immagini animate è ancora forte.

Giphy, motore di ricerca per gif animate.

Come funziona

La Homepage è un muro di gif animate che cambiano al riavvio della pagina, mentre passando con il mouse su ognuna di esse si attiva la preview. In alto troviamo il box di ricerca e un menù che ci permette di visualizzare gli “artisti” presenti, con il relativo profilo e l’elenco delle immagini messe a disposizione. Immancabile il blog, in realtà un ulteriore elenco di animazioni con qualche informazione testuale.

Se non si hanno le idee chiare su cosa cercare Giphy può risultare confuso e ostico, almeno inizialmente, ma la voce Browse presente nel menù, permette la visualizzazione per categorie popolari.

Non resta che andare su Giphy e cercare le GIF che ci interessano.

GiphyGimphy dawsongiphy drink

 

UICloud, motore di ricerca per le interfacce utente

Un immenso database nel quale cercare interfacce utente, quegli elementi grafici che potrebbero essere utili nella realizzazione dei nostri progetti di web design.

UICLoud

UICloud

UI Cloud archivia gli elementi grafici utili per la realizzazione di un layout web. Bottoni, icone, player audio e video, caselle di controllo e tanto altro ancora. Questo potente search engine effettua una ricerca tra quarantamila elementi e milleduecento insiemi di interfacce. Ecco perché trovare quello che fa al caso nostro diventa semplice e veloce.

UICLoud: esplora i contenuti

Se non si hanno le idee chiare su cosa cercare, o si è semplicemente curiosi, ci viene in soccorso il menù con le sue quattro voci.

  • Sfoglia (browse) l’intero archivio visualizzando le ultime UI inserite, le più popolari e le più votate.
  • Categorie (categories): 23 categorie specifiche e 8 tag, quelle maggiormente utilizzate dagli utenti.
  • Blog. È il punto di riferimento della community, con articoli di indubbio interesse, a partire dai tutorial per Photoshop.
  • Invia (submit). Compilando il form è possibile contribuire al progetto inviando il link alla risorsa, con le relative informazioni e i dettagli su chi l’ha creata. L’obiettivo di UICloud è creare una community di sviluppatori e designer attiva e di qualità.
    Ecco perché il materiale inviato verrà esaminato con attenzione prima della pubblicazione sul sito.

Dimenticavo, è possibile effettuare una ricerca delle user interfaces anche per colore.

UICloud: categorie

UICloud: Button Builder (generatore WYSIWYG di bottoni CSS)

È presente un editor WYSIWYG che permette di generare bottoni. A dire il vero l’ho trovato per caso leggendo un articolo, sul sito non mi è riuscito di individuare il link o un accenno a questa funzionalità. Button Builder è ricco di opzioni che permettono un’alta personalizzazione dell’elemento grafico, adattabile a qualsiasi esigenza.
Una volta terminato si potrà copiare il codice CSS o HTML generato.

Anche se internet è piena di questi editor online, il button builder di UICloud merita una visita.

UICloud Download

Una volta trovato quello che ci interessa si aprirà la pagina relativa all’interfaccia, con le relative informazioni. A partire dalle specifiche del file che andremo a scaricare (estensione, link al sito sorgente, licenza d’uso), passando per la doverosa citazione dell’autore, con link al suo sito, per poi finire su qualche informazione statistica. Sulla sidebar destra sono presenti il numero dei download effettuati, delle visite alla pagina e la valutazione degli utenti che va da una a cinque stelle.

Gli elementi presenti su UICloud, generalmente rilasciati sotto licenza Creative Commons, si possono scaricare gratuitamente. Il loro utilizzo è comunque condizionato da ogni singola licenza, ecco perché è consigliabile leggere con attenzione prima di utilizzare il materiale scaricato.

UIcloud pagina interfaccia

A questo punto non resta che andare su UICLoud e cercare gli elementi grafici che ci interessano.

http://ui-cloud.com/

Google Web Designer. Banner e ads in HTML5

Big G è sempre più orientata su HTML5 per l’advertising online, come dimostra il lancio del tool Web Designer. Una versione beta, scaricabile gratuitamente, che ci consentirà la realizzazione di banner, annunci pubblicitari e contenuti web icon questa tecnologia.

HTML5 è diventato un linguaggio standard nel mondo del web design. Merito dell’alta compatibilità con la maggior parte dei browser, dell’essere adatto alla visualizzazione su dispositivi mobili e desktop e dell’avere enormi potenzialità di sviluppo. Uno dei maggiori settori d’impiego è la creazione di banner pubblicitari (quelli di Google sono un esempio classico) poco amati dagli utenti, ma importantissimi per chi vuole distribuire un prodotto/servizio gratuito.

Google Web Designer

Con questo tool, il gruppo di Mountain View  tenta di venire incontro alle esigenze di sviluppatori e designer, ma anche degli utenti meno esperti, per quanto riguarda la creazione di inserzioni pubblicitarie interattive o contenuti basati su HTML5.

Google Web Designer

Una ulteriore spallata a Flash, destinato a essere sorpassato e abbandonato definitivamente nell’immediato futuro.

Stiamo lavorando sodo per aiutare le agenzie ad affrontare la sfida dello sviluppo, offrendo tool potenti e al tempo stesso facili da utilizzare per la realizzazione di elementi HTML5. Con questo obiettivo abbiamo annunciato DoubleClick Studio Layouts in agosto, che consente di creare inserzioni HTML5 in pochi minuti, mentre questa settimana abbiamo introdotto Ready Creatives in AdWords, che permette di farlo in pochi secondi. Oggi siamo felici di rilasciare la beta pubblica di Google Web Designer, un nuovo strumento di qualità professionale per la creazione in HTML5 accessibile da chiunque, dai designer ai dilettanti.

Google Web Designer può essere considerato come una sorta di transizione tra le due tecnologie. L’editor è WYSIWYG (ciò che vedi è ciò che ottieni), ma consente anche di intervenire direttamente sui codici Javascript e CSS, per una maggiore personalizzazione dei progetti realizzati.

Google Web Designer

Google Web Designer, compatibile con Windows e Mac OS X, ha altri quattro punti di forza che meritano di essere evidenziati.

1. Animazioni ed elementi tridimensionali. Grazie all’integrazione di CSS3 e agli strumenti di authoring 3D è possibile realizzare modelli tridimensionali e animazioni semplici da inserire negli annunci pubblicitari.

2. Librerie di oggetti contenenti elementi provenienti da Google come gallerie fotografiche, mappe e video di YouTube.

3. Non solo ads. Google Web Designer nasce per la realizzazione di banner pubblicitari, ma lo si può impiegare anche nella progettazione di singole pagine web o addirittura siti interattivi (per quest’ultima opzione nutro forti perplessità).

4. Gratuito. Oltre a essere completamente freeware, si aggiornerà automaticamente ogni qualvolta ci saranno miglioramenti e implementazioni disponibili. Ricordo che attualmente è disponibile in versione beta.

Scarica gratuitamente Google Web Designer o guarda la demo.

Effetto Polaroid sulle immagini con CSS3

Terminata la breve pausa estiva il blog riapre i battenti, con la pubblicazione di articoli su tutorial, freebies e altre cose interessanti che scoprirete a breve.

Effetto Polaroid utilizzando i CSS

Per cominciare eccovi un interessante tutorial per dare alle immagini l’aspetto di una Polaroid. Un tocco retrò per rendere più gradevoli le nostre fotografie, senza dover utilizzare plugin, Javascript o effetti di alcun tipo.

È infatti possibile creare l’effetto polaroid mediante l’uso di CSS2 o CSS3.
Da applicare a una serie di immagini disposte in una griglia, ordinata in maniera casuale, che possiamo caricare su qualsiasi host gratuito come Flickr.

Effetto Polaroid con CSS3

 GUARDA LA DEMO

Genera loghi online con Logotype Creator

Ieri mattina su Facebook un’amica mi chiedeva lumi, e aiuto, in merito ad un logo che avrebbe dovuto creare. Lei ovviamente non è pratica di grafica, Photoshop e compagnia bella, ma avendo un blog le si è posta questa necessità. Ecco perché mi sono messo a spulciare in rete alla ricerca di un sito che le consentisse di risolvere il problema.

Logotype Creator

Mi sono imbattuto in quello che, a prima vista, mi è sembrata una valida soluzione, semplice da utilizzare e soprattutto alla portata dei non addetti ai lavori. Logotype Creator genera loghi in maniera del tutto casuale, visualizzabili nella homepage dopo aver premuto il pulsante Generate Logo. La scelta è fra oltre un milioni di differenti soluzioni, alcune gratuite, altre a pagamento.

Logotype Creator
http://logotypecreator.com/

 In questo caso il costo esiguo, appena 12 $, consente di avere un logo esclusivo e personale. Diversamente con la soluzione free il nostro template sarà utilizzabile anche da altri utenti senza ovviamente la personalizzazione che applicheremo.

Una volta individuato il tema che ci piace non resta che cliccare sulla piccola lente d’ingrandimento e, successivamente, sulla scritta Personalize e Download.
Ecco apparirci l’area di lavoro nella quale il inserire il logo, aggiungere uno slogan che illustri la nostra attività o le nostre competenze, modificare l’immagine associata, di default, al logo. Abbiamo la possibilità di modificare font, colori e dimensioni delle scritte così come aggiungere effetti al logo o cambiare la sua disposizione.

In linea di massima con Logotype Creator si ottengo risultati soddisfacenti, piacevoli a vedersi nonostante la semplicità del logo creato. Aspetto imputabile alle vera, grossa, limitazione del sito: l’impossibilità di inserire una nostra immagine. Per il resto, se non avete alcuna dimestichezza con la grafica, è una buona soluzione.

Dimenticavo di citare due ultimi aspetti: per usufruire di questo servizio non è necessario effettuare alcuna registrazione e il file ottenuto verrà salvato in formato PNG.

Loghi creati con Logotype Creator
Loghi creati con Logotype Creator

Print Friendly per siti, WordPress e Blogspot

Trovo interessante “spulciare” con cura i blog, anche quelli non professionali, perché si scova sempre qualcosa di interessante, soprattutto tra i cosiddetti ammennicoli che puntualmente vengono installati. Con questo termine intendo i tanti widget che arricchiscono, molto spesso a sproposito e in maniera ridondante, i blog sulla piattaforma Blogger. Ecco come e perché sono venuto a conoscenza di Print friendly, widget che consente la stampa del contenuto di un post grazie ad un bottone o una icona. Collegandosi al sito printfriendly.com/button si procederà alla sua configurazione scegliendo l’aspetto e, il tipo di piattaforma su cui usarlo (Website-Blogger/Blogspot-Wordpress.org (hosted)-Wordpress.com-Drupal). Nei passaggi successivi si possono lasciare i settaggi di default.

Print friendly

A questo punto si passerà alla fase d’installazione. Nel mio caso ho testato il plugin su Blogger. Lo step successivo è stato cliccare sulla dicitura Installare su Blogger che automaticamente ci metterà in comunicazione con la piattaforma. Una volta effettuato il login si dovrà scegliere su quale blog installarlo, se ne abbiamo più di uno, è l’installazione avverrà in automatico. L’unica nostra incombenza sarà quella di stabilire in quale posizione lasciarlo.
L’utilità di questo widget sta nello stampare il contenuto realmente utile di un post, saltando banner pubblicitari, annunci, menù e simili. Il vantaggio consiste nel risparmiare carta ed inchiostro.

Print Friendly si può installa anche su browser per stampare una pagina web. È compatibile con Chrome, Firefox, Internet Explorer e Safari. Anche se procedura d’installazione e setting sono molto semplici, sul sito c’è un video che illustra le procedure da seguire.