Atomic design

Living Style Guide: nuove prospettive

Le guide di stile servono davvero? Mantenerle aggiornate automaticamente è la vera sfida per il prossimo futuro.

Sono ormai passati i tempi in cui bastava un semplice set di elementi grafici ed un manuale di stile per definire l’identità di un brand. Le possibilità a disposizione sono sempre di più e sono aumentati i canali utilizzabili: mobile, tablet, desktop, app…

In uno scenario di questo tipo è indispensabile parlare di linee guida e guide di stile, sapere quando utilizzarle, e capire come si sta muovendo il mondo dello sviluppo per rimanere al passo con i tempi.

Continua a leggere Living Style Guide: nuove prospettive »

Quando il redesign di un sito non funziona

Il caso di CSS3.info e della sua nuova grafica.

CSS3.info è uno dei siti da seguire per chi vuole rimanere aggiornato sulle ultime novità dei CSS3. Diversi mesi fa ha cambiato proprietario, e come era lecito aspettarsi è arrivato il momento del redesign del sito. Niente di strano, se non fosse che la nuova grafica dopo due settimane dal lancio ha raccolto un centinaio di commenti, quasi tutti negativi.

Quando viene pubblicata la nuova versione di un sito le critiche non mancano mai: ogni cambiamento spaventa. Basti pensare a quello che successe con il redesign di Facebook. In questo caso però il contenuto dei commenti non lascia dubbi: c’è qualcosa che non va, e molti di questi pareri sono ben motivati.

Scelte grafiche sbagliate

L’obiettivo dichiarato dal proprietario è quello di avere una grafica più professionale, pagine più leggere ed una nuova navigazione. Se per gli ultimi due punti l’obiettivo è stato raggiunto, le scelte di design si sono rivelate decisamente sbagliate.

Essendo un sito frequentato in buona parte da web designer, basta scorrere i commenti per trovare alcune critiche sensate, come:

  • colori male abbinati (testo blu su sfondo nero)
  • design troppo piatto
  • header vuoto
  • ombreggiature usate senza criterio

Il confronto con il passato è impietoso: pur non essendo straordinario, il precedente layout era gradevole e chiaro. Inserire un vecchio screenshot nel post che annunciava la nuova versione è stata decisamente una mossa suicida.

L’errore più grave è stato commesso cercando di utilizzare ovunque proprietà dei CSS3 solo perché sono l’argomento del sito. Avere la possibilità di utilizzare una feature non significa che questa debba essere per forza introdotta, anzi.

Versione beta sì, ma senza esagerare

Un altro problema, che evidenzia una gestione decisamente poco seria, è dato dalla prematura messa online di un layout dove mancano totalmente alcuni elementi fondamentali.

Nel momento in cui scrivo manca un box di ricerca, il footer del sito è vuoto, e diverse pagine hanno ancora un aspetto approssimativo.

Non c’è niente di male nel pubblicare un sito nella sua versione beta, magari facendo delle correzioni anche grazie alle segnalazioni dei visitatori, ma c’è comunque una bella differenza tra un design perfezionabile ed uno approssimativo.

Quali sono i vostri pareri sul nuovo CSS3.info? Nonostante tutto, questo caso può servire come insegnamento per il futuro: sicuramente ricorderò esempi come questo per evitare di commettere gli stessi errori.

Regali di Natale: alcune idee interessanti

Qualche regalo utile per geek ed appassionati di tecnologia.

Dopo i suggerimenti degli anni scorsi, torna l’appuntamento con il post dedicato ai regali di Natale. Ho riunito alcune idee originali, sperando possano tornare utili a qualcuno: non sono oggetti per tutti, ma potrebbero fare felici molti geek.

GelaSkins

Gelaskins

Cover di tutti i tipi, realizzate da più di 100 artisti, per computer portatili, iPhone, Blackberry ed iPod. Alcune sono più vistose, e sinceramente non so se sarei disposto a coprire un MacBook con una pellicola così appariscente, ma quelle per smartphone sono veramente belle.

Sito web: GelaSkins

T-Shirt: Binary Tree e Dexter

binary tree t-shirt e dexter t-shirt

Ho scelto due magliette tra le tante disponibili online: Binary Tree e Dexter. I siti di riferimento spediscono anche in Italia, ed hanno diversi altri modelli interessanti.

Retro Floppy Disk Notebook

Floppy Notebook

Il nome dice tutto: un semplice blocco note con la forma di un vecchio floppy da 3.5”. Per nostalgici.

Retro Floppy Disk Notebook

Drobo

Drobo

Drobo è una soluzione interessante (ma non altrettanto economica) per il backup dei propri dati. E’ un hub in cui possono essere inseriti fino a quattro hard disk SATA da 3.5”: grazie ad una soluzione proprietaria chiamata BeyondRAID garantisce la sicurezza dei dati anche in caso uno dei dischi interni si rompa. Può essere collegato ad un computer tramite Usb 2.0 o Firewire 800.

Data Robotics: Drobo

My Book World Edition

Mybook World Edition

Questo è stato un mio recente acquisto: il Western Digital My Book World Edition è un hard disk di rete, che collegato tramite cavo ethernet al router permette di essere letto e scritto da tutti i computer della casa. Lo consiglio come soluzione alternativa per chi ha bisogno di un disco di backup. Ha anche alcune funzioni supplementari interessanti, come la possibilità di programmare dei download gestiti automaticamente dal disco: basta fornirgli l’url del download e scaricherà il file senza bisogno di lasciare il computer acceso. I file possono essere letti anche in remoto grazie al servizio MioNET di Western Digital.

Western Digital My Book World Edition

Sony Reader Pocket Edition

Sony PRS-300

Questo Natale gli eBook reader sono tra gli oggetti tecnologici più chiacchierati: basta seguire le discussioni su Friendfeed per notare l’attenzione del mondo geek a riguardo. Uno dei più compatti è il PRS-300 della Sony, che però in questo momento non è ancora disponibile in Italia. Se andate all’estero, dategli un’occhiata: permette la lettura di praticamente tutti i formati conosciuti, compresi i .pdf, che possono essere caricati direttamente sul dispositivo.

PRS-300: Sony Reader Pocket Edition

Kindle DX

Il Kindle DX di Amazon

Parlando di eBook Reader, non poteva mancare il Kindle di Amazon. E’ sicuramente una soluzione più costosa, che ha dalla sua alcuni vantaggi come il grande schermo, ma anche dei difetti. Non è infatti possibile caricare file direttamente sul lettore, ma è necessario convertirli passando per Amazon.

Amazon Kindle DX

Videogames su Play.com

Play.com

Per chi ha una console, play.com è il sito da tenere sempre presente. In questo periodo le offerte prenatalizie non mancano: ci sono titoli in vendita a meno di 20€, ma anche le ultime novità intorno ai 50€. Batman: Arkham Asylum, Mass Effect, Dead Space, ed i più recenti Modern Warfare 2, Assassin’s Creed 2 e Dragon Age: Origins.

Sito web: play.com

Se avete altri regali da suggerire lasciate un commento, potreste aiutare qualcuno nella scelta. Trovate anche altre idee nei post dedicati ai regali natalizi del 2008 e del 2007.

Regali di Natale: alcune idee originali

Alcune idee regalo per il Natale 2008: tornano i suggerimenti un anno dopo le segnalazioni per regali geek del 2007.

Dopo aver dedicato nel 2007 un articolo ai regali di Natale per geek, quest’anno mi sembra giusto scrivere un altro post a tema. Se siete in cerca di idee e volete fare un regalo originale, potreste trovare qui ciò che fa per voi.

Here!

Idea originale disponibile sul sito Fred, dove troverete molti altri oggetti fuori dal comune. Questo è un attaccapanni a forma di freccia, che ovviamente indica il punto dove appendere la vostra giacca.

Help!

Un semplice tappo per lavandino, che ha una forma decisamente fuori dal comune. Anche questo disponibile su Fred.

T-Shirt su 10tees.com

Se siete in cerca di una maglietta originale, in rete ci sono innumerevoli siti da esplorare. 10tees raccoglie le migliori magliette disponibili su questi siti in diverse categorie, passando dalla tipografia a Star Wars. Se non vi bastassero questi suggerimenti e cercate un regalo per un web designer, potete sempre acquistare la maglietta di Carsonified come ho fatto io.

On/Off Mug

La tazza On/Off disponibile su Charles & Marie cambia stato quando vengono versate delle bevande calde al suo interno. Decisamente geek.

Lego Poster

Mike Stimpson è un fotografo professionista che si diverte a ricreare ambientazioni con i mattoncini Lego. Sul suo sito trovate delle fantastiche composizioni in formato poster che possono essere acquistate, ispirate da famosi scatti fotografici.

Altre idee regalo originali

idee-regalo-originali

Se siete ancora indecisi, una raccolta di oltre 200 idee regalo è quello che fa per voi. Su questa pagina trovate di tutto: dalle esperienze agli oggetti fisici, passando per i regali personalizzati: l’ispirazione è dietro l’angolo, basta scorrere le idee a disposizione.

Se avete altri suggerimenti scriveteli nei commenti, qualcuno in cerca di ispirazione per i regali natalizi potrebbe ringraziarvi!

Cambiamenti grafici su TomStardust.com

Ho appena aggiornato la grafica dell’header: si tratta di un cambiamento minore, ma avevo voglia di variare e ritoccare alcuni dettagli.

In questa nuova versione è sparita la mela del logo Apple, sostituita da un nuovo dettaglio grafico: l’ispirazione mi è venuta direttamente dallo shop online di A List Apart. Ho anche modificato il gradiente e l’effetto mouseover sul logo, che era fin troppo marcato. Spero che i nuovi ritocchi vi piacciano, come sempre sono aperto a critiche e suggerimenti.

Se mi seguite tramite il Feed RSS, collegatevi al sito per vedere il cambiamento!

L’icona per il salvataggio dei file deve cambiare?

Una riflessione sul design di interfacce e sull’icona del floppy disk, utilizzata per indicare il salvataggio.

L’attività di Interface Design è spesso trascurata, ma è uno dei passi essenziali da affrontare nella realizzazione di software e applicazioni web. Negli ultimi anni i software web-based hanno acquisito grande importanza, tanto da far presagire una sempre più solida integrazione tra desktop e internet.

Tra tutte le convenzioni utilizzate però, una sta ormai diventando obsoleta: quella del floppy disk per indicare il salvataggio di un documento. In questi giorni Positive Space ha sollevato la questione, affermando che è ormai ora di trovare una nuova soluzione: i dischi floppy stanno sparendo, e le nuove generazioni di utenti non avranno modo di capire a cosa faccia riferimento l’icona.

Premettendo che trovare una soluzione soddisfacente non è cosa facile, la stessa decisione di sostituire il floppy non è scontata. L’icona del salvataggio è ormai diventata un concetto astratto, al di là del significato materiale dell’oggetto rappresentato. La convenzione floppy = salva è ben radicata, e sostituirla con un altro tipo di supporto porterebbe ad affrontare lo stesso problema tra una decina di anni.

Voi cosa ne pensate? Avete delle proposte per cambiarla o preferireste mantenerla?

Ho fatto una ricerca su diversi set di icone esistenti, e spesso l’icona del salvataggio è assente, probabilmente perchè per le pagine web il download è più che sufficiente. Tutti i set che la possiedono però non osano utilizzare una simbologia differente, proprio ad indicare quanto sia forte l’attuale convenzione.

Nell’immagine è possibile vedere alcuni degli esempi che ho trovato, direttamente dai set di icone Milky, Oxygen, Function, Fugue e Diagona.

Se è vero che il floppy ormai è un oggetto obsoleto, cambiare l’icona di salvataggio non è detto che sia una scelta saggia nel design di un’interfaccia. Dite la vostra nei commenti, nuove proposte sono benvenute: la discussione può servire anche a rendersi conto se davvero esista un’alternativa valida.

Grunge: nuovo stile per il Web Design

Dopo la grafica Web 2.0, attira molte attenzioni il grunge style. Uno sguardo alla nuova tendenza con esempi e download.

Senza ombra di dubbio lo stile Web 2.0 è stato uno dei più seguiti ed utilizzati degli ultimi tempi. Riflessi, colori accesi, badge e quant’altro stanno ancora imperversando in rete, ma nuovi stili cercano di emergere per differenziarsi dalla massa.

Proprio tra questi c’è il Grunge style: il termine è difficilmente traducibile, ma è possibile riconoscerlo facilmente.

Cos’è lo stile Grunge

E’ caratterizzato da un look sporco, con irregolarità nelle illustrazioni e negli elementi che compongono le pagine. Spesso i colori sono scuri, ma ci sono anche delle eccezioni. In realtà non nasce oggi, ma diversi siti lo utilizzano già da tempo: basti pensare che questo post di Jason Santa Maria è del 2004.

Per un web designer, nonostante l’apparenza disordinata questo stile implica molto più lavoro ed attenzione ai dettagli. Servono ottime doti di fotoritocco e soprattutto equilibrio per non esagerare e rendere un sito caotico.

L’irregolarità va bene, ma non deve diventare un problema per l’utente: il primo obiettivo deve sempre essere una facile lettura ed una navigazione intuitiva.

Proprio questa difficoltà probabilmente impedirà allo stile grunge di diventare una vera e propria tendenza. Niente comunque vi impedisce di usarlo per ottenere un risultato originale e differente dagli altri.

Galleria Grunge

Ecco alcuni esempi. Cliccate sugli screenshot per andare ai siti relativi.

Matt Brett Darklight JUXT Interactive Bart-Jan Verhoef nYq Design Studio CSS Rockstars

Download e Risorse esterne

Senza dubbio uno dei punti fondamentali per questo stile è l’attenzione alla tipografia: da non perdere questa collezione di 63 font gratuiti in stile grunge.

Un’ottima guida, anche questa risalente a diverso tempo fa, è quella di Cameron Moll. Divisa in quattro parti, spiega anche come sfruttare al meglio Photoshop.

