Web design le principali tendenze per il 2022

Episodio 8
WEB DESIGN: LE
PRINCIPALI TENDENZE
PER IL 2022

YunikonID — 26.nov.21
LAURA LONIGHI
Brand & Web Designer freelance
Nel mio lavoro studio i colori e i
caratteri tipografici, disegno la
personalità visiva di un marchio e
progetto siti web attorno agli
obiettivi di business dei miei clienti.
YUNIKON DESIGN
CONTATTI
hello@yunikondesign.com
www.yunikondesign.com

Sommario
Cosa vedremo oggi insieme:
Tendenze nel mondo del web design per
l'anno 2022
Le principali novità di WordPress nel prossimo
anno
1.
2.

Tendenze nel
mondo del
web design
per l'anno
2022
Priorità al caricamento
delle pagine
Color Trends
+ glassmorphism
- neumorphism
Oversize typography
Font mix
Variable font css
Interactive font

WordPress 5.8
“Tatum”
Theme.json
Widget Editor Supporto WebP
Full site editing (FSE)

Oversize typography

https://www.emistyles.com.au/

Font mix

https://madebyeighty.com/

https://www.orderofthegooddeath.com/

h
t
t
p
s
:
/
/
w
w
w
.
j
o
m
o
r
.
d
e
s
i
g
n
/

Variable font CSS

La vera differenza tra un font statico e uno variabile è che
un font variabile è l’evoluzione del classico OpenType e
ha, in più, delle tabelle di variazioni che permettono di
gestire il font.
Queste ultime non consente solo di passare, per esempio,
da un Semi-Bold ad un Regular con lo stesso file, ma
anche di definire un qualsiasi spessore compreso fra i
due. Tutto ciò avviene tramite specifici assi di variazione
che modificano le proprietà, rendendo il font
completamente “fluido”. Grazie ai variable font non è più
un intoppo trovare la larghezza o lo spessore ricercato,
che potrà essere settato senza problemi.
Variable font CSS: cosa sono

Interactive font

https://www.agauchedelalune.com/roster/

Priorità al caricamento delle
pagine

Dal punto di vista tecnico - dopo
l'aggiornamento dell'algoritmo di Google del
2021 - la velocità di caricamento di una pagina
è diventata una priorità per gli sviluppatori web.
Ciò riflette anche le aspettative dei visitatori,
poiché il 53% di loro abbandonerà una pagina se
il suo caricamento richiederà più di 3 secondi.
Priorità al caricamento delle
pagine

Come rendere un sito
più veloce?
Google PageSpeed Insights è un ottimo
strumento gratuito che può essere
utilizzato per valutare l'ottimizzazione
della velocità del tuo sito web.
Ci sono anche alcuni semplici passaggi
che gli sviluppatori possono eseguire per
assicurarsi che le pagine si carichino
rapidamente, come ad esempio
l'ottimizzazione delle immagini.

Le tendenze colore per il
2022

I trend colore
secondo
Shutterstock
Le seguenti statistiche sono basate su milioni di
immagini scaricate nel mondo, in cui ogni
singola sfumatura dei pixel viene conteggiata e
calcolata in percentuale di clic (CTR).

Calming Coral
#E9967A
Fonte: ShutterStock

Velvet Violet
#800080
Fonte: ShutterStock

Pacific Pink
#DB7093
Fonte: ShutterStock

Il verde regna!
Fonte: ShutterStock

+ Glassmorphism
- Neumorphism

Tre livelli di profondità:
infossato, piatto e rialzato
Colori chiari e pastello,
tendenza al monocromatico
Gli elementi hanno angoli
arrotondati
Sfrutta ombre e gradienti per
ricreare la terza dimensione
Le icone sono sintetiche e
geometriche come nel Flat
Design, ma con effetto 3D.
Neumorphism
Glassmorphism
Fonte: www.e-leva.it
presenta le stesse
caratteristiche del neumorphism
in aggiunta: uso ricercato delle
trasparenze e delle sfocature.

Neumorphism

Glassmorphism

La visione alla base del Full Site Editing è
quella di fornire un insieme di strumenti e
funzionalità che permettano agli utenti di
WordPress 5.8 di costruire un intero sito
web utilizzando i blocchi. Con il Full Site
Editing, avremo a disposizione blocchi per
creare qualsiasi elemento sulla pagina, dai
menu di navigazione al site branding, dai
widget della sidebar ai template e molto
altro.
Che cos'è

