Erano trend nel 2010 lo saranno ancora nel 2011

Il 2010 è stato un anno incredibile per i web designers:

  1. La realizzazione di siti web per i dispositivi cellulari è diventata una realtà stabile;
  2. L’uso della tipografia su web ha raggiunto nuovi livelli di sofisticazione;
  3. Nuovi linguaggi di programmazione hanno grandemente migliorato la creatività dei disegnatori web, senza compromettere la stabilità dei progetti.

In sintesi, è stato un anno in cui le cose si sono evolute molto velocemente, anche per gli standard di Internet.

Molte delle novità che il 2010 ha portato si assesterenno in questo appena nato 2011. Vediamo quali sono.

La morte del Fold

Il “fold” è quella linea immaginaria stabilita dal bordo inferiore dello schermo e che designa qual’è il contenuto visibile di un sito prima che un utente debba fare lo scroll della pagina.

Quello che abbiamo notato è questo fattore, che una volta condizionava moltissimo il disegno web, è diventato sempre meno importante fino a quasi essere irrilevante.

Perché. Perché non esiste più uno schermo standard. Ormai non si dobbiamo più aspettarci che gli utenti stiano utilizzando schermi di 19’’ con una risoluzione tra 1024×768 e 1280×700 pixels.

Gli schermi per PC ormai sono disponibili (e a buon prezzo) con ogni forma e dimensione; dagli iPhone a televisori LED con navigazione Internet integrata.

Ma non è solo la risoluzione che varia enormemente, è anche l’aspect ratio che varia ormai considerabilmente (addirittura su iPhone). Certo, i web designer sempre devono (e dovranno) porre i messaggi più importanti di una pagina nella sua parte superiore, ma con così tante e nuove opportunità a disposizione degli utenti non esiste più un altezza standard.

Web Design. Addio "below the fold"

Siti per dispositivi cellulari

Disegnare siti web pensando anche alla loro visione sui cellulari è qualcosa che ogni buon designer web fa sin dalla loro comparsa. Ma quest’anno si è vista una vera e propria esplosione di sotto-siti realizzati specificamente per poter essere visti sugli schermi dei telefonini. Dobbiamo ringraziare Apple e l’iPhone per aver dato inizio a questo trend. Ed è un trend che sicuramente sarà ancor più forte nel 2011, tanto che è difficile pensare quei siti importanti e con grande traffico di visite che ancora non hanno una loro versione mobile, non la abbiamo entro la fine del prossimo anno.

Quello che è più interessante a proposito degli schermi dei dispositivi celllari, è che costringono i disegnatori a essere creativi con molto poco a disposizione. Avere successo nel Mobile però non è così arduo come ci si può immaginare, sempre che si seguano alcuni principi base:

  • I links devono essere disegnati per un intorno touch
  • I testi devono essere leggibili o, comunque, efficacemente zoommabili.

Ecco qui alcuni esempi di siti Mobile.

Web Design: siti per dispositivi cellulari

Web Design: siti per dispositivi cellulari 2

Web Design: siti per dispositivi cellulari 3

Trend secondario: Siti ottimizzati per tablets

Come il 2010 è stato l’anno che ha visto la proliferazione di siti ottimizzati per l’uso su cellulari, è da aspettarsi che sempre più siti vedranno nascere una loro versione per tablets, ovvero disegnati specificamente per la visione su uno schermo tattile di medie dimensioni.

Il boom della Tipografia

D’accordo, immagino che si potrebbe correttamente fare questa constatazione ogni anno… ma nel 2010 abbiamo visto alcuni cambi di gran rilevanza nella tecnologia, che adesso fa sì che questa dichiarazione sia davvero giustificata:

1. Il grande sviluppo che ha avuto la tecnologia di sostituzione dei fonts;

2. L’ottima accoglienza di servizi “fonts as services”, in cui imprese terze offrono l’uso legittimo di fonts archiviati nei loro servers ai web designers, che li possono usare nei loro progetti.

Inoltre, possiamo affermare che i designers stanno diventando sempre più intrepidi con l’uso della tipografia, con nuovi disegni ogni giorno che passa e che rendono sempre più sfumata la barriera tra arte grafica tradizionale e web design.

Web Design: l'importanza della tipografia

Web Design: l'importanza della tipografia 2

Web Design: l'importanza della tipografia 3

Web Design: l'importanza della tipografia 4

Trend secondario: Siti ispirati alla stampa tradizionale

Questo fenomeno era già assai presente in questi ultimi due anni, ma è facile prevedere che sempre più siti tenderanno a replicare il disegno della stampa tradizionale, come riviste, posters, volantini, etc. etc.

L’influenza delle UI (User Interface) nel disegno web

Sicuramente scommettere un anno fa sull’enorme successo delle apps sarebbe stata una mossa vincente: apps per iPhone, apps per Android, apps per iPad, apps per Mac o PC Windows, web apps…

