Designer si nasce o si diventa?

Occhio violaLa domanda del titolo nasce da un articolo in inglese che ho letto qualche tempo fa: Do you have the designer’s eye?

E’ un intervento dove si sostiene che l’occhio del designer sia una dote innata, e che non si possano raggiungere risultati equivalenti con lo studio. Incuriosito da tali considerazioni, ho deciso di aprire un sondaggio su questo sito per conoscere il vostro parere, e fino a questo momento i risultati sono i seguenti:

  • Il 38% ritiene che si nasca designer, e sia impossibile arrivare allo stesso livello con lo studio
  • Il 46% pensa che si nasca sì designer, ma che sia possibile arrivare ad uguali risultati con lo studio e la pratica
  • Il 16% non crede in alcuna dote innata, e pensa che sia solo questione di pratica

Guardando questi risultati appare evidente un particolare, pur avendo un campione abbastanza limitato di votanti: la maggioranza (84%) ritiene che determinate persone sappiano per natura riconoscere un bel layout, quando è ben strutturato ed organizzato.

Adesso però veniamo alla domanda del titolo. E’ possibile secondo voi arrivare agli stessi livelli con lo studio? Creare la grafica di un sito da zero non è impresa facile, e va anche tenuto presente che c’è una grande differenza tra prendere ispirazione da un layout già esistente e farne uno totalmente nuovo.

Non voglio esagerare o essere discriminatorio, ma credo che esistano persone che per quanto si possano impegnare, difficilmente otterranno grandi risultati come designer. Con lo studio si può sicuramente migliorare ed imparare, ma è difficile arrivare sopra un certo limite se non si hanno le doti. Voi cosa ne pensate?

Italia.it, impossibile non parlarne

Finalmente è nato Italia.it, il portale del turismo italiano. Un progetto da 45 milioni di euro (sì, avete capito bene) che dovrebbe rappresentare il nostro paese su internet promuovendolo anche all’estero.

C’è un problema: il risultato è qualcosa di incredibilmente scandaloso, e nei pochi giorni di vita del portale le critiche non si sono fatte attendere, soprattutto da parte dei professionisti del web.

Qualcuno potrà pensare che criticare un progetto del genere sia troppo facile, che cercare i problemi nei lavori altrui sia semplice, ma anche dando una veloce occhiata a questo italia.it è impossibile astenersi dai commenti. Commenti per forza di cose negativi.

Iniziamo dal logo. 100mila euro spesi per questo:

Il miglior articolo su questo logo lo trovate su designerblog.it, non serve aggiungere altro. Vi basti notare tra le varie cose che sono stati usati 4 font diversi per un totale di 6 lettere.

Procedendo poi con l’analisi tecnica, la prima cosa che attira l’attenzione è la doctype: HTML 4.01! Non c’è che dire, siamo tornati indietro nel tempo.. ma le sorprese non sono finite, perchè ben presto un altro particolare cattura l’attenzione: il sito è realizzato con un layout a tabelle, degno di un portale di 10 anni fa.

Dopo questo, risulta inevitabile controllare l’accessibilità reale del sito, soprattutto perchè è un portale finanziato dallo stesso stato italiano che con la legge Stanca ha dato segnali importanti da questo punto di vista. E’ presente in bella vista una dichiarazione di accessibilità che fa pensare ottime cose, ci sono diversi collegamenti per scaricare software assistivo, e per molte pagine è presente una versione alternativa: ma siamo sicuri che tutto sia così perfetto come ci viene illustrato? Ovviamente no.

Il layout a tabelle è già un brutto segno, difficile da navigare per gli screen reader e la mancanza assoluta di tabindex non aiuta. Ci sarebbero le ancore posizionate in testa alla pagina per spostarsi tra contenuto principale e menu di navigazione, ma anche qui c’è una brutta sorpresa: il collegamento al contenuto principale manda sempre ad un’ancora #content inesistente.

Passando poi ad analizzare i contenuti veri e propri delle pagine ci sono dei testi a dir poco sorprendenti. Dalle mie parti sta spopolando la descrizione della Toscana, che viene presentata come “la regione più settentrionale dell’Italia centrale”: un giro di parole fantastico! Sono sicuro che se analizzate la descrizione della vostra regione non resterete delusi, ce n’è per tutti.

Inutile andare oltre, avete capito bene quale sia la situazione e cosa ci troviamo davanti dopo una lunga attesa che aveva fatto sperare in ben altri risultati. Se volete dire la vostra, vi segnalo:

