12 of the Hottest WordPress Web Design Trends in 2020

Tra lo sfarzo, il glamour e i metri di chiffon alle sfilate della Settimana della Moda – sia a Milano, Parigi o nella Grande Mela – due cose sono certe:

1. Il direttore di Vogue indosserà occhiali da sole al chiuso.
2. Alcuni modelli saliranno in cima, creando un raccolto di nuove tendenze per la prossima stagione.

La passerella di WordPress non è diversa. Beh, tranne che per l’editore di Vogue parte.

Per mantenere il vostro sito all’avanguardia dello sviluppo e del design web, è necessario capire cosa è popolare nella comunità WordPress. Ancora più importante, è necessario capire perché alcune tendenze diventano, beh, di tendenza.

Anche se potrebbe sembrare così, ciò che è popolare è raramente arbitrario. Capendo quando e perché implementare elementi di design di base, sarete meglio attrezzati per creare un sito WordPress che sia bello, moderno e funzionale.

Iniziamo dando un’occhiata alle 12 tendenze più interessanti nel web design di oggi. Poi vi mostreremo come possono essere implementati sul vostro sito WordPress.

Website Builders

Anche con migliaia di temi disponibili, può essere difficile creare un sito web che sia veramente vostro. Tuttavia, questo paradigma sta lentamente cambiando, poiché il web design sta diventando più democratizzato.

Questo è, in parte, il risultato di un aumento di popolarità per i website builders. Questi usano un’interfaccia What You See Is What You Get (WYSIWYG) che permette a tutti gli utenti di personalizzare rapidamente l’aspetto delle loro pagine web. I costruttori di siti web abbassano la soglia del web design, dando anche agli utenti inesperti la possibilità di creare siti sorprendenti e unici – velocemente.

Per tenere il passo con la concorrenza, WordPress si sta concentrando maggiormente su questo tipo di funzionalità. Ci sono popolari costruttori WYSIWYG creati esplicitamente per WordPress che sono in giro da un po’, come Beaver Builder e Elementor.

WordPress è entrato in azione nel 2018 con il rilascio su larga scala del Block Editor. Questo editor è stato recentemente rilasciato come parte del core di WordPress. Sostituisce l’editor basato su TinyMCE che era stato a lungo nativo del CMS.

Ispirato ad altri costruttori WYSIWYG, il Block Editor presenta un’interfaccia drag-and-drop che consente di personalizzare liberamente diverse aree di un post o di una pagina. Non è strettamente un costruttore di pagine – non vi permetterà di personalizzare i temi, per esempio – ma è influenzato dalla natura user-friendly e dinamica delle interfacce dei costruttori.

Questo cambiamento ha avuto un impatto sull’esperienza WordPress, e il progetto è stato controverso. Anche così, sembra chiaro che i costruttori di pagine sono la strada del futuro, e probabilmente li vedremo evolversi e crescere ancora di più negli anni a venire.

Il minimalismo si è evoluto

Il design piatto è stato popolare per un po’ di tempo, e non sembra andare da nessuna parte. Questo tipo di design minimalista si concentra sulla semplicità, utilizzando colori piatti, chiarezza e un sacco di spazio bianco.

Non solo questo mette l’accento sulla messa in mostra del contenuto, ma assicura anche che il tuo sito si carichi velocemente e sia bello su tutti i dispositivi. Questo tipo di minimalismo può essere visto nel tema Arnold, che si rivolge ai creativi e fa un uso eccellente dello spazio bianco per far brillare sia il testo che le immagini.

Questa tendenza può essere un pilastro, ma questo non significa che stia diventando stantia. Infatti, i design si sono evoluti per incorporare gradienti, ombre e immagini in misura più sostanziale. Questo crea un maggiore senso di profondità sulla pagina e può portare ad alcuni design accattivanti.

Un perfetto esempio di questo effetto è Hue, che fa uso di grandi, chiari caratteri e schemi di colore gradiente per creare stili memorabili.

L’uso di grandi fotografie e video che attirano l’attenzione sta anche crescendo in popolarità, come le connessioni internet più veloci diventano più comuni. Temi come Kalium traggono vantaggio da questo, accoppiando un design minimalista generale con intestazioni a tutta larghezza.

Utilizzando questo approccio al design, puoi creare siti web che si distinguono. Inoltre, può aiutare a migliorare la velocità di caricamento del tuo sito e rendere più facile per i visitatori trovare le informazioni di cui hanno bisogno.

