Il web design è in continuo sviluppo ed evoluzione.
Le pagine web statiche dei nostri siti funzionano sempre meno.
Ormai non progettiamo più pagine, bensì sistemi di componenti.
I nostri progetti hanno bisogno di stare al passo con la rapida evoluzione dei device, che non mostra segni di rallentamento.
Senza dubbio il “vecchio processo di progettazione” va rivisto.
Agilità, collaborazione e adattabilità sono ora gli elementi chiave nel web design.
Inoltre, superfluo dire che il confine tra design e coding si sta assottigliando.
Mobile first
Per anni, “mobile first” è stato il motto di lungimiranti web designer.
Si tratta di un processo di progettazione che prevede lo sviluppo di un’interfaccia web partendo da semplici layout per schermi di piccole dimensioni, aggiungendo in seguito le complessità che accompagnano l’aumento dello spazio disponibile su schermo.
Poiché le vendite di dispositivi mobili superera quelle di PC e Mac, la fruizione di contenuti da mobile ha ufficialmente superato il desktop.
Mobile first sta diventando la norma.
A meno che non emergano situazioni specifiche e dati interessanti a confutare questa tesi, pensare mobile first ha più senso.
Pensare mobile first ha più senso.
È più facile aggiungere complessità a un progetto quando lo spazio sullo schermo aumenta, piuttosto che ridurre la complessità per schermi più piccoli.
In qualche modo, i layout del desktop sono sempre quelli che costruiamo per primi, mentre il layout mobile spesso appaiono come una versione rozzamente impilata del primo.
È ora di iniziare a progettare partendo dagli schermi di piccole dimensioni.
Un mattone alla volta
Il design è un processo cumulativo. Mi piace progettare aggiungendo mattoncini come stessi costruendo qualcosa, e non come spesso accade, buttando giù quelli che non ci stanno.
Una delle migliori analogie che ho trovato è l’atomic design, una metodologia che vede le cose attraverso combinazioni sempre più complesse. Funziona più o meno così:
- Decidere alcune combinazioni di tipografia, dimensioni e colori;
- Combinare queste scelte in qualcosa di piccolo come i campi dei moduli e le etichette;
- Montare i campi in qualcosa di più grande come un modulo di contatto;
- Posizionare il modulo di contatto in una pagina dei contatti, che si compone di un sacco di altri piccoli pezzi;
- Ripetere.
Non solo costruire con i “mattoni” è veloce e più facile che costruire da zero, è anche funzionale, in quanto il processo di progettazione ha come esito un layout perfettamente fruibile da mobile, tablet e desktop. Pensate a tutto quello di cui avete (e hanno i vostri utenti) realmente bisogno a ogni passo, e aggiungete mattoni quando ha senso.
Pensare oltre i breakpoint
Quando si parla di processi di progettazione web responsive, spendiamo un sacco di energia (e in questo periodo dell’anno anche sudore) nella definizione di breakpoint, senza considerare però la debolezza dei contenuti del nostro sito.
Quando possibile, bisogna progettare con contenuti reali, lavorando a stretto contatto con il reparto marketing il quale sarà in grado di aiutarci a prevenire brutte sorprese alla fine del lavoro.
In questo modo, progettando in ottica mobile first, anche il contenuto sarà in grado di cambiare: con l’aumento dello spazio disponibile, i titoli brevi potranno crescere, le foto si ingrandiranno e intere sezioni otterranno più spazio.
Lo so, starete pensando «facile a dirsi, probabilmente non hai mai dovuto progettare una pagina con questo, questo e quest’altro… e questo ancora».
Sono d’accordo con voi, ovviamente, nell’affermare che alcune aree richiedono (e meritano) maggiore attenzione, ma la mia regola generale è: non pensarci troppo.
Spesso una linea guida intelligente e una buona scelta stilistica è tutto ciò che serve per mantenere le cose “on-brand”.
Ma torniamo coi piedi per terra
Progettazione e prototipazione sono divertenti, ma arriva il triste momento di passare la palla ai nostri amici dev che, sono certo, sapranno sempre trovare qualcosa che non funziona.
Non sempre questo è negativo: a volte ci troviamo di fronte a problematiche o difficoltà che non erano neanche state prese in considerazione.
Personalmente mi innamoro facilmente dei miei progetti e non sto nemmeno a raccontarvi quanta fatica faccia a modificare alcuni elementi in seguito ad alcune critiche, ma un buon modo per misurare il livello di usabilità del proprio lavoro è quello di condividerlo su dispositivi reali con persone reali, per ottenere un buon feedback, anche a costo di rifare gran parte del lavoro.
Spesso, infatti, il nostro wireframe sembra bellissimo durante la fase di design, ma nel momento in cui viene testato su smartphone crolla il palco: pulsanti troppo piccoli, caratteri troppo grandi, spazi vuoti che monopolizzano l’attenzione e molto altro.
Il nostro web design ha bisogno di adattarsi e cambiare al più presto i requisiti di contenuto e business.