Immancabile la segnalazione di Smashing Magazine, che ha dedicato ben 2 articoli allo stile Grunge:

Infine se siete alla ricerca di altre icone, texture ed elementi grafici, vi segnalo questo sito.

99designs e la svalutazione del mercato IT

Un sito consente di avere lavori di design realizzati per 100$. Analisi del fenomeno e dei problemi del mercato IT, non solo in Italia.

99designs LogoNavigando in rete si fanno ogni giorno delle scoperte, quella odierna per me è stata 99designs. E’ un sito creato dai gestori di Sitepoint che permette di organizzare dei contest, stabilendo un compenso. I partecipanti sottopongono i loro lavori ed il creatore del concorso decide quale accettare, pagando la cifra stabilita.

Sembrerebbe interessante, se non fosse che la maggior parte dei lavori (soprattutto attività di logo design, ma anche layout per siti web) hanno compensi tra i 100$ ed i 200$, cifre veramente irrisorie soprattutto se pensate al cambio euro-dollaro.

A volte si incontrano clienti che per la realizzazione di un sito affermano “lo faccio fare a mio nipote.. se la cava con i computer e risparmio”, ma in quel caso il risultato sarà logicamente amatoriale. A questo target di clienti non interessa il lavoro di un professionista. Qui però il problema passa ad un livello diverso, perchè i risultati finali spesso sono buoni, ma ricevono un compenso non adatto.

Il punto cruciale è uno: il mercato è cambiato, non servono innovazione e grandi investimenti, ma nella maggior parte dei casi si scelgono le soluzioni più economiche. Ovviamente anche i gestori di 99designs ne sono consapevoli, ma finchè avranno partecipanti ai contest non ci sarà motivo per cambiare politica.

Proprio pochi giorni fa sulle pagine di questo sito è stato sollevato indirettamente il problema, nei commenti del contest per il logo di Kublai, che aveva un premio di 1000€. Se pensate che nel caso di 99designs ci sono lavori di buon livello realizzati anche per 100$, gli spunti di riflessione non mancano.

Ci sono stati diversi articoli sui problemi del mercato IT anche su Punto Informatico: uno dei più interessanti è del Novembre scorso, di Giuseppe Cubasia, che dice:

Per semplificare, il mercato dell’IT è diventato come l’IKEA.
Ne aprono sempre di più e sono sempre di più affollate perché la gente vuole soluzioni economiche, talmente economiche che se le monta da sola, magari male, consapevole che non è proprio quello che voleva, consapevole che tra pochi anni dovrà ricomprarle, però sono soluzioni economiche e che fanno (quasi) al caso loro.

Personalmente credo che il problema esista, ma debba essere valutato senza rassegnarsi. Se si hanno le qualità, trovare lavoro nel settore non è impossibile, l’importante è cercare negli ambiti giusti. Il sito amatoriale può essere fatto da più o meno chiunque, ma ci sono determinati progetti che necessitano di figure specializzate, ed è lì che si può fare la differenza.

Ci sarà sempre chi avrà bisogno di consulenti di accessibilità ed usabilità, che dovrà affidarsi ad un professionista per evitare problemi ed avere garanzie sia di qualità che di assistenza.

Voi cosa ne pensate? Aspetto i vostri pareri a riguardo, l’argomento è rilevante sia per chi lavora nell’ambito del web design, che più in generale nel mercato IT.

Layer Tennis, sfida tra designer

Grazie al blog di Veerle ho scoperto l’esistenza di una fantastica competizione chiamata Layer Tennis.

Cos’è il Layer Tennis?

E’ una sfida tra due designer in tempo reale: inizialmente l’evento riguardava solamente Photoshop, ma poi sono stati utilizzati anche altri software come Flash e After Effects. I due partecipanti si scambiano un file ripetutamente, ed ognuno ha 15 minuti di tempo per realizzare la sua parte e passarla all’altro, per 10 turni.

La cosa fantastica è poter seguire l’evento in diretta, con tanto di commento di un “presentatore”. A tempo scaduto viene aperta una discussione dove si decide il vincitore. E’ poi disponibile tutto l’archivio degli scontri avvenuti, ognuno con il dettaglio dei 10 turni.

Per farvi un esempio, ecco le prime due immagini dal match tra Kevin Cornell e Shaun Inman:

Layer Tennis - Kevin Cornell

Layer Tennis - Shaun Inman

Dalle passate competizioni ci si rende conto della bravura di certi personaggi, soprattutto considerando il poco tempo a disposizione.

Se siete interessati a dare un’occhiata, andate sul sito ufficiale del Layer Tennis. Gli scontri avvengono di Venerdì, alle 9pm ora italiana, e stasera la competizione è tutta al femminile: Veerle Pieters vs. Cindy Li.