Alta saturazione e colori vibranti

I giorni di “Puoi avere qualsiasi colore che ti piace, basta che sia nero” sono passati da un pezzo. Oggi, i colori audaci e le combinazioni contrastanti sono all’ordine del giorno. Le persone hanno reazioni molto viscerali al colore, quindi la scelta della combinazione di colori può influenzare significativamente il modo in cui percepiamo un marchio o un sito web. Infatti, secondo Buffer, il 90% della nostra valutazione quando si tratta di prodotti è fatta esclusivamente in base al colore.

E’ evidente che l’utilizzo di una combinazione di colori sorprendente è un modo perfetto per rendere il vostro sito pop. Anche i designer di WordPress non hanno dormito su questa tendenza. Molti temi hanno un focus sul colore.

Per esempio, il tema Skin ti permette di scegliere due colori, e creerà uno schema gradiente per il tuo sito. Puoi anche creare i tuoi gradienti e aggiungere modelli e texture.

Un’altra tendenza, che sta diventando più popolare ultimamente, è l’uso di contrasti netti. Usare colori contrastanti dà al tuo sito un’atmosfera divertente e artistica, e può anche aiutare con l’accessibilità.

Un tema che lo fa bene è Piñata, con i suoi schemi di colori vibranti che sono anche completamente personalizzabili.

È incredibile cosa può fare un uso creativo del colore per far saltare un design altrimenti semplice dalla pagina. Come puoi vedere con il tema Piñata, mantenere una combinazione di colori coerente in tutto il tuo sito, comprese le immagini, può trasformarlo in qualcosa di indimenticabile.

Layout asimmetrici e spezzati

Il minimalismo e i design piatti vanno bene, ma a volte vuoi il contrario di un look pulito e ordinato. I designer stanno iniziando a spingere i confini creando griglie deliberatamente rotte e design asimmetrici.

Un tema che realizza bene questo è Albert. Utilizza immagini scorrevoli, elementi sovrapposti e un look deliberatamente contorto che cattura l’occhio e ti costringe a prestare attenzione.

Un’altra variazione su questa tendenza si presenta sotto forma del tema Overlap, che utilizza elementi sovrapposti e un design a griglia rotta per creare un look unico.

Questo tipo di design è difficile da realizzare. Richiede di percorrere una linea sottile tra l’essere visivamente accattivante e mantenere il tuo sito utilizzabile e ordinato. Anche se il contenuto è distribuito sulla pagina in modi non convenzionali, tutto deve essere chiaramente visibile e leggibile a colpo d’occhio.

Dopo tutto, non si vuole finire con un sito elegante che nessuno capisce come usare.

Griglie CSS

La web designer Hui Jing Chen ha descritto le griglie CSS come “il web che finalmente prende la patente”. A suo parere, il web design è stato bloccato per troppo tempo aderendo agli standard di stampa, e lei vede le griglie CSS come un grande passo avanti rispetto a questa limitazione auto-imposta. Cos’è esattamente una griglia CSS?

In breve, è un tipo di griglia reattiva che cambia dinamicamente a seconda di dove viene visualizzata. Probabilmente ti sei imbattuto in questo tipo di design più spesso sui dispositivi mobili. Gli elementi della pagina si restringono e si riorganizzano in base alle dimensioni della finestra. Lo stesso può essere fatto anche nei browser standard, dove il design della pagina si sposta in tempo reale come si cambia la dimensione della finestra.

E’ una scommessa giusta che i design a griglia CSS continueranno a diventare più popolari. Alcuni temi WordPress ne stanno già facendo uso, compreso il tema Kuhn, che potete vedere in azione qui sopra. Notate come le immagini, il testo e le colonne cambiano in tempo reale mentre la finestra cresce e si restringe?

Questo è ben lontano dai design statici, ispirati alla stampa.

Designs Mobile-Friendly

Parlando di design reattivo, parliamo di dispositivi mobili. Nel 2016, il numero di utenti internet su dispositivi mobili ha superato per la prima volta il numero di utenti desktop. Questo è stato un punto di svolta dell’utilizzo del web e ha reso chiaro che creare siti che siano responsive sui dispositivi mobili è più critico che mai.

Abbiamo parlato prima di come ottimizzare il tuo sito WordPress per gli utenti mobili.

