Design Trends — Scopri i Trends più Usati

A volte basta poco per rendere un’applicazione più bella.

Come ogni cosa anche il design si evolve. Anzi, possiamo ben dire che i design trends cambiano fin troppo velocemente e, per presentare sul mercato app conformi agli ultimi trends, non puoi non essere informato sulle ultime mode e tendenze.

Come ti ho già detto però il design cambia davvero molto velocemente e molto spesso nascono mode che poi finiscono per morire dopo poco. Star dietro a tutto questo e aggiornare le proprie app sarebbe impossibile anche per un supereroe. Ed è per questo che oggi ti parlerò di quei trend “fissi” che non rappresentano la moda del momento, ma un vero e proprio standard a cui uniformarsi.


Cards

Quello delle “cards” è sicuramente uno dei design trends più longevi. Ormai è già da qualche anno a questa parte che viene regolarmente utilizzato in numerose applicazioni. Basta vedere Facebook, Pinterest, Google Now, Tinder…giusto per citare i più illustri.

Pinterest, Facebook, Google, Tinder

Pensa un secondo: noi usiamo le “cards” nella vita di tutti i giorni…da anni! Carte di credito, bancomat, scontrini, figurine, carte da gioco, per non parlare di patente, tessera sanitaria, carta d’identità e biglietti da visita. Insomma, la nostra vita è costellata di cards. Perché?

Semplice. Perché sono versatili. È questa la loro qualità. Ciò che ha fatto sì che fossero riprodotte anche nel mondo digitale.

Le cards possono essere grandi, piccole, possono essere girate, aperte, allungate, ristrette..ed è questa loro versatilità che è vista come un vero e proprio tesoro. Inoltre, ci puoi inserire qualsiasi contenuto: links, testi, immagini, video e chi più ne ha più ne metta.

Ma non è tutto, c’è anche un fattore psicologico: richiudere dati nelle cards fa sì che le persone trovino più facilmente e velocemente le informazioni che cercano. Prendiamo come esempio Facebook: tutte le informazioni che vediamo sono all’interno di rettangoli bianchi (cards), questo fa sì che un utente abbia più chiarezza visiva e che scorra più facilmente tra i news feed per cercare ciò che gli interessa.

Ma dove e come puoi usare le cards? Come già ti ho detto le cards sono molto versatili, quindi puoi usarli in svariati modi: in un news feed, in un meteo, in un’app di ricette, in un’app to-do, app di risultati sportivi e tanto altro ancora!


Onboarding Screens

Hai presente quando installi una nuova app e prima di iniziare ad usarla passi attraverso una serie di schermate (di solito 2–3) in cui ti vengono presentate le principali funzioni dell’app? Bene, quelle schermate rappresentano il secondo dei design trends di cui voglio parlarti e, in gergo, si chiamano onboarding screens o walkthrough.

Gli onboarding screens — proprio come le cards — sono entrati a far parte di quei design trends diventanti “standard”.

Ormai oltre ad un semplice mezzo per informare l’utente delle funzioni generali dell’applicazione, sono diventati un vero e proprio mezzo per rendere più bella la propria app e per attirare più utenza.

Vediamo qualche esempio di onboarding screens ben riusciti:

Credits: Ghani Pradita, Ramotions, Goutham, Anggit Yuniar Pradito

Da questi esempi possiamo vedere che viene prestata molta cura nel design di queste schermate, ma soprattutto notiamo che ci sono delle regole stilistiche ben precise:

  • Skip. Dai sempre la possibilità di saltare tutto il processo, è fondamentale. Questo più che un principio di design è proprio un principio di usabilità: dare sempre una via d’uscita all’utente.
  • Uso di icone. Usare delle immagini per semplificare il processo di spiegazione oppure anche solo per rendere più accattivante il design nella sua totalità.
  • Colore moderato. Non è raro incappare in onboarding screens che hanno un colore di sfondo, come non è nemmeno raro incappare in quelli che preferiscono usare il bianco come sfondo. In entrambi i casi, modera il colore. Se usi il bianco come colore di sfondo, assicurati di usare colori vivaci per dare risalto agli altri elementi. Se scegli di usare un colore di sfondo diverso dal bianco, mantieni tutto il resto (icona, testo, tasti) neutro, e aggiungi altri colori solo quando strettamente necessario!
  • Aria. Gli onboarding screens non devono essere pieni di contenuti anzi, il loro scopo è dare delle informazioni mirate e semplici. Fai respirare la tua schermata, take it simple.
  • Fantasia e leggerezza. Non prenderti troppo sul serio! Molto spesso queste schermate hanno delle icone fresche e allegre, non essere troppo rigido e lasciati andare!

