webdesign trends 2017

Ecco i trends di Web Design previsti per il 2017

Devi creare un sito web? leggiti i trends di WebDesign previsti per il 2017 per evitare che il sito nasca già "vecchio" e tra 2 anni devi cambiarlo ancora

Guardando il tema grafico che un cliente aveva scelto per il suo sito in WordPress mi è venuta fuori questa frase “Il design del sito sa già di vecchio”. Quando giustamente mi ha chiesto cosa nello specifico non era abbastanza moderno, non sono stato in grado di rispondere nel dettaglio come mi sarebbe piaciuto.

A casa poi ho recuperato dai bookmark una serie di siti con degli schemi ricorrenti: ho fatto un po’ di ordine nella mia testa. Questo articolo nasce proprio da questo spunto e ha l’intenzione di scoprire dove sta andando il web design per un sito “commerciale”.

I trend del Futuro nel design di un sito internet (edizione 2017)

Ecco quindi alcune cose che consiglierò ai miei clienti nel 2017 per evitare che il sito nasca e sia già passato di moda

Mobile First: il responsive è adesso al contrario.

materialDesign_ripple
Radial Animations : Esempio perfetto di “mobile first” nel design -(c) Jovie Brett.

Google dal 1 gennaio ha cambiato – in quasi tutte le nicchie – la priorità con cui guarda i siti: prima deve essere usabile il sito visto su smartphone e solo si guarda il desktop.

Il trend non è nuovissimo ed è almeno un paio di anni che ci sono temi di wordpress stupendi sullo smartphone che non sono focalizzati sul desktop e credo che questo 2017 sarà davvero l’inizio in cui la maggior parte dei designer faranno la versione per Mobile il centro e poi da li faranno responsive per il desktop.

Strategicamente questa sfida è davvero molto interessante: lo spazio utile per far passare il messaggio scende ancora e bisognerà fare delle scelte su cosa mostrare (anche se adesso entra in gioco il long scrolling, descritto sotto)

Dal punto di vista SEO, google ha già iniziato a offrire tool per vedere quanto buono è il designemi aspetto che nel corso dell’anno ci sarà una modifica all’algoritmo.

Oltre al famoso Speedtest, c’è anche l’utile Test My site with Mobile(sempre di google) per aiutarti a ottimizzare la pagina.

Long Scrolling / Infinte Scrolling

La tecnologia ha modificato la fruizione dei contenuti, se prima l’essere “above the folder” era la legge di ogni sito, sempre di più siti moderni e superutilizzati hanno uno scrolling lunghissimo.

Il trend di Medium (cioè articoli uno in coda all’altro all’infinito) ha finalmente preso piede. Mi aspetto che escano dei temi nativi a breve (adesso alcuni sono già predisposti grazie a jetpack)

Ovviamente il layout si trasforma a una colonna, piena pagina

Immagini personalizzate

digital trends - immagini personalizzate

Ne ho già parlato altrove, ma sempre più spesso vengono fatte ricerche di contenuti dalla pagina delle immagini. Avere quindi immagini personalizzate sarà uno dei temi principali.

Le immagini Stock sono – nella maggior parte dei casi –  fintissime, inadatte, e sopratutto annacquano il valore della tuo brand dato che mille altre aziende possono utilizzarle.

Se a questo aggiungiamo che di siti “originali” come design ce ne sono sempre meno, si può comprendere quanto sia vero il problema.

Le immagini personalizate non saranno più prerogativa dell’immagine di testata / in evidenza ma anche in mezzo ai contenuti, tra a divisione di un capitolo e l’altro.

Il mio consiglio quindi fate più foto possibili, il feeling caldo di una foto fatta bene senza dover essere professionale secondo me è imbattibile al momento.

Sovrapposizione Testo e Immagini

Non banale da fare bene ma di grande effetto. Testo e immagine (Hero Image) devono unirsi bene insieme… su tutti i dispositivi.

Cinemagrafiche & Video

Video

Anche qui, nulla di nuovo. il trend dei video full page nell’header è ormai partito e quest’anno sarà ancora più utilizzato, idem lo sfondo video… anche se credo che a breve le cinemagrafiche prenderanno piede.

Cinemagrafiche

Se un’immagine vale 1000 parole, un video ne vale un milione… ma richiede dei tempi di caricamento e dell’attenzione che spesso non c’è. Ecco che arrivano in nostro aiuto le cinemagrifiche: in pratica delle Gif animate, ma con pochissimo movimento, perfette per dare un senso di groove, senza però competere per l’attenzione.

Vi riporto due cinemagrafiche prese da cinemagraphs.com

Cinemagrafica

Cinemagrafica

Tipografia Arrogante

Tipografia arrogante e Ghost button: I kraftwerk sempre avanti (c) studiokraftwerk.com