Se invece volete approfondire l’analisi della user experience vi segnalo l’articolo pubblicato da Punto Informatico che non lascia spazio a dubbi sulla scarsa qualità di italia.it.

La cosa peggiore è senza dubbio la spesa che è stata sostenuta per arrivare ad un simile risultato. Immaginate 45 milioni di euro, guardate italia.it e cercate di trovare una spiegazione. Ci riuscite? Io no, e mi viene da pensare a tutte le cose che si sarebbero potute fare con quei fondi.

La legge sull’accessibilità in Olanda

accessibilitàPer chi non lo sapesse, dal 1° Settembre 2006 in Olanda è stata approvata una legge sull’accessibilità dei siti internet che ricorda molto da vicino la nostra ormai famosa legge Stanca.

E’ possibile leggere nel dettaglio il testo originale della legge, ma per chi come me non conoscesse la lingua, su Quirksmode ne viene fatta una discreta analisi (in inglese).

Adesso tutti i siti governativi olandesi dovranno seguire 125 linee guida, che prendono spunto dalle direttive del W3C ma vanno anche oltre.

Tra i punti degni di nota, troviamo che ogni sito dovrà avere:

  • codice HTML 4.01 o XHTML 1.0
  • separazione tra codice e presentazione, con HTML semantico e CSS
  • un attributo alt significativo per ogni immagine presente
  • una via alternativa per raggiungere tutti i contenuti, ad esempio quando Javascript è disabilitato

L’elenco come potete immaginare continua, e queste sono tutte raccomandazioni ben conosciute da chi sviluppa per il web seguendo le direttive del W3C. In certi casi però, come appunto nei siti delle amministrazioni, è bene che ci sia una legge a tutelare gli utenti.

Il vero passo avanti comunque ci sarà solamente quando anche le grandi aziende, come minimo, saranno obbligate a seguire le stesse regole nei loro siti. Per il momento la strada è ancora lunga, e i problemi continuano ad esistere.

Da notare che non mi sto riferendo all’accessibilità come il semplice controllo sul codice di un sito, il discorso va ben oltre. Ad un utente non vedente interesserà ben poco sapere che l’HTML è a posto se poi non riuscirà a navigare una pagina con un lettore di schermo.

Sono stati fatti dei progressi negli ultimi anni, anche in Italia, ma adesso è necessario insistere senza mai pensare di essere arrivati alla meta.

Colore di sfondo del body: mai dimenticarlo

Non tutti lo sanno, ma ogni browser consente di impostare un colore predefinito per lo sfondo ed il testo delle pagine web. Queste impostazioni vengono utilizzate quando il sito visitato non ha un colore già stabilito: di solito sono rispettivamente bianco e nero, ma un utente potrebbe preferire altre combinazioni.

Questo comporta possibili problemi quando in un sito il body non ha un colore di sfondo. Poniamo ad esempio che un utente abbia il rosso come background predefinito; questo è quello che vedrà andando sul sito bloggers.com:

Un altro esempio si trova stavolta su Modern Life is Rubbish che recentemente è stato anche ridisegnato.

Il problema si aggira facilmente ricordandosi sempre di dare al body un colore di sfondo:

