Web UI: addio agli header rettangolari

Nonostante sia cominciato da pochissimi giorni, il 2017 ha già delineato i primi trend di progettazione per i dodici mesi a venire. Sarà un anno molto importante, quello sul fronte del design per il web e per le interfacce, dove sarà sempre il minimalismo a farla da padrone, ma anche il rinnovo delle tecniche parallasse, del design responsive e dello scrolling a pagina singola.

Fra tutte queste riconferme, tuttavia, da qualche giorno i portali tematici non sembrano parlare d’altro: il 2017 segnerà il definitivo abbandono agli header rettangolari. Una scelta dettata forse dalla necessità di infrangere canoni estetici ormai fin troppo abusati, ma anche per rendere più dinamiche pagine web e applicazioni. Quali sono i vantaggi di questa tendenza?

Con l’eliminazione degli header rettangolari si intende, almeno a livello grafico, la rappresentazione di landing page dove l’intestazione e i menu principali non siano racchiusi in classici banner, bensì in elementi grafici dalle forme arrotondate o mimetizzate con lo sfondo. È abbastanza ovvio come questa tendenza si manifesti a livello grafico, con una gestione sapiente della suddivisione delle immagini nonché con la scelta di gradienti per un migliore blending con lo sfondo; a livello di codice verranno invece applicate le ormai consolidate specifiche CSS3. Ma quali sono i vantaggi? Di seguito, alcune motivazioni.

• Dinamismo: gli header rettangolari tendono, soprattutto all’approdo con la landing page, a spezzettare il layout rendendolo poco integrato. La classica barra dell’intestazione, infatti, potrebbe mal mescolarsi con il resto della pagina, creando un’interruzione visiva poco piacevole. Optare per un header dalle forme arrotondate, ad esempio con un profilo ovale integrato con il bianco di sfondo, permetterà quindi un passaggio più dolce dall’header stesso ai contenuti ospitati nella pagina;
• one-page: come già ricordato in più occasioni, fra i trend più attesi per il 2017 vi è la riconferma dei design one-page, spesso abbinati a tecniche di navigazione single-scroll. Non è infrequente trovare in questi siti web degli header e delle barre di navigazione di tipo “sticky”, ovvero pronti a rimanere in posizione sulla parte altra della finestra del browser mentre l’utente scorre verso il basso. Questa soluzione, però, risulta poco scomoda nonché fastidiosa. Optando per un header dalle forme irregolari, che sia arrotondato oppure geometrico, permette invece di amalgamare al meglio tutte le componenti della singola pagina, rendendo il design più piacevole;
• libertà creativa: cambiare le forme dell’header significa anche uscire dai soliti schemi di progettazione, quelli ormai assodati nell’ambito del webdesign. Non è infatti così scontato sostenere che l’intestazione di un sito debba necessariamente coprire la porzione superiore della landing page, potrebbe anche trovarsi di lato, al centro della stessa landing, riportata in diagonale: uscire dagli schemi, allora, garantirà estrema soddisfazione creativa.

Specificate le principali motivazioni, utile sarà anche riportare un paio di risorse per aiutare la progettazione di header non rettangolari:

• Guida: per chi si avvicinasse per la prima volta alla definizione di header non rettangolari, CodePen ha deciso di stilare un’utile guida, comprensiva sia delle istruzioni di base sul fronte del codice che dal punto di vista grafico;
• Ispirazione: Medium ha stilato di recente una collezione dei migliori siti dall’header non rettangolare, una fonte d’ispirazione perfetta per i propri lavori.