venerdì 6 giugno 2014

Siti web fai da te: come organizzare i contenuti (guida 2/2).




Continua il nostro viaggio per gli sviluppatori fai da te.

Se state pensando di costruire da soli il vostro sito web, senza la minima conoscenza di linguaggi di programmazione, e magari con risorse di tempo limitate, probabilmente siete pazzi e non vi interessa gran che avere un sito web.
Oppure no, forse siete davvero determinati e questo è l’inizio del vostro viaggio.

Nel post precedente abbiamo esplorato il mondo dei cms. Sappiamo installare il nostro cms e con qualche sessione di lavoro, iniziamo a capire come farlo funzionare. Adesso ci servono altri due minuti per approfondire il punto: come organizzare le informazioni?

In questo post troverete:

Gli obiettivi di un sito web
Cosa conta in un sito web e cosa può renderlo utile ai vostri obiettivi? Gli obiettivi sono importanti.

Questo è un discorso che, nella mia esperienza, risulta banale ai più. Sono tutti convinti di non averne bisogno. La risposta è: “no, a me serve una cosa normale”. La “cosa normale” è molto richiesta. Ovviamente si tratta di uno scudo mentale, è come dire: “non so come approcciare questo ragionamento, quindi preferisco far finta che non esista”.
A noi sviluppatori fai da te deve essere molto chiaro che la realtà è un’altra.

Ci sono quattro fondamentali azioni che un sito web può prefiggersi:
- vendere => siti ecommerce;
- rappresentare => siti istituzionali;
- intrattenere => siti esperienziali;
- far partecipare => community network.


La prima cosa da fare è stabilire a quale dei quattro (o a quale combinazione) dovrebbe rispondere il nostro sito. Tutto ciò che verrà dopo è funzione diretta, perchè grafica e architettura conseguono risultati positivi solo se sono ben orientate agli obiettivi.

La tabella seguente potrà forse chiarire ulteriormente il legame fra lo studio degli obiettivi strategici e le scelte di grafica, interazione ed architettura.



VESTE GRAFICA TIPO DI CONTENUTO TIPO DI ARCHITETTUR TIPO DI FEEDBACK
VENDERE Brillante, luminosa
Foto di prodotti;
informazioni tecniche; prezzo;
Tassonomica, orientata ai prodotti (catalogo) Acquisto
RAPPRESENTARE Elegante, sobria
Foto istituzionali;
Testi discorsivi; presentazioni;
Orizzontale, dal chi al come
(presentazione)
contatto diretto con traffico qualificato
INTRATTENERE Originale, sorprendente Media, foto e testi di interesse
Emozionale, accento sulla fruizione dei contenuti
(viaggio)
Volumi di traffico crescenti e condivisioni social network
PARTECIPARE Semplice, essenziale Aree interattive, forum, sezioni con contenuti multiutente Funzionale, elenco delle possibilità interattive Registrazione, newsletter, membering


GUI, UX, IA (dagli obiettivi alle scelte)
Graphical User Interface, User Experience e Information architecture. Questi tre acronimi sono la gran parte di ciò che dovete sapere di un sito web. In soldoni la GUI è la veste grafica del vostro sito, l’UX misura l’esperienza che il vostro sito restituisce ad un utente, mentre IA sta per architettura delle informazioni.
Sono tre concetti cardine della progettazione web, esaminiamoli uno per uno.


GUI – la veste grafica
Interfaccia grafica è l’immagine che il nostro sito restituisce all’utente. Può sembrare un aspetto collaterale ed ovviamente non lo è. L’esigenza di una buona GUI è uno dei principali motivi per cui i siti fai da te non ottengono buoni risultati. Perché noi utenti siamo istintivamente portati a declassare le informazioni che provengono da un contesto graficamente povero (esaltando all’opposto i contesti graficamente curati). Scherzi della percezione, che dipendono anche dall’enorme consumo di grafica cui le ultime generazioni si sono ormai abituate. Pensate agli smartphone, alle pay tv, ai social network: ogni giorno interiorizziamo tonnellate di interfaccia grafica e dunque siamo piuttosto rapidi a notare le differenze, specialmente se sono al ribasso. Per questi motivi un sito con una veste grafica poco implementata in genere non è un buon investimento, o almeno non parte con il piede giusto.

Come affrontare il problema?
Se non abbiamo grandi strumenti, la parola d’ordine è semplicità. Scegliere uno, al massimo due colori (possibilmente con qualche complementarità). Tralasciare espedienti troppo arzigogolati che difficilmente si riesce a realizzare con efficacia, per adottare soluzioni più immediate. Qualche buona fotografia in genere è il miglior modo di mascherare una veste grafica debole. O infine c’è chi punta sull’originalità, magari disegnando a mano (e poi digitalizzando) gli elementi grafici.
In ogni caso come si dice in gergo: lavorate per sottrazione.



IA – Architettura delle informazioni

IA è la struttura logica delle informazioni. Qui entriamo in un altro universo per il quale forse dovrete stanziare altri due minuti del vostro tempo.

Tutto origina da uno squilibrio iniziale: quello che è chiaro nella vostra testa, non è chiaro nella testa dell’utente. L’insieme delle risposte che servono a colmare questo squilibrio è l’architettura delle informazioni.
Ci sono almeno tre aspetti cruciali che uno sviluppatore fai da te dovrebbe tenere presente:
  • classificazione, ovvero separare le informazioni in unità concettuali autonome e facilmente identificabili (sezioni);
  • accessibilità, ovvero le informazioni devono essere a portata di mano, con percorsi brevi e intuitivi;
  • univocità (non ridondanza), i contenuti non dovrebbero ripetersi;


