Di cosa parleremo

La presentazione si divide sostanzialmente in due parti. Nella prima parte definiremo la creatività applicata al webdesign, e fare il punto su alcune tecniche creative che hanno portato i CSS al livello attuale.

Nella seconda parte parleremo di SCAMPER, una tecnica creativa e di come sarebbe stata utilissima per generare moltissime tecniche creative di webdesign.

Cos'è la creatività nel webdesign?

Definire la creatività è un compito difficile, viene spesso associata all'aspetto visivo e artistico di un sito nel suo complesso. Per come la vedo io, la creatività è l'abilità di ottenere risposte e soluzioni a questioni di sviluppo. In particolare, essere creativi significa trovare:

Questo sia per l'aspetto artistico/visivo che, soprattutto, quello tecnico/implementativo.

Il vero senso della creatività

Se è impossibile, fallo. Se non lo fai, non esiste.

Paul Arden

La timeline della creatività nel webdesign

timeline della creatività

Le idee creative nel webdesign sono destinate a diminuire?

Alcune considerazioni sul webdesign

I picchi di creatività dei CSS

Sono quelle idee che offrono soluzioni pratiche e innovative a questioni di design e/o sviluppo. Sono idee che migliorano il modo di fare webdesign.

Oltre a teoria, proprietà e valori ci sono alcune tecniche la cui conoscenza è fondamentale per poter sviluppare con i CSS. Eccone sei che hanno davvero fatto la storia.

Box model hack

Ideato da Tantek, il box model hack è un modo per correggere l'implementazione errata del box model di Internet Explorer 5 e 5.5. Ha aperto la strada a moltissimi altri hack. In realtà non c'è una logica dietro, ma solo un processo a tentativi. O meglio... una logica negli hack c'è, ed è la logica dei browser.

box model

Image Replacement: la FIR e i suoi derivati

Sembra sia stata pensata per CSS Zen Garden, e offrire la possibilità di rappresentare visivamente un'informazione testuale svinoolando l'immagine dal contenuto. La prima in ordine di tempo è la FIR, ideata da Todd Fahrner, a cui ne sono seguite molte altre.

image replacement

Faux Column: effetto tabella con il background

Una delle limitazioni dei CSS è che non è possibile ottenere due div affiancati della stessa altezza e che si adattano al contenuto. A fornire una soluzione ci ha pensato Dan Cederholm: se non è possibile farlo, basta almeno darne l'impressione attraverso le faux columns.

image replacement

Fast CSS Rollover

Ideata da Pixy, il fast CSS rollover è stata una delle rivoluzioni del webdesign. Ha infatti tagliato fuori una buona parte del DHTML e uno degli utilizzi più comuni del javascript: il rollover. Basta combinare le due immagini di sfondo in una sola, e giocare con la posizione del background sulla fase :hover dei link per ottenere un rollover istantaneo interamente basato sui CSS.

rollover

Contenere i float senza markup aggiuntivo

La proprietà float è essenziale nella progettazione dei CSS. Un problema comune è che a volte elementi float sbordano dal loro contenitore. La soluzione c'era, ma richiedeva markup aggiuntivo. Ad ovviare il problema ci ha pensato John Gallant con la Easy clearing of Floats.

esempio float

Margini negativi per il layout

Poter disporre elementi float in qualsiasi ordine e realizzare layout con i float fino ad allora impensabili: le basi le messe Ryan Brill con l'articolo sui margini negativi. La tecnica è stata poi espansa con le any order columns di Alex Robinson.

esempio margini negativi

Parte II: la checklist creativa

Elaborata negli anni '60 da Alex Osborn, il padre del brainstorming, la checklist creativa è un approccio sistematico per elaborare nuove idee o migliorare idee esistenti. La checklist è stata poi formalizzata in acronimo da Bob Eberle negli anni '70: il risultato è SCAMPER.

SCAMPER, l'acronimo

Ogni lettera che forma l'acronimo SCAMPER suggerisce un approccio, un metodo di elaborazione di idee e concetti.

S = substitute
C = combine
A = add, adapt
M = magnify, modify
P = put to another use
E = eliminate
R = rearrange, reverse

SCAMPER, un esempio pratico

SCAMPER può essere applicato con successo a qualsiasi concetto, idea o prodotto. Per esempio... una penna:

S = sostituire il materiale?
C = combinare con un ventilatore?
A = aggiungere una lampadina
A = adattare a scrivere sott'acqua?
M = (magnify) Una penna a lunghissima durata ma senza refill?
M = modificare la forma?
P = (put to another use) una penna che diventa un bracciale di moda?
E = eliminare l'inchiostro, il tappo
R = risistemare: una penna come estensione dell'indice
R = (reverse): è il foglio che scrive, non la penna

SCAMPER applicata al webdesign

A parte i picchi di creatività, sono molte le idee che hanno uno spiccato senso creativo. Spesso quando ci troviamo di fronte a una tecnica nuova ci chiediamo: Come ha fatto l'autore ad arrivarci? Perchè non ci ho pensato?

Anche se difficilmente potremo sapere come gli autori sono arrivati a idee così brillanti, possiamo presumere che SCAMPER le avrebbe potute suggerire.

S (substitute):

L'Image replacement di cui abbiamo già parlato è nato per sostituire un'informazione testuale con l'equivalente grafico, lasciando il markup intatto.

image replacement

C (combine):

Le Sliding Faux Columns combinato le note faux columns con le sliding doors, ottenendo le false colonne in percentuale.

immagine per le sliding faux columns

A (adapt):

Le note a piè pagina nell'editoria tradizionale sono state adattate anche sul web, in soluzione come i tooltips, le sidenotes e le footnotes.

tooltips, footnotes e sidenotes

M (modify):

Il noto LightBox per avere ingrandimenti nella stessa pagina può essere interpretato come una modifica di contesto: l'ingrandimento dall'esterno della pagina (la classica popup per intenderci) è stato spostato al suo interno.

immagine di lightbox

P (put to another use):

Eric Meyer sviluppò Pure CSS Menus adattando il meccanismo di rollover di Pure CSS Popups.

immagine di pure CSS Popups e pure CSS Menu

E (eliminate):

Ho sviluppato i Nifty Corners cercando una soluzione che eliminasse la necessità di markup aggiuntivo e delle immagini.

immagine dei Nifty Corners

R (rearrange):

I div sono una limitazione? TILT è una soluzione che permette di "intabellare", quindi risistemare con le tabelle, una pagina basata sui div grazie a javascript.

immagine di Tilt

R (reverse):

Ottenere l'effetto di strisce diagonali di qualsiasi colore senza dover aprire ogni volta un programma di grafica? In SuperStripes, la parte colorata dell'immagine è invertita: ovvero quella bianca. Il lavoro lo fanno le strisce trasparenti grazie a un colore di sfondo.

immagine delle superStripes

Conclusioni e approfondimenti sul webdesign

Allo stato attuale, una buona conoscenza operativa dei CSS implica non solo la conoscenza di proprietà e valori e teoria: ci sono alcune tecniche davvero indispensabili. Oltre alle tecniche citate, la sezione CSS di HTML.it presenta molte tecniche e approfondimenti.

Conclusioni e approfondimenti sulla creatività

Abbiamo visto un approccio pratico alla creatività orientata al webdesign attraverso SCAMPER. Ma la creatività può esserci d'aiuto in moltissimi campi di applicazione, e perchè no, nella vita di tutti i giorni. La creatività si può imparare o quantomeno migliorare... se l'argomento vi interessa ecco alcune libri che posso suggerire: