Il web design è in continua evoluzione con sempre nuove tendenze, tecniche e idee.
Aggiornare il design e le funzionalità offerte dal nostro sito ci aiuta a migliorarne la fruibilità.
Vediamo alcune delle principali tendenze che incontreremo sempre più di frequente nel 2014, anche se non tutte sono ovviamente applicabili ad ogni sito, né vanno tutte implementate per cercare di avere un maggiore impatto sugli utenti.
14 tendenze del web design nel 2014
- Single Page Sites
Il sito a pagina singola è un tipo di design a foglio unico molto utile per i siti di piccole dimensioni che non hanno moltissimi contenuti da esporre, e garantisce uno stile di navigazione semplice ed efficace. Questo tipo di approccio è ovviamente sconsigliato per i siti di grandi dimensioni e con molti contenuti, e se l’obiettivo del design è il SEO.
Un esempio di questa tecnica di web design è: Grandriverconnection
- Scrolling
L’ampia diffusione dei dispositivi mobili sta cambiando il modo in cui i lettori accedono ai siti, costringendoli a scorrere di più la pagina per poterne leggere tutto il contenuto. Non è necessario avere tutte le informazioni a centro pagina e se da un lato si aprono nuove prospettive per la progettazione delle pagine, dall’altro le pagine troppo lunghe e ricche di contenuti possono sovraccaricare e disorientare gli utenti.
Nel 2014 le pagine web vanno pensate e disegnate in modo da coinvolgere e incoraggiare l’utente a scorrere la pagina. - Flat UI
L’interfaccia utente piatta è un concetto di web design emergente e già implementato in molti siti web.
Al contrario della tendenza precedente, lo scheumorfismo, questa tecnica si concentra essenzialmente sui contenuti e fornisce un disegno pulito senza elementi di distrazione.
Meno immagini e design semplice equivalgono a tempi di caricamento più rapidi.
iOS 7, Gmail, Facebook e Windows 8 sono tutti esempi di interfacce che hanno implementato la Flat UI. - Fixed Header Bar
La parte più impegnativa della creazione di un sito è fare in modo che la navigazione sia il più possibile semplice e intuitiva.
I menu di navigazione bloccati nella testata della pagina web costringono gli utenti a scorrere verso l’alto ogni volta che devono muoversi attraverso il sito.
Con le pagine web più ricche di contenuti e l’uso sempre maggiore dei browser mobili l’accesso a questo tipo di menu è diventato sempre più scomodo.
La soluzione per il 2014 sarà la barra di navigazione in posizione fissa che segue lo scrolling della pagina per consentire ai lettori di accedervi rapidamente, agevolandone la navigazione.
Postkudos applica questa tecnica. - Large Type
L’aumento della risoluzione degli schermi ha reso necessario aumentare la dimensione standard del carattere per rendere il testo più leggibile e chiaro.
L’uso di caratteri grandi ha un impatto immediato su chi legge e riesce a comunicare meglio l’obiettivo del sito. Se una pagina web è troppo ricca di contenuti il visitatore potrebbe decidere di non leggerla, ma in pochi secondi i large type possono mettere in risalto le voci che potrebbero interessare il lettore ed attirare la sua attenzione. - Javascript / HTML 5 Animations / CSS 3
L’avvento dell’iPhone e la sua incompatibilità con animazioni e video in Flash/Silverlight, ha accelerato la transizione verso Javascript, HTML e CSS.
Con i browser moderni, gli sviluppatori non dovranno più fare affidamento sui plugin per creare animazioni e video.
Queste tecnologie più recenti spesso non sono disponibili nei vecchi browser, ma funzionano perfettamente sui dispositivi mobili. - Parallax Scrolling
Il Parallax scrolling è una speciale tecnica di web design in cui lo sfondo, le immagini e il testo sono animati.
Mentre si scorre la pagina, testo e altri elementi grafici si muoveranno sulla pagina creando scene e modificando il contenuto.
Il curriculum interattivo di Robby Leonardi è un ottimo esempio di questa tecnologia. - Large Background
In passato usare enormi immagini come sfondo del sito era un’idea impensabile perché rallentava il caricamento delle pagine web.
Con connessioni Internet più veloci, questa problematica è sparita e la domanda che ci si pone è più che altro se una grande immagine di sfondo sia utile al sito senza creare distrazioni.
Con un design appropriato e la giusta immagine è possibile applicare questa tecnica per migliorare l’esperienza del lettore e mettere in risalto i contenuti del sito.
City of Albion adotta questa tipologia di web design. - Video Backgrounds
Insieme all’uso di immagini ad alta definizione come sfondo assistiamo a quello dei video in background progettati non per diventare il centro principale del sito, ma per valorizzarne il design e i contenuti.
Getsalestraining dà l’idea di come possiamo usare efficacemente i video background. - Separate Mobile Site
Uno dei modi più popolari per la creazione di un sito che sia fruibile dai dispositivi mobili è quello di crearne uno completamente separato spesso posizionato in un sotto-dominio del sito principale, come ad esempio ha scelto di fare Repubblica.
Quando un utente si collega da un dispositivo mobile, viene immediatamente reindirizzato alla versione ad esso destinata. Contenuti e disegno sono completamente diversi ed è necessaria la manutenzione di un doppio sito.
Nuove tecnologie stanno soppiantando e rendendo obsoleta questa soluzione in favore di nuove procedure ed in particolare verso la scelta del responsive web design. - Responsive Web Design
Ad oggi il Responsive Web Design è la migliore tecnica per progettare un sito mobile-friendly.
Piuttosto che gestire una serie completamente separata di contenuti e un diverso design, è possibile adattare il contenuto esistente alla risoluzione del dispositivo che si sta utilizzando.
Smartphone, Tablet e utenti desktop possono vedere lo stesso contenuto con un layout diverso progettato specificamente per le dimensioni dello schermo del dispositivo.
Attraverso il responsive design è possibile evidenziare contenuti importanti per chi visita il sito tramite smartphone, come orari, luoghi, o numeri di telefono.
Un esempio di responsive web design è il tema di WordPress che uso in questo blog. - High-Resolution Screen
Proprio come la televisione a definizione standard è stata superata negli ultimi anni dall’introduzione di segnali ad alta definizione, gli schermi ad alta risoluzione diventeranno comuni su computer e dispositivi mobili.
Dal momento in cui Apple ha iniziato a costruire i propri dispositivi con lo schermo retina ad alta definizione, è nata la necessità di avere grafica ad alta risoluzione nei siti web per evitare l’effetto di pixelizzazione.
Questa necessità non è impellente visto l’esigua fetta di traffico internet che occupano i dispositivi retina, ma è da tenere d’occhio per l’immediato futuro. - Third-Party Services
A volte per risolvere problematiche invece di reinventare soluzioni ogni volta, possiamo contare su servizi di terze parti che lo hanno già fatto per noi.
Se si vogliono ad esempio pubblicare foto in tempo reale di un evento, si possono integrare Instagram o Flickr, che aggiorneranno automaticamente il sito web.
I Servizi di terze parti possono anche rivelarsi utili per mostrare i video, implementare un sistema di newsletter, o raccogliere statistiche sui visitatori di un sito. - Software as a Service
Proprio come i servizi di terze parti, il Software as a Service (SaaS) ci permette di usufruire di un servizio per la risoluzione di un problema.
MailChimp, per esempio, è un sistema di newsletter gratuito fino a 2.000 abbonati e 12.000 email al mese.
Se invece ci dovesse essere la necessità di inviare più email o di gestire un numero maggiore di abbonati il servizio prevede il pagamento di una quota di sottoscrizione che sarà comunque inferiore ai costi necessari per costruire e gestire in proprio il servizio.
Se sei arrivato a leggere l’articolo fino in fondo, allora anche questo blog è un buon esempio di web design.
Per approfondire: 14 Website Trends for 2014