body { background: #fff }

I due siti che ho fornito come esempio sono stati i primi che ho scoperto, ma se fate una ricerca non sarà troppo difficile trovare qualche altro caso clamoroso. Ricordatevi di questo particolare quando realizzate un sito, vi eviterà le lamentele dei clienti (e dei visitatori) che hanno dei colori preimpostati sul loro browser.

Selettori CSS3 su Firefox e IE7

CSS3I CSS3 sono già da tempo disponibili con le loro nuove regole, l’unico problema come sempre è il supporto dei browser, sempre scarso soprattutto considerando Internet Explorer.

Mentre Firefox ed Opera già da alcune versioni permettono di utilizzare nuovi selettori dei CSS3, la Microsoft solo con IE7 ha iniziato a supportarli. E’ giunto quindi il momento di approfondire la questione: ci saranno sempre degli utenti che continueranno ad utilizzare Internet Explorer 6, ma poichè i nuovi browser ce lo permettono, perchè non osare nella scrittura dei fogli di stile?

Ho realizzato una semplice pagina di esempio con alcuni selettori, in particolare quelli che consentono di controllare un elemento dall’attributo e dal valore dell’attributo stesso.

Ecco un breve elenco.

  • elem[att]: permette di selezionare tutti gli elementi di tipo “elem” con attributo “att”, ad esempio a[title] cattura tutti gli elementi a che hanno un title.
  • elem[att=val]: seleziona tutti gli elementi con attributo “att” di valore esattamente uguale a “val”
  • elem[att~=val]: seleziona gli elementi con attributo “att” il cui valore sono più parole separate da spazi bianchi, di cui una è esattamente uguale a “val”
  • elem[att^=val]: seleziona gli elementi con attributo “att” il cui valore inizia con “val”
  • elem[att$=val]: seleziona gli elementi con attributo “att” il cui valore termina con “val”
  • elem[att*=val]: seleziona gli elementi con attributo “att” il cui valore contiene almeno una stringa con valore “val”

Queste sono solo alcune delle novità, ma è già un buon punto di partenza per giocare con il codice senza dover usare troppi div contenitori, classi e id. Consiglio di guardare l’esempio ed il relativo codice, più chiaro di molte parole.
E’ buona norma comunque ricordare di controllare anche la resa su IE6, fornendo un’alternativa per chi ancora utilizza questo browser.

Per chi volesse approfondire, ecco la pagina ufficiale del W3C sui selettori dei CSS3.

Il redesign di Mezzoblue

Mezzoblue - screenshotTra i siti che seguo ogni giorno c’è Mezzoblue di Dave Shea, ed ho avuto una bella sorpresa quando ho scoperto la nuova versione (la 6), lanciata in questi giorni.

In questi casi un’immagine può dire molto più di mille parole, se non avete ancora visto il sito vi consiglio di visitarlo per farvi un’idea della nuova grafica.

Mettendo però da parte il puro lato estetico, la novità più grande è rappresentata dagli archivi e da come sono strutturati. Molto semplicemente, gli articoli non sono raggruppati nella classica suddivisione mensile, ma pur mantenendo un ordine cronologico vengono accomunati in gruppi dal numero di elementi variabile. Ogni gruppo ha un’unica immagine come tema, imitando la copertina di una rivista.

Un’idea semplice ma allo stesso tempo geniale, era ora di vedere qualche nuova soluzione! Tra l’altro ad ogni immagine è abbinato uno schema di colori diverso, che ovviamente dipende dalla fotografia utilizzata.

Il lato negativo di questa organizzazione, come fatto notare dallo stesso Dave Shea, è che potrebbero esserci problemi di riconoscibilità del “marchio”, visto che i colori cambiano nel tempo.
Comunque non un gran problema in questo caso, prima di tutto perchè è un sito personale e non quello di un’azienda.

Ultima nota: chi ancora utilizza IE6 potrebbe avere delle brutte sorprese visto che il redesign di Mezzoblue fa largo uso di png trasparenti. Scelta importante questa, dettata dalla necessità di pubblicare entro l’anno la nuova veste grafica. Se però i guru del web design iniziano a trascurare (anche temporaneamente) Internet Explorer 6, forse è davvero il tempo di cambiamenti, ricordando che è uscito IE7.

Web Design 2007: previsioni per il futuro

Il 2006 sta arrivando al termine, e come è giusto che sia iniziano ad uscire in rete alcune previsioni per il 2007 di web designers e sviluppatori.

Ho letto un interessante articolo a riguardo, che si sbilancia su 5 argomenti, dall’accessibilità all’utilizzo di AJAX nelle pagine web. Questa una sintesi, non necessariamente tradotta dall’originale:

1. AJAX e DHTML saranno usati con cautela

A quanto pare ci si sta rendendo conto che se si è capaci di fare una cosa, non è necessario integrarla per forza nei propri lavori. Nel 2007 dopo la grande crescita di pagine in AJAX, contenuti dinamici, e javascript in abbondanza, ci sarà probabilmente un passo indietro. Meglio ottimizzare le pagine ed evitare l’integrazione di script che pesano più del necessario.

2. Addio angoli arrotondati

Previsione abbastanza azzardata questa.. che vede l’abbandono dei famosi rounded corners per concentrarsi su altri elementi grafici: linee, texture e contrasto.

3. Accessibilità per tutti

Internet continua a crescere, ed in questo processo è evidente l’attenzione sempre maggiore verso gli standard web e l’accessibilità. Nel 2007 queste tematiche avranno ancora più importanza.

4. Diffusione di CSS2 e CSS3

Internet Explorer 7 inizierà a diffondersi, e questo aiuterà l’utilizzo nei CSS di regole e selettori fino ad oggi poco supportati. Non si arriverà probabilmente a sfruttare le potenzialità dei CSS3, ma IE6 resterà solo su una minoranza di computer.
Obbligatorio offrire un’esperienza migliore a tutti gli utenti che navigano con Firefox, Opera, Safari e IE7.

5. Nascita di nuovi talenti

Previsione abbastanza scontata: è facile immaginare la nascita di nuovi talenti nell’ambito del web design, degli standard web e della programmazione. Anche in questo campo, probabilmente arriveranno novità dall’Asia.

Queste sono le previsioni di Ted Drake, pubblicate sul suo blog. Interessanti, anche se quella sugli angoli arrotondati mi lascia abbastanza dubbioso.. sicuramente è un’opinione basata su gusti personali.

E voi quali idee avete sul 2007 che arriverà? Io ritengo molto verosimile la prima previsione: è ora di abbandonare librerie javascript che pesano anche più di 200kb!

Grafici e programmatori: collaborazione difficile?

Prendo spunto da un recente articolo sul blog di html.it per affrontare l’eterna questione: come dovrebbe essere il rapporto ideale tra grafico e programmatore?

Prima di tutto va tenuto presente che la figura soprannominata negli anni ’90 web master sta diventando sempre più rara.
Ovviamente non parlo di siti amatoriali, ma è un dato di fatto come per avere buoni risultati sia necessario prendere il meglio delle varie specializzazioni: i singoli che sanno eccellere in tutto sono veramente pochi.

Sono però frequenti casi in cui le due realtà non riescono a comunicare tra loro in maniera efficace, complicando la realizzazione di un sito e facendo lievitare le spese. Questo spesso succede quando il creativo ed il coder non hanno la capacità di confrontarsi, e pretendono di restare sulle loro posizioni senza venirsi incontro.

Ci sono alcuni punti che andrebbero sempre tenuti presenti in determinate circostanze:

  • la diplomazia è essenziale, così come il rispetto del lavoro altrui
  • sono sempre necessarie delle conoscenze di base da entrambe le parti, per potersi confrontare con cognizione di causa
  • il dialogo deve essere costante, prima e durante la realizzazione dei compiti

Il caso peggiore che può capitare è un grafico che realizza un psd senza mai parlare con chi costruirà il sito: a quel punto, continuando con la peggiore ipotesi, il programmatore tirerà fuori un prodotto finale che non rispetta le bozze grafiche e non soddisfa nessuno, cliente compreso.

Questo è ciò che posso dire con la mia relativamente breve esperienza, visto che spesso mi trovo a realizzare siti accessibili in xhtml e css partendo da template realizzati da agenzie grafiche.
E voi avete esperienze a riguardo?
Vi avviso che non ho voluto complicare troppo la questione parlando anche di attività come l’information e l’interaction design!

Background sfumati con una sola immagine

Il 13 Novembre è stato pubblicato su A List Apart un articolo su come creare sfondi sfumati tramite i CSS, utilizzando un’unica immagine di sfondo.

L’idea è interessante, ma si basa su un presupposto: è necessario utilizzare un png trasparente per ottenere l’effetto desiderato. Ho già parlato in passato dei problemi che esistono attualmente con questo tipo di immagini, ed infatti la trasparenza non è supportata da Internet Explorer 6.

L’autore dell’articolo presenta una soluzione al problema basata sul filtro AlphaImageLoader, ma si dimentica di dire un particolare importante: in questo modo il CSS non sarà valido.

Discutibile anche la scelta di inserire l’immagine trasparente direttamente nel codice per poterla ridimensionare. In questo modo l’html prodotto ha un elemento presentazionale al suo interno che non ha senso di trovarsi lì. Io avrei fatto tutto dal foglio di stile, ripetendo l’immagine in orizzontale con un semplice repeat-x:
background: url(grad_white.png) repeat-x;
Riassumendo, l’idea è molto interessante e sarà valida con IE6 fuori circolazione, ma non mi sentirei di consigliare questa tecnica così com’è, applicando almeno le modifiche citate.

Intervista su Blographik.it

IntervistaSegnalo la pubblicazione della prima parte di un’intervista al sottoscritto, che è stata realizzata pochi giorni fa e dalla quale spero siano usciti dei buoni spunti.

Tra i vari argomenti trattati, si parla di questo sito, di me, e di fonti di ispirazione. Seguirà a breve la pubblicazione di una seconda parte.

Trovate tutto su blographik.it, un blog che si occupa di grafica e web design, fornendo spesso suggerimenti utili e segnalazioni interessanti.

Buona lettura!