Durante la realizzazione del design di qualunque progetto web, che sia esso un portfolio, un e-commerce, un’applicazione web o una mobile app, la scelta della tipografia gioca un ruolo fondamentale. In particolare, usare font di alta qualità può diventare un fattore determinante per coinvolgere l’utente in una piacevole user experience, facendo in modo che inizi o continui ad usare il nostro prodotto.

Chiunque operi nel mondo del web design dovrebbe avere a disposizione una buona dispensa di font da cui attingere.

In rete è possibile trovare una miriade di font gratuiti, ma non sempre di alta qualità o adattabili a più tipi di esigenze. Con questo articolo voglio condividere con te una collezione di 20 font gratuiti di alta qualità che ho selezionato personalmente per te, da scaricare gratuitamente ed usare per i tuoi prossimi progetti.

Corduroy Slab

Born Typeface

Canter Free Font

AC Mountain

Rose Free Font

Plethora

Anson

Norwester

Chula

KOMODA

Fairview

Braxton

Bosko Block

VDS

Firenze SANS

Airbag

EtharnigSc

Quirky Nots

Bamq Typeface

ROUNDA

Come già detto molte alte volte, per qualsiasi web designer, avere a disposizione una buona dispensa di risorse da usare a supporto dei propri progetti (come icone, psd kits, plugins, immagini ecc.. ) è un fattore determinante per la qualità del risultato finale do ogni lavoro, nonchè per la velocità con la quale questo viene eseguito ( quanto è vero, il tempo è denaro! ).

Siccome ogni giorno mi imbatto in numerosi tipi di risorse gratuite, mi piace organizzarle e condividerle con te, sperando che possano esserti utili in qualche maniera. In questo post parliamo di template, e in particolare voglio proporti 8 html templates da scaricare graditamente.

I template di seguito elencati presentano diversi tipi di caratteristiche e funzionalità, alcuni realizzati in html5, twitter bootstrap o con layout responsive:

TemplateVamp: Free Twitter Bootstrap admin template

NINA Theme: Free Html Website Template

Prologue: Free HTML5 website template

Free multi purpose Template  – alltemplateneeds.com

Helios: Free HTML5 template

Escase Velocity – Free Responsive Site Template

Overflow: Free HTML5 Responsive template

Liquid Gem: fully responsive HTML portfolio template

 

 

Come già detto in un articolo precedente, indifferentemente da qualunque campo esso operi, un designer ha costantemente bisogno di una fonte di ispirazione. Oggi porteremo avanti la rubrica design inspiration, che raccoglie gran parte dei siti web con tecnologie più avanzate.

La seguente raccolta espone diversi lavori realizzati con usando HTML5, Web GL, effetti parallax, flat design e tante altre funzionalità di ultima generazione. Buona ispirazione!

Sam Markiewicz

Corning

Yann Kozon

Ogilvy One Worldwide

Trionn Design

Parall.ax 

Dolox

Scroll for your Health

Trophees Du Bar

Perfect Match Competition

Skinjay

Boy Coy

TokioLab

Nusii

Fubiz App

Inky

Waller Creek Design Competition

Pixelis

Tool

Distance to Mars

Google ha annunciato in questi giorni l’uscita di Google Web Designer, il nuovo programma desktop disponibile sia per Windows che per Mac, pensato per dare la possibilità anche a chi non è un esperto nella creazione di animazioni CSS3, di creare siti web e applicazioni interattive generando codice HTML5, Javascript e CSS3.

L’utilizzo è molto semplice, in quanto per animare un elemento è sufficiente inserirlo nel documento tramite drag-and-drop, ruotarlo negli assi x,y e z (quindi utilizzando sia funzionalità 3D che 2D) e decidere quale movimento deve svolgere.

Pensato per ogni dispositivo, destinato a tutti gli web designer

La casa di Mountain View assicura che le animazioni funzionano su tutti i tipi di dispositivi, da quelli desktop ai tablet, fino ad arrivare agli smartphone, senza alcun problema di compatibilità.

Un’altra caratteristica fondamentale esposta da Google è quella di dare la possibilità a chi usa il tool di modificare direttamente il codice generato, per poter personalizzare direttamente il risultato finale a seconda delle proprie esigenze. Con Google Web Designer infatti, è possibile passare dalla vista-design alla vista-codice in ogni momento.
L’obiettivo sarebbe quindi quello di accontentare un target abbastanza esteso, andando dal designer alle prime armi fino a quello più esperto.

Quick mode e Advanced mode

La creazione di funzionalità come trasformazioni 3D o transizioni è disponibile in due modalità: quella veloce e quella avanzata. Nella prima l’utente dovrà preoccuparsi di definire la scena iniziale e quella finale dell’animazione, lasciando al tool il compito di organizzare i frame tra le due, mentre nella seconda sará l’utente a comporre i frame dell’intera animazione.

Disegna direttamente i tuoi tag HTML 5 o utilizza componenti già pronti

Altra importante caratteristica è quella di poter creare qualsiasi tag HTML 5 disegnandolo direttamente sul documento di lavoro, o importandolo da diverse librerie di oggetti pronte da utilizzare, in modo da rendere più veloce il workflow della codifica e del design del proprio sito web o applicazione.

Google Web Designer è ancora in versione Beta ed è scaricabile gratuitamente da chiunque, ecco il link della pagina ufficiale:

Conclusioni

Nonostante credo che un buon web designer debba saper scrivere il codice direttamente, devo ammettere che questo nuovo tool ha attirato molto la mia attenzione, soprattutto per il fatto di poter diminuire significativamente i tempi di codifica e di sviluppo.

Nel mondo del web designer è di fondamentale importanza, per migliorare il rapporto qualità/velocità di ogni progetto, disporre di un un serbatoio di risorse personali. Un tipo di risorsa molto utile sono sicuramente i template in formato psd, usati sia come base per un nuovo progetto, come punto di partenza o appoggio per la creazione di un proprio template o semplicemente per la propria ispirazione.

In questo articolo voglio condividere con te una serie di template in formato psd da scaricare gratuitamente.

Piatto – A Free Flat Style Landing Page PSD

Gusto – Email PSD template

Thunder – A Free Mega PSD Website Template

Mostrare – A Free Photography Portfolio PSD Template

Noah Zwillinger – Freebie pack

Free Business Themed PSD Website Design

LOOKSHOP – Free Responsive E-commerce PSD Template

Dashboard PSD by Aaron Sananes (ADMIN)