UX – l’esperienza dell’utente
Questa sigla poco nota ai non addetti ai lavori indica la percezione di un utente che utilizza il nostro sito web. E’ una branca recentissima, saltata fuori a metà anni novanta, ma il suo peso specifico sul funzionamento di un sito web è gigantesco.

Perché prendersi cura dell’esperienza dell’utente? Perché il ritorno è enorme. L’utente vuole essere supportato, vuol sapere quello che gli succede, dove si trova. Se qualcosa non sta funzionando, vuole alternative. UX significa accompagnare le informazioni, specificare dove ci si trova, offrire messaggi di conferma alle interazioni attivate dall’utente.

Lo studio dell’UX di un sito restituisce risultati sorprendenti. Va detto che realizzarlo senza nessuna conoscenza tecnica è praticamente impossibile. Un buon consiglio per sviluppatori fai da te è la valorizzazione dei link. In fondo gli ipertesti sono il sale della rivoluzione digitale. Sforzatevi di trovarne di buoni: arricchirete le vostre pagine web ed offrirete almeno qualche destinazione alternativa agli utenti.

Conclusioni
I vostri due minuti sono scaduti, qualche ora fa. Se siete ancora qui state iniziando a considerare l’esistenza di molteplici fattori.

Gli obiettivi sono importanti. A seconda di ciò che vogliamo ottenere, l’aspetto grafico e la struttura dei contenuti cambieranno. Fermarsi a mettere su carta è un buon modo per iniziare. Più le idee saranno chiare nella vostra mente, più sarà facile che riusciate a trasmetterle al vostro pubblico.

Anche in due minuti.
 

mercoledì 28 maggio 2014

Il nuovo sito di A5 Studio


www.a5studio.net

Il nuovo sito web. Dopo tanto lavoro suona quasi come un evento emozionante. Rinfrescare l'identità grafica. Immaginarsi con un look diverso. Non troppo serio però. L'idea è scherzare sempre un po' su quello che facciamo per riempire le nostre giornate. In verità ci sembra l'unico modo veramente serio di presentarsi.

Seri non seriosi, ha detto qualcuno. Chi lo sa, speriamo pure di sì.

L'impianto comunicativo è principalmente fotografico. Ci sono anche sezioni che sfruttano la grafica, ma la narrazione che trascina il navigatore appena arrivato è fotografico-didascalica. Anche le copertine dei progetti presentati nel portfolio sono fotografiche. Perchè certe fotografie non ci sta niente da fare ti restituiscono qualcosa che non riesci mai a riprodurre dal nulla. E' quel fatto che la realtà supera di gran lunga l'immaginazione come ha detto qualcuno.

Il portfolio contiene solo i progetti principali su cui abbiamo lavorato in questi anni.
E' stata una scelta netta. Certe tentazioni non le puoi assecondare, sennò ti distruggono. A voler mettere tutto c'è il rischio di non valorizzare niente.

L'idea allora è raccontare un po' lo sviluppo dei progetti, cercando di restituire un pizzico della quotidianità, del nerbo, della perseveranza.  Per quello che vale e sempre senza stare troppo a menarsela, però puntando l'accento sulle cose di rilievo, che altrimenti rischiano di perdersi nel calderone del tutto insieme.

A livello di navigazione abbiamo puntato sul dinamismo. L'architettura è robusta e fa ampio ricorso alle animazioni che poi sono il futuro (anzi il presente) delle nuove tecnologie di progettazione. I livelli di navigazione progettati sono molteplici: si può navigare con la tastiera, con lo scroll del mouse, con la pulsantiera posta alla base dello schermo oppure anche con un click nella barra di scorrimento, che peraltro mostra sempre la posizione in cui ci si trova così uno non si sente perso.

E alla fine cosa altro dire: ecco a voi il nuovo sito di A5 Studio.
Enjoy!

ps è quasi superfluo dire che ogni feedback è un gradito aiuto ad essere delle persone migliori. Anche l'eventuale lancio di pomodori e/o bestemmie digitali abbiamo fin d'ora deciso di prenderlo come un inevitabile e meritato segno di affetto.  



giovedì 6 marzo 2014

I candidati agli Oscar 2014 in sequenza animata


La presentazione dei candidati come miglior film alla serata degli Oscar 2014.
Il progetto è di Henry Hobson, Manija Emran, e il team di Mills+ per i 86 Academy Awards.

Di seguito anche una raccolta duo tutti gli interventi realizzati per la serata degli Oscar 2014 





martedì 4 marzo 2014

Dulux #ChangeYourStory

Se le nostre vite sono storie e il colore le influenza, allora facciamo si che accada.
Da questo approccio emotivo parte la nuova campagna realizzata da Dulux.
L'intero spot è stato girato in Sud Africa dal pluripremiato duo Christian e Patrick.



venerdì 21 febbraio 2014

Il lancio della Fiat 500 Abarth negli USA

Il fotografo Rj Muna in collaborazione con il maestro del body paint Craig Tracy, hanno realizzato questo scatto per la Fiat 500 Abarth. L'immagine è stata poi pubblicata all'interno del magazine dell' ESPN.

Di seguito il backstage.