Grazie ai Google font non ci sono quasi più limiti ai font che potete utilizzare sul sito. Dopo un 2016 di assestamento prevedo l’esplosione dei font giganti. Mi piacciono i font grossi, e coi titoli su sfondo di immagini grosse vedo che questo diventerà abbastanza frequente vederlo. Poi ci stuferemo ma per ora cosi.

Altro trend che vedo crescre è l’uso di immagini e colori molto forti (arancioni, viola…), forse per contrastare l’abuso del flat design (vedi più sotto)

Micro Interazioni

Copyright (c) Laura Sprauer

Se create landing page in maniera “scientifca” e se la Conversion Rate Optimization non è una cosa che si mangia già conosci il potere delle micro-interazioni. Senza scendere nei dettagli della spicologia della persuasione, le Micro interzioni sono ottime anche per dare una sensazione di partecipare senza davvero essersi esposto a rischi.

I like su Facebook che diventano blu, il bottone “iscritto” su youtube che diventa rosso aiutano a rendere partecipe l’utente

Cosa sono le Microconversioni e perchè contano – approfondimento

Grid Design e i suoi fratelli

(c) arraythemes.com

Non amo molto il Grid Design, ma è inutile negare che è una soluzione decisamente comoda in molti casi. Il fatto che Pinterest, Facebook, Twitter, Netflix, e Google plus lo utilizziono e solo un piccolo particolare…

A dicembre 2016 abbiamo utilizzato il grid design (o meglio il CARD Layout) per il progetto ItalianMMA (un aggregatore di News sulle MMA). Siamo soddisfatti di come è andato giù tutto facilemente

Il Card Layout è un modo versatile per gestire tanti contenuti senza sporcare la pagina.

Centered/Split Content

Melanie Daveid col suo sito https://melaniedaveid.com/ ha lasciato molti a bocca aperta per l’intuizione. di dividere la pagina in due fornendo contenuti e spazi bianchi perfetti sia su mobile che su desktop.

Neo Flat

(c) https://www.thundertech.com

Lo chiamo Neo Flat perchè non so che nome possa avere: chiamarlo Material mi sembrava limitante. (update: cercando delle immagini ho scoperto che si chiama Flat 2.0 🙂

Il flat design come lo intendiamo noi ha ormai 4 anni (consideriamo il 2013 come data della diffusione di massa – anche se credo che i primi esperimenti – su carta – siano degli anni 60).

Complice le nuove possibilità grafiche il mondo ha adottato i cambiamenti velocemente, pure troppo. Il design flat è bello, è pulito, i bottoni in modalità ghost sono elegantissimi: ma presenta grossi limiti di usabilità se chi fa la grafica non ha pensato all’utilizzo degli elementi… e questo succede raramente.

Quanto spesso invece capita di vedere una pagina e non capire quali sono gli elementi cliccabili e quali no? Questo è un enorme problema di usabilità.

Nel 2014 Google è uscita col Material Design: le specifiche non sono così chiare a dire il vero, ma leggendole con attenzione si capisce che mettere leggere ombre, leggeri elementi 3D su una grafica flat potrebbe rendere tutto più usabile.

Approfondimenti sul Flat 2.0

 

Cosa sta bollendo in pentola (ma che non vedo partire nel 2017)

Adattabilità

Adattabilità. La frontiera dell’accessibilità (ovvero rendere i contenuti fruibili a chiunque, indipendentemente dal dispositivo e dalle caratteristiche personali) è uno dei temi caldi, tanto che Yoast ha un’esperto, italiano tra l’altro, della materia per l’importanza che avrà questo sul SEO.

L’accessibilità è un tema sul piatto da anni, e l’adattabilità raddoppia la complessità. Non solo contenuti facilmente accessibili, ma menu, pagine scorciatoie che si modificano in base all’utente. Come si fa? Coi famigerati cookies, capendo da dove si arriva, l’intenzione.

Nel mio piccolo guardo la possibilità di modificare le sidebar in base al contenuto, e sto cercando da tempo un plugin che offra questa possibilità. Sono confidente che arrivi a breve.

Gamification

La grande promessa di metà anni 10’s ancora non è esplosa. Le difficoltà sono molte (è un processo discretamente complicato dal punto tecnico e per nulla semplice dal punto di vista logico), ma vedo che piano piano si sta arrivando. La “puntificazione” è abbastanza frequente ormai e il trend delle micro-interazioni potrebbe aiutare.

Realtà Virtuale

Negli anni 90 ci avevamo creduto tutti, ma i computer non erano potenti ne invandenti come adesso… non se ne è fatto nulla. Adesso ci stanno investendo tutti i maggiori player, Facebook e Google in primis… qualcosa succederà, ma non terrei il respiro