Un modo per farlo è scaricare il plugin WPtouch, che creerà un tema mobile basato sul tuo sito web che puoi personalizzare come vuoi. Questo plugin è raccomandato da Google e fa in modo che il tuo tema mobile soddisfi gli standard del motore di ricerca (anche se vale la pena tenere a mente che le sue recensioni sono un po’ contrastanti).

Puoi anche utilizzare il plugin Jetpack per creare rapidamente un tema mobile per il tuo sito.

Un altro plugin che dà molta importanza alla compatibilità tra dispositivi è Elementor. Questo strumento multiuso consente di impostare larghezze dinamiche e configurare i singoli elementi della pagina a seconda del dispositivo di visualizzazione.

Questo costruttore di pagine può essere utilizzato con qualsiasi tema. Puoi anche vedere il tuo sito emulato su telefoni, tablet e desktop, così puoi essere sicuro che avrà un ottimo aspetto indipendentemente da come viene visualizzato.

Microinterazioni

Il design è tutto nei dettagli. La tendenza crescente delle microinterazioni si concentra su questi piccoli dettagli ed è diventata sempre più popolare negli ultimi anni. Come il nome implica, questo concetto si riferisce al modo in cui gli elementi del sito rispondono a piccole interazioni in vari modi.

Un esempio di questo concetto in azione è quando una breve animazione viene riprodotta se si clicca o si passa sopra un’icona. Probabilmente vi sarete già imbattuti in questo, come con le emoji di reazione di Facebook.

Le microinterazioni danno al vostro sito una sensazione viva e tattile. Fanno sentire come se si stesse davvero interagendo con la pagina – piuttosto che fissare un muro statico di informazioni.

È possibile aggiungere un effetto simile al proprio sito con il plugin Animate It! Questo plugin consente di aggiungere animazioni a quasi tutti i contenuti, comprese le immagini e il testo. Puoi anche determinare quando l’animazione si attiverà, decidere quante volte si ripeterà e impostare un punto di inizio e di fine.

Guarda il seguente esempio, dove l’immagine è impostata per eseguire un’animazione “pop” quando il cursore vi passa sopra.

Le microinterazioni non sono solo per animazioni e immagini, comunque. Questa tecnica può anche permetterti di usare il testo in modi interessanti.

Per esempio, alcune pagine ti danno la possibilità di evidenziare il testo e poi condividerlo sui social media. Puoi aggiungere questa funzione al tuo sito con il plugin Highlight and Share, che supporta reti popolari come Facebook, Pinterest e LinkedIn.

Questi sono solo alcuni esempi di come puoi usare le microinterazioni per rendere il tuo sito più vivo e reattivo.

Slants and Diagonals

Fare sembrare il tuo sito fuori posto potrebbe non sembrare la migliore idea, ma in realtà è una delle tendenze di design in più rapida crescita. Le linee oblique e le pause diagonali non solo danno al tuo sito un aspetto moderno, ma aiutano anche a guidare l’occhio lungo la pagina. Questo funziona particolarmente bene nei design di una pagina, separando ogni sezione in un modo visivamente piacevole.

Diversi temi WordPress consentono di implementare un look inclinato sul tuo sito.

Per esempio, date un’occhiata al tema Flamingo, che consente di creare un design unico con separatori diagonali. I risultati sono innegabilmente accattivanti, e la personalizzazione del tema ti permette di essere creativo con il design finale.

Un altro approccio al design inclinato viene dal tema Upward. Questa opzione utilizza un layout più tradizionale, basato sulla griglia, ma implementa linee inclinate per un look insolito ed elegante. E’ anche completamente personalizzabile, con molte opzioni.

Come puoi vedere, usare un design non convenzionale può rendere il tuo sito davvero espressivo. E’ anche un ottimo modo per separare il contenuto in modo chiaro e dirigere l’attenzione dei tuoi visitatori verso gli elementi più essenziali.

Big, Bold Fonts

La tipografia è l’arte di elaborare e stampare i caratteri. In altre parole, è un modo per trasformare le parole in pezzi d’arte. Utilizzando stili di caratteri grandi, è possibile impostare immediatamente il tono per il tuo sito con un header elegante. Il testo grande assicurerà anche che il messaggio arrivi anche su uno schermo più piccolo.

Un tema che lo mostra bene è Wedding Planner.