Questa frenesia per creare sempre nuove apps ha contagiato anche il mondo del web design in un modo davvero interessante: laddove un sito web visivamente sembrava, beh…, un sito web, adesso molto spesso sembra più una applicazione online. Tutto, finestre, menú contestuali, bottoni… sono stati introdotti nel disegno web per creare siti decisamente più usabili e naturali.

Web Design: l'influenza dell'interfaccia utente

Web Design: l'influenza dell'interfaccia utente 2

Web Design: l'influenza dell'interfaccia utente 3

Web Design: l'influenza dell'interfaccia utente 4

Il predominio dei layouts a griglie (grid layouts)

I layouts basati su un sistema di griglie non è nuovo, ma ciò che è nuovo è il fatto che sempre più web designers hanno deciso di abbandonare il classico layout web (header, body, sidebar, footer) per cercare nuove originali griglie.

Web Design: la griglia

Web Design: la griglia 2

Web Design: la griglia 3

Web Design: la griglia 4

L’uso di immagini enooormi.

Questo è un altro trend che già aveva fatto la sua comparsa prima del 2010, ma che durante quest’anno è diventato più che una sperimentazione isolata.

Le immagini di grandi dimensioni una volta erano una specie di tabù per i disegnatori ma, grazie alle migliori tecniche di ottimizzazione delle immagini, alla connessione a Internet più veloce e a metodi più intelligenti di caricamento, questi possono finalmente utilizzarle e dare ai loro siti un impatto visivo considerabile.

Adesso, però, più che semplici immagini enormi, quello cui stiamo assistendo all’uso sempre maggiore di fondi altamente illustrativi (e fotografici), che sono una parte dell’attuale esperienza d’uso del sito.

Web Design: usare immagini enormi

Web Design: usare immagini enormi  2

Web Design: usare immagini enormi  3

Web Design: usare immagini enormi  4

L’integrazione immersiva di Script (Sliders jQuery, etc.)

L’uso di plugins di programmazione erano solitamente frutto di un ripensamento da parte dei web designers: si finiva il mockup di una pagina e, poi, si rimpiazzava l’immagine usata con uno slider se si trovava un buon plugin che lo permettesse. Oggi, invece, un intero disegno web può basarsi su scripts e plugins che fanno più che aggiungere qualcosa al disegno del sito: possono arrivare a definire l’intera esperienza visuale dello stesso.

Qui sotto ve ne proponiamo un paio di esempi.

Web Design: Jquery e Sliders

Web Design: Jquery e Sliders  3

Web Design: Jquery e Sliders  2

Web Design: Jquery e Sliders  4

CSS3 diventa mainstream

Se dovessero darmi un euro per ogni articolo apparso su Internet su CSS3, adesso sarei davvero ricco! Pur se è vero che CSS3 non è ancora stato adottato da tutti i browser (qui un comodo link per vedere quali browser lo hanno adottato e cosa ne hanno adottato), i web designers non hanno esitato in cominciare ad utilizzare alcune fantastiche opzioni che CSS3 offre.

Tutto, dagli angoli arrotondati, ombre, bagliori, animazioni, font-face e molto altro ancora quest’anno hanno cominciato a fare la loro comparsa. Qui alcuni esempi.

Web Design CSS3

Web Design CSS3  2

Web Design CSS3  3

Web Design CSS3  4

Texture e, ancora, texture

Anche le textures non sono una novità, ma ogni anno che passa vediamo come siano integrate nel disegno dei siti in modi nuovi e interessanti. 2010 ha visto l’uso prevalente di “subtle noise” textures, ma soprattutto stiamo entrando in una fase in cui sempre più designs web offrono una sensazione quasi tattile. Questo non significa per niente che si utilizzino grandi e pesanti files per generare le textures, anzi! sempre più notiamo come queste siano ottimizzate per essere generate da file leggeri che si ripetono di forma naturale.

Web Design: Textures

Web Design: Textures  3

Web Design: Textures  4

Le infografie influenzano il disegno dei siti

Come amante delle infografie, è bello vedere come esse siano sempre più integrate nei siti web e non solo come semplice elemento aggiuntivo. In questo senso credo che nel 2011 potremo vedere un’integrazione ancor maggiore e creativa della loro integrazione nel disegno web.

Web Design: influenza delle Infografie

Web Design: influenza delle Infografie  2

Web Design: influenza delle Infografie  3

Web Design: influenza delle Infografie  4

Siti di una sola pagina

Web Design: siti di una pagina

Web Design: siti di una pagina  2

Web Design: siti di una pagina  3

Web Design: siti di una pagina  4

Uso del 3D

Questa è più una novità che un trend. I siti 3D sono divertenti da usare, ma non sono totalmente supportati da tutti i browser e schermi. Detto questo, si stanno sperimentando delle nuove divertenti idee intorno al concetto di siti web in tre dimensione, per cui è opportuno tenere questo fenomeno sotto controllo, anche se è improbabile che vedremo un sito 3D girare sul nostro iPhone nelle prossime settimane.

Web Design: il 3D  2