Design versus Art

Ho frequentato un istituto che trattava arte applicata iscrivendomi però al corso di Comunicazione. Forse è per questo motivo che per molto tempo ho avuto le idee confuse su quale era il limite tra arte e design. In effetti per molti aspetti le due cose si intersecano, almeno lo hanno fatto per un periodo storico, dove i più creativi erano gli artisti a cui veniva attribuito il ruolo di designer. Personalmente sono molto felice che lo abbiano fatto perché così possiamo ammirare pezzi unici di architettura ed accessori.

Il punto su cui però interrogarsi è uno solo: il design deve tendere al bello o al funzionale? Quale vende di più?

Avete presente l’Art Noveau? Bellissima, sinuosa in tutte le sue linee ricurve e dettagliate, con i suoi bordi netti in stile fumetto pop, i suoi ori scintillanti e le sue architetture che si ispirano alla natura e dipinti giapponesi. Su Klimt ho scritto un tema e realizzato (in un totale delirio cosmico di onnipotenza) una sua opera in creta. Mia mamma a casa aveva attaccato dei quadretti con i manifesti di Steinlen, Mucha e Lautrec. Che colori, che tratto. Forse anche io un giorno potrò fare il disegnatore di pubblicità come loro, mi dicevo.

Ma non si trattava di design, erano solo degli artisti che disegnavano poster diventando illustratori.

Avete presente Sottsass? La megafigata dello specchio Ultrafragola, la libreria Carlton che tutti hanno desiderato almeno una volta nella vita? Come vorrei poterli mettere in casa..

Ecco, a prescindere dai propri gusti, questo non è design anche se l’ideatore è un designer.

Partiamo dalle basi.

L’artista elabora un qualcosa che è per le masse. Il designer anche.

L’artista crea dei pezzi unici per soldi. Il designer anche.

L’artista è sensibile ai movimenti sociali del suo tempo. Il designer anche.

L’artista elabora qualcosa che gli viene dalle viscere a proprio sentimento, con la tecnica che più lo aggrada. Il designer elabora qualcosa che deve rispettare determinati standard sia materialmente che strutturalmente.

Per esempio non si può costruire un tavolo di carta velina perchè non potremo mangiarci. Questa è una licenza poetica che si può permettere l’artista per trattare un tema a lui particolarmente caro. Il designer invece può pensare a realizzare un tavolo leggero e resistente che può cambiare misura per le più disparate esigenze dell’acquirente.

L’artista crea nelle persone interrogativi. Il designer risponde alle domande dei più esigenti.

Il design visivo per le pubblicità non dovrebbe costruire troppi interrogativi intorno alla sua funzione. La comunicazione deve essere veloce, colpire diretta senza far perdere lo spettatore nella foresta delle informazioni. Le persone leggono le immagini dalle auto, scorrendo le riviste e i device .

Al centro di una folla di gente che parla, solo un megafono viene ascoltato da tutti.

Ci sono un bel pò di parole che se pronunciate in associazione con altre possono farti sentire migliore nell’impiego che svolgi. Alcune di queste appartengono alla categoria dei designer e vengono usate a sproposito per una moltitudine di altre professioni.

Per come la intendo io, per tutte le domande che mi sono fatto e le relative risposte a cui sono arrivato, il design è quella particolare invenzione che migliora la vita delle persone, non la rende solo più bella e alla moda.

Fare design è un qualcosa che richiede conoscenza del prodotto che deve essere sviluppato. Per capire se un vino è buono o meno se ne deve aver provati altri e bisogna sapere quali sono le caratteristiche che lo rendono un vino di qualità. Ci può piacere anche il vino in tetrapak, ma non possiamo dire di essere dei sommelier.

Stay Hungry Stay Responsive

Darwinismi Digitali

Praticamente tutti i clienti al giorno d’oggi richiedono una versione mobile del loro sito internet. I contenuti multimediali devono adattarsi a molti device e molte strutture: iphone, iPad, blackberry, netbook, kindle ed ogni anno esce qualcosa di nuovo. Nei prossimi 5 anni ci sarà il bisogno di ripensare il design per molte altre invenzioni.

Quando venticinque anni fa fu inventato il web si poteva navigare attraverso queste “informazioni fluide” per mezzo di testo e iperlinks.  Poi sono arrivate le immagini, i sistemi integrati(embedded), iframe e poi i video fino che tutto è stato tradotto in CSS e fixed widths. Con l’avvento del responsive design siamo tornati alle informazioni fluide, ma con un bel po’ di elementi interattivi.

La necessità di adattamento è, come per le specie viventi, una priorità relativa alla sopravvivenza. Se si vuole avere un ritorno monetario o di pubblico dobbiamo pensare in larga scala ed essere pronti a modificare la nostra visione. Nel campo del web design e dello sviluppo, stiamo arrivando velocemente al punto in cui diventerà impossibile tenersi al passo con nuove risoluzioni e nuovi device, pensiamo ad i vari orologi e relative applicazioni.

In molti casi creare una versione web per ogni formato e dispositivo è praticamente impossibile, per non dire inutile.

Saremo mai pronti a sopportare le conseguenze della perdita di visitatori su desktop a beneficio di un guadagno di utenti su mobile? C’è forse una soluzione?

Ethan Marcotte, il web designer che ha inventato (come scrive sul suo sito) il termine “responsive web design” ed che è “ancora sconvolto da come l’idea sia stata recepita”, ha scritto un libro a riguardo che porta come titolo l’omonima definizione coniata.

Questo l’articolo che lo ha reso Mr. RWD: fluidgrids

Da Grande voglio fare il Responsivo

Il Responsive Web Design (RWD) è quel dogma che suggerisce di sviluppare delle soluzioni che rispondano ai comportamenti dei visitatori e alle condizioni basate su misura dello schermo, piattaforma e orientamento. Nella pratica si tratta di un mix tra griglie flessibili e layout ridimensionabili conditi con delle media query CSS che riconoscono il dispositivo e permettono ai contenuti  di adattarsi. Così quando l’utente si sposterà da lpad ad iPhone, il sito si adatterà automaticamente in risoluzione, dimensione delle immagini e script. In parole povere si crea la tecnologia amica che risponde in automatico alle preferenze dell’utente.

Questo elimina tutta quella necessità alla pogettazione di design dedicati, snellendo di gran lunga la fase di sviluppo e creazione.

Il signor Morten Hjerde ha calcolato che lo schermo più grande su cui visualizzare un contenuto è 23 volte più grande rispetto quello piccolo.Un bel range con cui doversi confrontare!

Ma la parola responsive design non tratta solo risoluzioni di schermi ed immagini regolabili, piuttosto riguarda un nuovo modo di intendere e progettare il design.

Per capire di cosa stiamo parlando ci viene in aiuto questo fantastico sito!

Mi viene in mente la parola tascabile. Quei gesti che facciamo inconsciamente quando stiamo sfogliando un quotidiano al bar, quando in vacanza pieghiamo la cartina, quando sul prato pretendiamo di tenere il libro con una mano perchè l’altra sta sotto la testa. Il sito del film The Forecaster rende benissimo l’idea delle immagini di cui parlavo prima, trasposta in digitale.

Per quello che riguarda il design di immagine, ovvero la costruzione di brand identity, loghi e quant’altro, la parola responsive si declina nella ricerca di una comunicazione calcolata al millimetro, che diventa il vestito sartoriale cucito ad-hoc sul cliente.

Le griglie diventano i fondamenti del brand, il layout l’immagine di campagna e il css sarà la strategia di comunicazione.

Brand identity e linee guida

Per sviluppare un progetto di successo, che esso sia digitale o analogico, è importantissimo definire un’art direction precisa, dettagliata e, soprattutto, ben documentata. Andare da un’agenzia di comunicazione e chiedere semplicemente la realizzazione di un logo, senza nient’altro, è uno degli errori più grossolani che un’azienda, un brand o una startup possa commettere.

Per riuscire ad affermare l’identità di un marchio, la brand identity appunto, è necessario un accurato studio e documentazione della filosofia e del DNA del cliente, riuscendo così a fornire tutti gli strumenti necessari per la declinazione sul maggior numero possibile di piattaforme.

Sviluppare le linee guida di una brand identity

