Web Designer Freelance Milano ・ Yunikon Design

  • Chi sono
  • Servizi
    • Identità per Brand
    • Siti Web su misura
  • Consulenze
    • Brand Styling
    • Performance sito web
  • Web Designer Freelance Milano e Online · Yunikon Design
  • Newsletter
  • Blog
    • Branding
    • Web Design
    • Palette Colori
    • Risorse e How-To
    • Vita da freelance
  • Contatti
Web Design: principali tendenze 2022

Web Design: le tendenze per il 2022

Web Design/ 30 Novembre 2021

Web Design: le tendenze per il 2022

Quali sono i trend del 2022 nel mondo del Web Design? Lo vediamo in questo webinar gratuito.

RIVEDI LA LIVE

Slide: Tendenze per l’anno 2022 nel Web Design.

L’anno sta per finire, è tempo di bilanci! Ah no, questo non è un post per tirare le somme sull’anno che sta per finire, quanto invece — più interessante — vedere quali sono le tendenze che ci si aspetta di vedere il prossimo anno nel mondo del Web Design.

Poi, non la si può proprio chiamare tendenza, ma ci sono importanti novità sul fronte WordPress, con l’introduzione del Full Site Editing: penso che valga la pena fare una carellata veloce di tutte le nuove funzionalità che ci aspettano a breve.

Ricapitolando la diretta di novembre (l’ultima di questo anno!) è suddivisa in due parti:

  1. Tendenze nel mondo del web design per l’anno 2022:
    • Typography: Oversize typography, Font mix, Variable font css, Interactive font
    • Priorità al caricamento delle pagine
    • Color Trends
    • + glassmorphism – neumorphism
  2. Le principali novità di WordPress nel prossimo anno:
    • Full site editing (FSE)
    • Theme.json
    • Supporto WebP

Oversize typography

I font avranno sempre più importanza. Salutiamo (finalmenteeee!) gli slideshow in homepage: il 2022 prevede contenuti above the fold fatti da testi super grandi.

Web Design: le tendenze del 2022
https://www.emistyles.com.au/
Web Design: le tendenze del 2022
https://www.emistyles.com.au/
Web Design: le tendenze del 2022
http://wandelmaier.com/

Font mix

Un’altra tendenza riguardante la tipografia sarà quella di mixare più font in un’unica frase. Tendenza da usare con parsimonia: non la usare in tutto il sito, ma solo per quelle frasi su cui desideri che il tuo pubblico si soffermi (quindi ad esempio in homepage, sempre al posto dello slideshow).

Web Design: le tendenze del 2022
https://madebyeighty.com/
Web Design: le tendenze del 2022
https://www.orderofthegooddeath.com/
Web Design: le tendenze del 2022
https://www.jomor.design/

Variable font CSS: cosa sono

Un font variabile è l’evoluzione del classico OpenType ma ha, in più, delle tabelle di variazioni che permettono di gestire il font. Queste ultime non consentono 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”. Il vantaggio principale dei variable font? Sono incredibilmente più leggeri rispetto ai font tradizionali, così rendono un sito web più veloce da caricare.

Variable fonts CSS
Fonte: Giuneco.tech

Interactive fonts

Web Design: le tendenze del 2022
https://vanholtz.co/
Web Design: le tendenze del 2022
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 (se non lo era ancora diventata). Ciò riflette anche le aspettative dei visitatori, poiché il 53% di loro abbandonerà una pagina se il suo caricamento richiederà più di 3 secondi.

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. Quello che consiglio però è di usare Google PageSpeed come uno strumento nelle tue mani per velocizzare il tuo sito e renderlo più usabile: non incaponirti alla ricerca del cerchietto verde. Un altro strumento — a mio parere anche migliore del precedente — è GTmetrix.

Le tendenze colore per il 2022 secondo Shutterstock

Shutterstock ha analizzato le immagini più scaricate del 2021, andando ad estrapolare quali sono i colori che sono stati più cercati. Da qui nasce il loro studio, a cui vi rimando: riassumendo, possiamo dire che nel 2022 Shutterstock vede una palette colori basata su colori pastello, calmi e rassicuranti. Non ci resta che vedere se, con l’uscita del colore dell’anno 2022, Pantone confermerà o meno le previsioni di Shutterstock.

+ Glassmorphism – Neumorphism

In entrambi gli stili purtroppo l’accessibilità viene sacrificata a favore dell’estetica. Nel Glassmorphism soprattutto, il contrasto tra gli elementi è quasi del tutto assente.

Neumorphism

Le sue caratteristiche sono:

  • 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

Qui invece abbiamo:

  • tutte le caratteristiche viste sopra
  • uso ricercato delle trasparenze e delle sfocature
Glassmorphism

Ha senso che mi ripeta per ancora una volta: il Design non è estetica ma progettazione, fruibilità. Per questo questi stili a mio avviso possono essere una sfida per i designer se il desiderio di questi ultimi è migliorarne l’accessibilità, ma se rimangono così come sono, insomma… io li eviterei.

Full site editing (FSE)

Passiamo ora all’altra grande novità che ci attende nel 2022, più tecnica rispetto alle tendenze viste finora, ma comunque interessante per noi che lavoriamo con WordPress: l’introduzione al Full Site Editing (FSE).

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, dai widget della sidebar, ai template e molto altro.

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

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. Torna a respirare. 🤣

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)

Supporto WebP

