App per iPhone e Android: Siti web da cui prendere ispirazione

Con l’esplosione del mercato delle applicazioni per smartphone (iPhone e Android principalmente), e il relativo aumento del giro di denaro attorno a questo mondo, c’è stato un incremento della qualità dei siti web delle App. Questi siti, spesso formati da una sola pagina, sono diventati grande fonte di ispirazione per i web designer.

Continua a leggere

75 font professionali gratis per design di alta qualità

Vi segnalo questo articolo di Tripwire magazine che presenta una collezione di più di 75 font di qualità eccellente e gratuiti che potrebbero essere utilizzati nelle vostre creazioni web e non. Non sempre i font gratuiti sono soddisfacenti ma quelli che la redazione ha selezionato sono "garantiti" e veramente molto belli.

font gratis

L’importanza della parte "tipografica" nel design è spesso sottostimata. Scegliere un buon carattere tipografico può aiutarvi a trasmettere il messaggio più velocemente e in un modo più adatto.

Prima di usare i caratteri che trovate elencati è sempre meglio dare un’occhiata alla licenza d’uso. Potrete affogarvi in questa bella lista. I miei preferiti sono il Telegrafico anche se è purtroppo tutto in maiuscolo e il Delicious.

Creare un footer in stile Web 2.0

Footer in stile web 2.0

Da quando Web 2.0 ha rivoluzionato il modo di concepire il design dei siti web, anche i footer, ovvero la parte finale delle pagine web, hanno acquistato un ruolo importante nell’equilibrio dei valori della pagina. Per dimostrarvi questo Thuiven ne ha raccolto 35 di varie forme e strutture, ma tutti fortemente indispensabili nell’ecosistema del sito.

Nel tutorial che voglio segnalarvi oggi, il risultato finale sarà veramente eccellente e di gran classe. A garanzia di questo c’è PSDTuts, un sito di qualità che raccoglie tutorial per Photoshop professionali e di qualità.

Ottimi template gratis per siti professionali

Template GratisOggi vi propongo 5 ottimi archivi di template gratuiti di ottima qualità. Si tratta di siti che propongono design web di qualità superiore per unicità e creatività, ideati da certificati professionisti del web design.

Template World

Template World Tutti i template di Template World sono gratis, senza tabelleW3C-compliant. Sono layout creati dai designer di Template World. Questi template sono stati provati e sono compatibili con la gran parte dei più famosi browser in circolazione sui principali sistemi operativi. La licenza è Creative Commons 2.5, che significa che siete liberi di modificare il layout per adattarlo al vostro personale gusto. L’unico vincolo è l’obbligo di inserire un link a Template world.

Studio7Design

template di Studio7Design I template di Studio7Design fanno parte della serie Nautica e sono layout open source. L’uso è gratuito per siti a carattere no-profit o per siti personali. La licenza usata è la Creative Commons 2.5.

Andreas Viklund templates

Andreas Viklund templateAndreas Viklund mette a disposizione gratuitamente i suoi migliori template, tutti rigorosamente in XHTML e CSS. Sono completamente gratis per tutti gli usi possibili senza nessuna limitazione o obbligo. L’unica richiesta è di inserirlo nei crediti, ma solamente se lo volete fare.

 Solucija Template

Solucjia TemplateIn questo sito è possibile trovare template per siti web gratuiti e completamente XHTML / CSS. Possono essere usati senza limitazioni sia su siti non commerciali che su quelli commerciali. L’unica richiesta non obbligatoria è di inserire nei crediti un link a Solucjia Design nel footer della pagina.

Open Design Community

Open Design CommunityLa community Open Design (The Open Design Community – TODC) è un gruppo di web designer votati all’open source che contribuiscono alla crescita della comunità fornendo centinaia di template in formato XHTML e CSS, completamente gratuiti. L’obiettivo di questo gruppo di persone è di rendere internet un luogo esteticamente più bello. (via AjaxPath)

Pattern nel design web

patterns nel design webMartijn van Welie, olandese, project manager nell’ambito del design visivo e del design interattivo, durante questi ultimi anni ha sezionato, analizzato e catalogato le parti ricorrenti dei siti web. Il risultato è una fornitissima libreria di pattern, cioè moduli standard che ogni sito utilizza, come la navigazione a tab, oppure i captcha, il footer sitemap o la galleria a thumbnail.