"Uno dei feedback più chiari che abbiamo
ricevuto durante la Fase 1 del processo di
fusione è stato che non c’era abbastanza
tempo per agenzie, autori di temi,
sviluppatori di plugin, costruttori di siti, per
prepararsi ai cambiamenti in arrivo."
JOSEPHA HADEN CHOMPHOSY — WORDPRESS EXECUTIVE DIRECTOR

Requisiti per usare FSE
WordPress 5.8/9
Gutenberg plugin
un tema FSE
Questo significa che anche se aggiorni il tuo sito
alla nuova versione di WP non devi temere che il
tema che usi sia da riadattare. Per usare FSE
devi avere un tema che lo supporti.

Theme.json

Theme.json
Con il file theme.json è possibile impostare
preset personalizzati e/o aggiungere il supporto
di nuove funzionalità, come:
Abilita o disabilita funzioni come padding,
margine e altezza di linea personalizzata
Aggiungere molteplici palette colore,
gradienti e duotone
Aggiungere dimensioni dei font
Aggiungere larghezze predefinite per
contenuti
Aggiungere proprietà CSS personalizzate
Fonte: developer.wordpress.org

Widget Editor

26.feb.21
L’editor a blocchi dei widget è un progetto che
mira a portare l’interfaccia dell’editor di blocchi
nei widget dei temi classici.
Il nuovo editor di widget offre molti vantaggi a
coloro che utilizzano ancora i temi classici, che
sono ancora la grande maggioranza di utenti.
Allo stesso tempo, permette loro di
familiarizzare con l’interfaccia a blocchi prima
che diventi standard per tutti gli utenti di
WordPress.
Widget editor
Fonte: Kinsta.com

Cosa possiamo fare con il
widget editor
Creare layout nelle sidebar, nell'header
e nel footer con colonne, separatori,
distanziatori e altri blocchi di design.
I widget ora supportano di default il rich
text editing, senza la necessità per gli
utenti di aggiungere codice
personalizzato o incorporare un editor
HTML di terze parti con un plugin.
Molti widget basati su shortcode sono
ora disponibili come blocchi,
semplificando così l’esperienza di
editing.

Supporto WebP

Che cos'è il WebP
È un moderno formato immagine che offre una
compressione maggiore rispetto a gif, jpeg/jpg e
png. Grazie a WebP, gli sviluppatori web
possono creare immagini più leggere a favore di
una maggiore performatività del sito web.
Le immagini WebP sono più piccole del 26%
rispetto alle png e dal 25% al 34% rispetto alle
immagini jpeg.
Fonte: Kinsta.com

Cosa cambia
Finora nella sezione Media di WordPress era
possibile caricare immagini in formato jpg o
png. Le immagini WebP non erano supportate e
per utilizzarle ugualmente sul nostro sito era
necessario fare ricorso a un plugin.
A partire da WordPress 5.8, è possibile usare il
formato immagine WebP allo stesso modo dei
formati jpg, png e gif.
Fonte: Kinsta.com

Ricapitolando...
FSE è il futuro di WordPress, ma questo non
significa che lo vedremo nella sua interezza e
completezza a breve. Da una parte perché sono
necessari ancora molti sviluppi (e correzioni di
bug) da parte di WordPress, dall'altra per dare
tempo e modo ad agenzie e sviluppatori di
formarsi e adattarlo per i loro progetti.

Certo è che...
Se sei uno sviluppatore forse è il caso che
dedichi un po' della pausa natalizia ad
approfondire meglio l'FSE.

Dai, mettiamo le
mani in pasta?
l'articolo - come sempre impeccabile - di
Kinsta: Le Novità di WordPress 5.8;
il video del mio amico e collega Simone
Baldassin, che illustra le principali
caratteristiche del FSE e inizia già a mettere
le mani nel codice;
il super-sito di Carolina Nymark,
sviluppatrice WordPress da Stoccolma, che
spiega passo per passo come iniziare a
lavorare con il FSE: d'ora in poi la mia
bibbia

Web design le principali tendenze per il 2022

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Web design le principali tendenze per il 2022

Similar to Web design le principali tendenze per il 2022 (20)

Web design le principali tendenze per il 2022