Che cos’è il formato WebP? È un moderno formato immagine che offre una compressione maggiore rispetto a gif, jpeg/jpg e png. Le immagini WebP sono più piccole del 26% rispetto alle png e dal 25% al 34% rispetto alle immagini jpeg.

Fino a ora 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.

Fonti
  • 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 sarà la mia bibbia

Potrebbe interessarti anche:

Come fare un sito in WordPress Il tuo primo sito web (senza ansie) con WordPress Come strutturare i contenuti del tuo sito web FSE WordPress: che cos'è il Full Site Editor introdotto da WordPress Guida al FSE WordPress: che cos’è il Full Site Editing introdotto da WordPress

Ciao, sono Laura Lonighi, Brand & Web designer freelance

Nel mio lavoro disegno la personalità visiva di un marchio e realizzo siti web ed ecommerce. Vivo nelle nebbiose (sigh!) campagne mantovane con il mio compagno e nostri due gatti di nome Brando e Briseide. Se questo articolo ti è piaciuto puoi ricevere i prossimi iscrivendoti alla newsletter che trovi in fondo al sito.

Leggi chi sono

Lascia un commento Annulla risposta

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Yunikon Design di Laura Lonighi
di Laura Lonighi
Web Designer Freelance
via Amendola, 4
46033 — Castel d’Ario (MN)
P. IVA: 02326200207
SDI: SZLUBAI

hello@yunikondesign.com

💎 Servizi

  • Brand Styling
  • Web Designer Freelance

🤖 Consulenze online

  • Brand Styling
  • Performance sito web

💌 Newsletter

Puoi cancellarti in ogni momento, cliccando sul link in fondo a ogni newsletter. Per ulteriori informazioni leggi la Privacy Policy.

Thank you!

You have successfully joined our subscriber list.

.
Rivedi i cookie
  • Privacy policy
  • Cookie policy
  • IG
  • FB
Questo sito usa diversi tipi di cookie. Puoi dare il tuo consenso cliccando ACCETTA e/o modificarlo con "Rivedi i cookie" in fondo al sito. Qui lo spiegone: Privacy policy.
ACCETTA RIFIUTA Personalizza
Rivedi i cookie

Privacy Policy

Questo sito Web utilizza i cookie per migliorare la tua esperienza durante la navigazione sul sito. I cookie classificati come necessari vengono memorizzati nel browser e sono essenziali per il funzionamento delle funzionalità base del sito. Utilizziamo anche cookie di terze parti che ci aiutano ad analizzare e comprendere come navighi questo sito. Questi cookie saranno memorizzati nel tuo browser solo se ci dai il tuo consenso: hai anche la possibilità di disattivare questi cookie. La disattivazione di alcuni di questi cookie può influire sulla tua esperienza di navigazione.
Necessary
Sempre abilitato
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurataDescrizione
_GRECAPTCHA5 months 27 daysThis cookie is set by the Google recaptcha service to identify bots to protect the website against malicious spam attacks.
csrftoken1 yearThis cookie is associated with Django web development platform for python. Used to help protect the website against Cross-Site Request Forgery attacks
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
CookieDurataDescrizione
_pin_unauth1 yearThis cookie is placed by Pinterest Tag when the user cannot be matched. It contains a unique UUID to group actions across pages.
cookielawinfo-checkbox-cookie-analitici1 yearNo description
cookielawinfo-checkbox-cookie-di-profilazione-e-social-plugin1 yearNo description
cookielawinfo-checkbox-cookie-tecnici1 yearNo description
ppwp_wp_session30 minutesNo description
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
CookieDurataDescrizione
_fbp3 monthsThis cookie is set by Facebook to display advertisements when either on Facebook or on a digital platform powered by Facebook advertising, after visiting the website.
fr3 monthsFacebook sets this cookie to show relevant advertisements to users by tracking user behaviour across the web, on sites that have Facebook pixel or Facebook social plugin.
VISITOR_INFO1_LIVE5 months 27 daysA cookie set by YouTube to measure bandwidth that determines whether the user gets the new or old player interface.
YSCsessionYSC cookie is set by Youtube and is used to track the views of embedded videos on Youtube pages.
yt-remote-connected-devicesneverYouTube sets this cookie to store the video preferences of the user using embedded YouTube video.
yt-remote-device-idneverYouTube sets this cookie to store the video preferences of the user using embedded YouTube video.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
CookieDurataDescrizione
_ga2 yearsThe _ga cookie, installed by Google Analytics, calculates visitor, session and campaign data and also keeps track of site usage for the site's analytics report. The cookie stores information anonymously and assigns a randomly generated number to recognize unique visitors.
_gat_gtag_UA_13058607_221 minuteSet by Google to distinguish users.
_gid1 dayInstalled by Google Analytics, _gid cookie stores information on how visitors use a website, while also creating an analytics report of the website's performance. Some of the data that are collected include the number of visitors, their source, and the pages they visit anonymously.
CONSENT2 yearsYouTube sets this cookie via embedded youtube-videos and registers anonymous statistical data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
CookieDurataDescrizione
_auth1 yearThis cookie is set by Pinterest that collects statistical details to track the use of its services.
_pinterest_referrer5 minutesThis cookie is set by Pinterest to track the use of its services.
_pinterest_sess1 yearThis cookie is set by Pinterest that collects statistical details to track the use of its services.
_routing_idsessionThis cookie is set by Pinterest that collects statistical details to track the use of its services.
languagesessionThis cookie is used to store the language preference of the user.
ACCETTA E SALVA
Powered by CookieYes Logo