Quando usare gli onboarding screens? Visto che sono molto versatili, puoi usare gli onboarding screens in qualsiasi progetto. Puoi usarli per una procedura di registrazione, o solo per presentare le funzionalità principali della tua app!


Immagini come background

Un altro dei design trends più in voga è sicuramente quello delle immagini come sfondo ad una (o più) schermate della tua applicazione. Attento però, questo trend è potenzialmente pericoloso e può causare la perdita di bellezza della tua app, da maneggiare con cura!

Vediamo qualche esempio:

Credits: Paul Lapkin, Alioune Thiam, Paul Aimé, Ionut Zamfir, Evgen, Carl Hauser

Puoi usare questo trend in una pagina profilo o — perché no — nella “home” della tua applicazione. Fai attenzione però, ci sono delle regole ben precise da seguire per poter utilizzare questa tecnica:

  • Sfumatura. Sfuma l’immagine per far risaltare i tuoi contenuti che — al contrario — passerebbero in secondo piano e avrebbero poca leggibilità e visibilità.
  • Layer più scuro. Sovrapponi all’immagine un layer di un colore scuro e pieno abbassandone l’opacità. In questo modo vedrai la foto ma al tempo stesso otterrai il contrasto che ti serve per far risaltare i tuoi contenuti, proprio grazie alla presenza di una base più scura in semi-trasparenza proprio sopra l’immagine.

Sto parlando arabo? Niente paura, guarda questo video per capire a cosa mi riferisco!

  • Scegli l’immagine con cura. Non prendere la prima immagine che ti capita a caso. Innanzitutto scegli un’immagine ad alta risoluzione
Non sai dove trovarle? Consulta l’articolo sulle risorse dedicate al design. Tra le varie risorse ti parlo anche di tantissimi siti dove puoi trovare immagini ad alta risoluzione completamente free.
  • In secondo luogo, assicurati che l’immagine sia “particolare”. Mi spiego meglio, non scegliere foto con soggetti comuni, ma prediligi immagini spettacolari.

Alcune volte, puoi trovare un’immagine senza né sfumature né effetti particolari. Questo accade quando l’immagine è già di per sé particolare e la sua combinazione di soggetti e colori fornisce già un grande contrasto con il testo. In altri casi invece possiamo trovare questa formula anche quando non c’è molto contrasto con il testo. Io personalmente ti sconsiglio quest’ultima opzione, essendo il testo difficile da leggere nel 99% dei casi.


Spazio & Pulizia

L’ultimo — ma non meno importante — design trend di cui voglio parlarti riguarda la “pulizia”, diventata un aspetto fondamentale già da un po’ a questa parte. Puoi vedere dalle immagini precedenti come la tendenza sia alquanto minimale. Ma come si fa a creare quell’aria di ordine e di spazio in una view? Semplice.

  • Leggibilità. Usa font leggibili, niente font strani o particolarmente elaborati. Scegli la semplicità. I font sans-serif sono perfetti se la tua app non è di editoria digitale. In quest’ultimo caso difatti, si tende a preferire l’uso dei font “serif” che trasmettono al lettore la sensazione di leggere su carta. Se la tua app non ha nulla a che fare con l’editoria digitale, allora vai sul “sans-serif”. I più famosi e quelli più in voga al momento sono: museo sans, open sans, roboto e montserrat.
  • Line Height. Spazia per bene le righe. Se le righe sono troppo vicine l’utente affaticherà la vista per leggere i contenuti che gli stai sottoponendo. Ricorda: per calcolare la spaziatura tra le righe basta impostare come line-height il 120–140% della grandezza del font. Ad esempio, se la grandezza del font è di 18px allora la line-height giusta sarà tra 21 e i 25px.
  • Gerarchia visiva. Sii gerarchico con i tuoi contenuti. Il corpo di un testo di solito va dai 16px ai 18px (grandezze che permettono di leggere senza affaticare la vista); per i i titoli di solito si usano le grandezze da 20px in su; mentre le informazioni poco rilevanti e di secondo piano (come date, orari ecc.) sono di solito 11px.
  • Aria. Non riempire la tua view di contenuti! Lascia dello spazio vuoto e non occupare più spazio di quello strettamente necessario.
  • Gestione del colore. Non avere paura, il bianco è tuo amico. Non devi per forza riempire di colori la tua applicazione! Molte lasciano il bianco come colore di background, facendo della pulizia e del minimalismo i propri punti di forza. Mi raccomando però, come già ti ho detto precedentemente, se usi il bianco come colore di background non dimenticare di risaltare gli elementi importanti con dei colori brillanti!