Un’art direction è ben riuscita quando tutto il team di lavoro (compreso il cliente stesso) riescono a seguire un filo conduttore preciso e definito, in modo che ogni tassello si incastri alla perfezione per far sì che l’immagine più ampia del brand, o di una campagna pubblicitaria, sia ben definita e ordinata.

Questo può avvenire grazie a delle linee guida dettagliate e mirate rispetto all’obiettivo prefissato: nel web, con tutte le piattaforme di condivisione in circolazione, GitHub in primis, possiamo andare a trovare varie di queste UI guide di alcuni dei brand più famosi, come Google, Sky, DropBox, FaceBook e tanti altri… Andiamone ad analizzare alcune insieme:

Material Design Guide Lines by Google

Il Material Design di Google è forse l’esempio più famoso di UI guide del web design: un’esaustiva guida divisa per capitoli descrive, pixel per pixel, il comportamento di ogni elemento dell’interfaccia, dall’aspetto delle ombre, alle animazioni, fino ad arrivare ad una palette colori studiata fin nei minimi dettagli, per fornire tonalità di colore in grado di essere abbinate sempre perfettamente tra loro.

Material Design

Sky Toolkit

Sky mi ha letteralmente stupito con il suo Sky Toolkit, fornendo una guide line accurata e completamente Open Source, in grado di permettere ad ogni designer che voglia produrre un progetto sotto il loro brand di avere tutto il materiale e le conoscenze necessarie per svilupparlo al meglio: file nativi di Sketch (ormai diventato il software per eccellenza per il web design), esempi di impaginato, grid system, hero e tutto il resto… Un vero e proprio framework insomma, niente da invidiare al buon vecchio BootStrap! Il tutto a portata di fork su GitHub.

Sky Toolkit

Brand Resource Center

RAD Blog - Facebook Guidelines

Facebook scende un po’ meno nel dettaglio con il suo Brand Resource Center, scegliendo di non fornire codici per sviluppare risorse ma propone due macro aree: guidelines e assets, il primo con tutte le classiche istruzioni da manuale di stile, su cosa fare e non fare per rispettare le regole della loro brand identity; il secondo fornisce svariati file scaricabili come:

  • Logo del brand in vari formati
  • Icone del like e delle reazioni
  • Template di pagina delle varie viste del social network
  • Loghi secondari del gruppo Facebook

Facebook Brand Resource Center

MailChimp UX

Rad Blog - MailChimp UI

Personalmente ho sempre ammirato molto la User Experience e la UI di MailChimp, uno dei servizi online di invio newsletter più famosi al mondo: con le illustrazioni della scimmia di Jon Hicks che ti guida alla creazione delle mail, l’esperienza utente è probabilmente una tra le più soddisfacenti che abbia avuto modo di utilizzare. Anche se l’aspetto è molto giocoso e irriverente, dietro si celano delle UI guide line molto rigide e ferree, che potete liberamente osservare nella documentazione ufficiale.

MailChimp UX

BCC GEL Framework

RAD Blog - BCC GELL Guide Lines

Andiamo adesso a scoprire un brand più istituzionale di quelli sopra citati: il framework della BCC, denominato GEL che sta per Global Experience Language.

GEL is how we design, both practically and philosophically. The GEL Guidelines help our teams assemble online services, be they apps, websites or games, whilst our Design Principles underpin our user-centred approach.

GEL è il framework su cui i designer della BCC basano tutti i loro progetti e non comprende solo delle linee guida strutturali ma anche dei comportamenti etici e filosofici da tenere di conto.

BCC GEL

La UI Guide Line di RAD: Framaework

Beh pensavate che RAD non volesse entrare a far parte di questa lista? Anche noi possediamo un nostro framework interno, denominato Framaework, il quale ci permette di sviluppare i progetti in modo efficiente e performante: assicurando per i nostri lavori (e quelli dei nostri clienti)  standard qualitativi sopra la media fin dalle fondamenta. Per quanto riguarda la brand identity invece, ogni progetto sarà diverso dall’altro, per questo Framaework ha l’interfaccia più neutra e minimale possibile: consentendo al nostro team di creativi di poter definire la migliore identità possibile per ogni esigenza.

Framaework CSS

Contattaci subito per un’accurata analisi e la definizione di una brand identity 3.0 in grado di promuovere il tuo brand e farlo risaltare rispetto ai tuoi competitors!