Copiare da un altro autore è un reato che si chiama “plagio”. Copiare da più autori, invece, è una opera meritevole che si chiama “ricerca”. (Luciano De Crescenzo)
web-design
Ci sono 15 articoli con tag web-design (questa è la pagina 1 di 2).
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.
Riuscirà un web design a stupire più di queste foto
Leggevo questo articolo fotografico comparso sul Boston.com e mi chiedevo se mai un web design riuscirà a stupire e soddisfare l’animo dell’utente come riescono a fare queste meravigliose foto. Con due parole potrei riassumere le emozioni che mi trasmettono: meraviglia e stupore.
La tendenza del web design del 2009
In questa senconda metà del 2009 possiamo fissare quali tendenze del web design abbiano oramai preso campo tanto da diventare uno stato dell’arte ben delineabile. Alcune tendenze sono particolari, altre semplicemente evoluzioni di altre. Andiamo quindi a definire i punti chiave del web design attuale.
Tipografia
Predominante, Invadente
Inutile scriverlo, oramai tutti voi avrete notato che si sono affermate le grandi ed evidenti scritte, posizionate above the fold nella zona alta del sito e sparate al centro del monitor. E’ assodato che tale tecnica possa lanciare un messaggio forte e chiaro all’utente fissando bene nella testa del navigatore il brand e la filosofia del sito lasciando poi che venga approfondita nel resto delle pagine.
Georgia, Georgia, Georgia
Il Georgia sembra essere diventato il font per… qualsiasi cosa! E’ largamente utilizzato per il testo dell’articolo, per i titoli e anche per tutti i testi del sito. E’ usato spesso a 12px come testo standard.
Logo in corsivo
Molto spesso ultimamente mi capita di incontrare logo che contengono font calligrafici cioè, che sembrano scritti a mano. Una tale scelta trasmette maggior “carattere” all’azienda, ovviamente se usato con cautela e buon senso.
Layout
Gallerie grandi e centrali
Questo è un trend particolarmente affermato da siti di applicazioni web e portfolio dove il centro dell’attenzione deveno essere gli screenshot dell’applicazione o le opere dell’artista. Questa tendenza l’abbiamo vista anche l’anno scorso, ma quest’anno si è definitivamente trasformata in uno standard.
Un’unica pagina 2.0
Sì, anche l’anno scorso si erano diffusi, ma solo esclusivamente per siti di portfolio personali. L’idea è piaciuta e si è diffusa in ogni angolo del web. Si tratta di siti formati da un’unica pagina, navigabile in verticale tramite collegamenti ad ancora. Sembra un’idea vincente e taglia notevolmente i tempi di sviluppo.
Colori
Vividi e forti
I designer si stanno rivelando molto coraggiosi proponendo design di “carattere”. Stanno accompagnando per mano il web, conducendolo verso un nuovo modo di pensare, più innovativo e fresco. Uno dei punti chiave di questa nuova creatività è l’uso di colori più vividi e forti ispirando nuovi stati d’animo e trasmettendo nuovi messaggi emotivi al visitatore.
Nuovi intrugli
Più i designer si sforzano di essere creativi, più notiamo nuove combinazioni di colore e strane associazioni sempre più inusuali nel web.
Previsione
E’ sempre molto difficile poter prevedere l’evoluzione del design ma sento che il design ha finalmente focalizzato la giusta direzione e i designer stanno scoprendo nuove strade per trasmettere un messaggio più forte, invece di badare a semplici scelte di gusto. Mi aspetto combinazioni di colore sempre più pazze e accattivanti per liberarci definitivamente dai vincoli psicologici imposti dal vecchio web.
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.
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
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
Oggi 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
Tutti i template di Template World sono gratis, senza tabelle e W3C-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
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 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
In 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
La 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
Martijn 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
Progettare form per applicazioni web
Le 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.
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.
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.
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.
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.
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.
(traduzione da Web Application Form Design, di User Interface Engineering)
Raccolta di ottimi web design
Stai cercando ispirazione per un tuo nuovo sito? Flickr propone più di 290 screenshot e link di siti dal bel web design. Molti di questi siti sono belli fuori e anche dentro, infatti spesso troviamo sorgenti esemplarmente codificati.