Questo tema illustra anche un’altra tendenza attuale: la variazione dei caratteri. Invece di attenersi a una o due scelte simili, usando font serif e sans-serif insieme si può creare un risultato unico.

L’uso creativo dei font non è solo per le intestazioni. Il tema Retro Portfolio mostra come è possibile utilizzare diversi font per creare un look di ispirazione retrò sulla pagina stessa.

La cosa importante da ricordare è che la leggibilità conta ancora. Finché il tuo testo è ancora analizzabile, tuttavia, dovresti sentirti libero di sperimentare con diversi stili di carattere, dimensioni e posizioni.

Illustrazioni personalizzate

Tradizionalmente, la maggior parte dei siti web si sono limitati a usare fotografie e animazioni accanto al loro contenuto testuale. Questo sta rapidamente cambiando, tuttavia. Molti designer si stanno rendendo conto che commissionare illustrazioni li autorizza a creare un’identità unica e dà loro ancora più libertà quando si tratta del loro marchio visivo.

Utilizzare illustrazioni nel design del tuo sito è un ottimo modo per renderlo più personale e per raccontare una storia con le sole immagini. Assumere un illustratore di talento può anche essere molto più economico che commissionare un team di fotografi ogni volta che il tuo sito ha bisogno di una rinfrescata.

A differenza della maggior parte delle tendenze che abbiamo coperto in questo pezzo, non c’è una soluzione facile da scaricare qui. Il punto chiave è che avrete bisogno di trovare un illustratore il cui stile corrisponda al vostro sito. È anche imperativo che vi assicuriate di pagarli per il loro lavoro. Il talento costa, e nessuno vuole davvero lavorare per “l’esposizione”.

Inoltre, ci sono alcune cose da considerare quando si progetta il sito intorno alle illustrazioni.

Prima di tutto, è necessario assicurarsi che il tema utilizzi un layout a tutta larghezza, in modo da poter mostrare le immagini al meglio. Un grande esempio è il tema Illustrator, appositamente creato con questo tipo di design in mente.

Un altro tema che vale la pena controllare è TheGem, che ha un design reattivo a tutta larghezza che è perfettamente adatto alle immagini di grandi dimensioni. Questo tema è molto versatile, con layout adatti a negozi, portafogli e imprese.

Alcune illustrazioni ben posizionate possono fare molto per abbellire il tuo sito. Aiutano anche a migliorare la narrazione e daranno al tuo marchio un’identità visiva del tutto unica.

Modalità scure

L’esperienza dell’utente potrebbe vedere alcuni cambiamenti quest’anno quando le interfacce passeranno al lato scuro. Che sia per alleviare l’affaticamento degli occhi o semplicemente perché il look si adatta meglio allo stile del tuo sito web, l’adozione di una tavolozza di colori più scuri è da prendere in considerazione.

Un modo per implementare un po’ di atmosfera all’interno del tuo pannello di amministrazione di WordPress è con il plugin Dark Mode.

Questa particolare tendenza è probabilmente iniziata con i programmatori. La maggior parte dei software di editing del codice è dotata di una modalità scura, di nuovo, per aiutare a ridurre l’affaticamento della vista. Per esempio, Brackets permette all’utente di scegliere tra temi chiari e scuri.

Potresti anche vedere più temi e siti web che offrono agli utenti front-end la possibilità di passare a una versione più scura. Vale la pena notare che le modalità scure tendono a risparmiare il consumo di energia sullo schermo, il che le rende anche un’opzione più ecologica.

Un’enfasi sull’accessibilità

Creare siti web accessibili è una tendenza a cui vale la pena prestare molta attenzione. In particolare, WordPress ha posto l’accento sugli standard di codifica accessibili.

Nella vera moda open-source, il team di WordPress ha creato una pagina informativa completa su tutti i suoi sforzi di accessibilità. I membri della comunità e gli utenti sono anche incoraggiati a partecipare al lavoro. Se sei interessato a saperne di più, puoi studiare le più recenti Web Content Accessibility Guidelines (WCAG).

Tendenze del Web Design WordPress nel 2020

Nessun dubbio: il 2020 sarà un anno emozionante per gli utenti di WordPress, e dovrete fare un po’ di lavoro per stare al passo con le ultime tendenze dello sviluppo web. I designer non dormono mai, e sono sempre alla ricerca di nuovi modi per aiutare WordPress ad apparire e funzionare meglio.