Non si tratta di un sito da cui trarre ispirazione, visto che nulla è originale, anzi, ogni pattern analizzato è standard e ben conosciuto. Ogni scheda che è divisa in sezioni, descrive il problema e la relativa soluzione. Lo scopo principale è capire perchè alcune soluzioni funzionano in certi contesti, mentre in altri no.

I pattern sono classificati in categorie:

  • Elementi di navigazione
  • Ricerca
  • Acquisti
  • Gestione dei dati
  • Scelta
  • Input
  • Interazioni di base
  • Personalizzazioni
  • Varie
  • Evidenziare l’attenzione
  • Feedback
  • Interazioni semplificate

captcha

 

 

Progettare form per applicazioni web

Web form - come progettarleLe applicazioni web usano i form in modo estensivo per raccogliere dati dagli utenti. Non sempre, però, vengono usate in modo consistente. Variazioni nell’allineamento dei campi e delle loro relative etichette, bottoni e gli elementi visuali che attorniano i form possono aiutare o impedire il corretto utilizzo degli stessi.

Oggi segnalo un ottimo articolo che prende in considerazione alcuni aspetti che caratterizzano i moduli web e ci aiuta a comprenderne i pregi e i difetti di alcune soluzioni.

Layout

Quando il tempo di compilazione deve essere ridotto al minimo e i dati da raccogliere sono facili e familiari all’utente come il nome, l’indirizzo, allora il layout da preferire è quello verticale. Etichette e campi sono uno sopra l’altro in modo da diminuire il movimento degli occhi e facilitare di conseguenza la lettura. L’accoppiamento tra etichetta e campo è data dalla prossimità verticale. Spesso, per aumentare il peso visivo dell’etichetta si consiglia di renderla in grassetto.

form verticale

Quando invece i dati da raccogliere non sono familiari e il modulo è lungo, allora l’approccio migliore è quello delle etichette allineate a sinistra. In questo caso l’utente sarà facilitato nella lettura dei campi che potrà leggere tutti insieme.

etichette allineate a sinistra

Un modo alternativo è quello di allineare le etichette a destra, in modo da rafforzare il legame tra etichetta e campo. D’altro canto, questa soluzione crea uno spazio irregolare a sinistra che rende la scansione di lettura verticale meno immediata. Noi occidentali, abituati a leggere da sinistra a destra, preferiamo avere un punto fisso a sinistra, all’inizio della riga e per questo è meglio allineare le etichette a sinistra.

etichette allineate a destra

Uso di elementi visuali

Visto che la soluzione "orizzontale" a sinistra, sembra essere la migliore, cerchiamo di ovviare al suo principale svantaggio, cioè della separazione visiva tra il campo e l’etichetta.

Si possono aggiungere quindi sfondi colorati e righe di separazione. Sebbene questo approccio sembri ottimale, in realtà comporta alcuni problemi. Il modulo è in effetti sporcato da elementi che distraggono la nostra innata capacità di raggruppare visivamente gli elementi. Nella figura sotto, vediamo che sono stati introdotti 15 nuovi elementi.

elementi visuali

Questo non significa che sfondi e righe di separazioni non debbano mai essere usate. Quando è fondamentale dividere blocchi di domande, sottili righe orizzontali e leggeri sfondi si possono usare. Entrabi questi elementi grafici sono soprattutto utili quando si vuole evidenziare il bottone che intraprende l’azione.

elementi correlati

Azioni primarie e secondarie

L’ultimo aspetto che prendiamo in considerazione sono i bottoni o i link che permettono di compiere l’azione principale e secondaria. Di solito si tratta di sottomettere il modulo o di cancellarlo.

L’azione primaria deve essere visualmente molto carica (colori chiari, testo grassetto, sfondo colorato) rispetto agli altri elementi del modulo e deve essere allineata ai campi di immissione.

Quando un modulo ha più di un’azione possibile, come "continua" e "torna indietro", è consigliato diminuire la forza visiva dell’azione secondaria. Questo minimizza la possibilità d’errore da parte dell’utente e conduce l’utente alla terminazione del processo di compilazione.

 bottoni d'azione

(traduzione da Web Application Form Design, di User Interface Engineering)