Personal tools

You are reading the articles stored in Web Design

Sep 23, 2015

Le 15 pagine Not Found più creative e divertenti del web

Ti sei perso?

Le 15 pagine Not Found più creative e divertenti del web

Filed Under:

In questo articolo mi sono divertita a realizzare una raccolta delle pagine meglio progettate ed ironiche create per segnalare l'errore 404, ovvero pagina non trovata

Purtroppo agli utenti dei nostri siti web può capitare di imbattersi nella pagina di errore 404.  Essere in grado di indirizzarli di nuovo alla home page è la nostra seconda possibilità di coinvolgerli.

Per evitare che l’utente abbandoni il sito è fondamentale creare una pagina di errore efficiente e utile. Il visitatore deve capire di trovarsi in una pagina di errore, pur essendo sempre all’interno del sito. Perciò è importante che la pagina 404 sia in linea con il design del sito e che ci sia la possibilità di tornare alla homepage o alle sezioni principali del sito.

Inoltre la pagina 404 può trasformarsi in una piacevole sorpresa: con una pagina di errore spiritosa e ironica possiamo alleviare la frustrazione dell’utente.

Ho fatto un giro sul web per cercare le pagine di errore più creative, strane e divertenti.

POP ART Studio

Vi consiglio di visitare questa pagina di errore, lo sketch è davvero divertente!

Popwebdesign

read more

Jun 15, 2015

I 10 migliori esempi di menu di navigazione originali e creativi

Navigation design

I 10 migliori esempi di menu di navigazione originali e creativi

Filed Under:

Vuoi rendere la vita più facile ai visitatori del tuo sito web, ma con un pizzico di fantasia? Fallo con un design di navigazione efficace e funzionale!

Riuscite a immaginare un sito web senza la navigazione? Sarebbe come viaggiare su strade senza indicazioni o cartelli.

Gli utenti spesso abbandonano i siti che non possono navigare, mentre se possono trovare senza problemi ciò che stanno cercando sono più propensi a rimanere. Una navigazione efficace può garantire la fruibilità del sito e migliorare la user experience degli utenti.

Altrettanto fondamentale è il design di navigazione, che deve essere accattivante. Il menu di navigazione deve invogliare l’utente a navigare il sito, deve stuzzicare la sua curiosità.

La navigazione può essere realizzata in diversi modi: posizionata nell'intestazione o a pié di pagina, su fasce laterali, può essere fissa oppure scorrere insieme all’utente, nascondersi e poi riapparire, comprimersi ed espandersi.

In questo post ho selezionato 10 diversi menu di navigazione di siti web i cui realizzatori hanno speso tempo e fatica per far si che la loro navigazione diventasse qualcosa di speciale. Vedrete molti stili e approcci diversi, alcuni fuori dagli schemi e non certo convenzionali.

 

Rally Interactive

Possiamo navigare questo sito in due modi: il primo tramite il frecce al centro della pagina, che fanno scorrere la pagine orizzontalmente, il secondo tramite il menu a scomparsa in alto a destra. La grafica completa l'opera perché rende tutti gli elementi omogenei tra loro e armonizza l'apertura del menu. L'effetto è veramente interattivo come indica il nome stesso del sito.

Rally Interactive2.pngRally Interactive1.png

read more

Dec 03, 2014

Tipografia o arte? Il font si trasforma in design e scultura!

I LOVE TYPOGRAPHY

Tipografia o arte? Il font si trasforma in design e scultura!

Filed Under:

Per gli appassionati del font design ecco 10 esempi di tipografia utilizzata in ambiti diversi da quello convenzionale. Scopriamo insieme un altro modo di vedere i font.

Il font, ovvero il tipo di carattere usato, è fondamentale per caratterizzare il design della pagina. In alcuni casi la creatività spinta al massimo trasforma il font design in opere d'arte. Ecco i 10 esempi più caratteristici dei tanti proposti in rete.

An obvious bus stop

Bus

Scultura "An obvious bus stop" realizzata a Baltimora dalla "Madrid-based artist collective Mmmm". Il design friendly di questa fermata è in contrasto con una city industriale e sicuramente rende meno noioso il dover aspettare il bus ogni mattina. La lettera B può proteggere le persone dalle intemperie, e la curva della S invita passeggeri di sdraiarsi mentre aspettano.

read more

Sep 16, 2014

Prototipi e mockups per Mobile: è semplice con gli strumenti giusti!

Tap, swipe, pinch, bump... e il clic?

Prototipi e mockups per Mobile: è semplice con gli strumenti giusti!

Filed Under:

Progettare e prototipare una nuova App sono le fondamenta per una buona riuscita: se il cemento è sabbioso basterà un "tap" di troppo a far crollare il castello

Sviluppare applicazioni per device (smartphone, tablet e surrogati) richiede un’analisi preliminare, se non pari, addirittura superiore a quella di un sito. Lo stesso dicasi per la realizzazione di siti web in ottica “mobile first”.

Le dimensioni dello schermo, il modo in cui l’utente può interagire con la nostra app, le molteplici situazioni in cui lo stesso utente si può trovare nel momento in cui la utilizza e addirittura il numero di zampe di cui dispone (leggi l’articolo fino in fondo e mi darai ragione ;-) sono tutti fattori determinanti da tenere sotto controllo, dall’analisi alla pubblicazione sullo store.

In questo post ho raccolto alcuni strumenti che possono aiutare nella fase di progettazione e protipazione su mobile.

read more

Sep 03, 2014

Responsive web design... ma non dimentichiamoci del logo!

Responsive logo design

Responsive web design... ma non dimentichiamoci del logo!

Filed Under:

Sfruttiamo davvero tutto il potenziale del responsive web design per i loghi? Come risulterebbero quelli dei brand più famosi, se fossero responsive?

Nei siti web responsive l’aspetto dell’header, del menu di navigazione o dei contenuti cambia in base alle dimensioni dello schermo. Tuttavia, si tende a non modificare i loghi: semplicemente si riducono o si espandono per adattarsi allo schermo.

A volte manca uno studio vero e proprio sull’aspetto responsive del logo, che definisca come debba essere il logo in base alle diverse dimensioni del dispositivo. Eppure il logo è il simbolo più potente del marchio di un brand.

Come dicevo, semplicemente ridurre o ampliare un logo secondo il suo contesto non è sempre la soluzione migliore.

Potrebbe essere necessario aggiungere dettagli nel logo man mano che la capacità del dispositivo aumenta o, al contrario, rendere minimale il suo aspetto se le dimensioni della finestra diminuiscono.  

Un ottimo esempio ci viene fornito da un progetto di studio di Joe Harrison sulla creazione di loghi responsive per i grandi marchi.

Questo progetto mostra come loghi delle marche più popolari possono essere efficacemente riprodotti in maniera responsive. Se aprite la pagina e ridimensionate il browser vedrete i loghi che si aggiornano dinamicamente in base alle dimensioni dello schermo. Via via che le dimensioni del browser si riducono, ognuno di questi loghi passa attraverso una sequenza di breakpoint e, ad ogni breakpoint, il logo viene modificato, rimanendo però fedele al marchio originario.

Loghi - FullscreenLoghi - TabletLoghi - Mobile

read more