Sito per medicina del lavoro, dietologia e formazione
Sito per medicina del lavoro, dietologia e formazione
A partire dal benchmark e dal brief svolto insieme alla cliente, abbiamo analizzato il sito esistente individuando i punti di forza e le criticità dell’interfaccia (navigabilità, immagini, tone of voice). A seguito di tale analisi abbiamo predisposto una nuova alberatura di navigazione ottimale per il sito.
Successivamente è abbiamo sviluppato l’interfaccia grafica (UX e UI), che ha dato vita al sito in WordPress con tema costruito su misura. Un custom composer interno prevede la predisposizione di varie tipologie di contenuti, con la possibilità di personalizzare sfondi, colori e animazioni. Di seguito presentiamo gli step di realizzazione del sito e tutti gli elementi ad hoc di cui ci siamo occupati per la personalizzazione completa.
Il sito prevede inoltre un’area riservata per il caricamento dei file, protetti e accessibili solo agli utenti abilitati.
Come primo step di creazione della nuova interfaccia abbiamo abbiamo realizzato i layout delle pagine principali e di quelle interne, arricchendole con elementi grafici, immagini e fotografie ad hoc in linea con il settore di riferimento.
Durante la fase di progettazione ci siamo focalizzati sul responsive per la corretta visualizzazione attraverso tutti i dispositivi (schermi, laptop, tablet e mobile). La struttura a blocchi colorati è flessibile, dinamica e si conforma in modo efficace a tutte le risoluzioni.
Una parte fondamentale nella progettazione di un layout coerente è la scelta di una palette colori adeguata al settore di riferimento e di facile riconoscibilità da parte dell’utente. Per il sito della cliente abbiamo individuato come colore principale l’azzurro, a partire dal quale abbiamo creato una palette monocromatica aggiungendo alcune tonalità più o meno saturate del primo esadecimale. Abbiamo inoltre inserito il bianco e il nero come colori guida per i titoli, i testi e alcuni degli elementi grafici (soprattutto di quelli in outline).
Abbiamo poi scelto e accostato due font type, uno per i titoli (h1-h6) ‘Unna’ stile regular e uno per il corpo e i bottoni ‘Lato’ in vari stili: regular, bold, italic e underline.
Per una completa personalizzazione del sito ci siamo occupati anche delle illustrazioni e delle animazioni. Per valorizzare le illustrazioni abbiamo implementato la palette di partenza con alcuni colori contrastanti e brillanti tra cui il giallo, il rosa e il bordeaux.
Per quanto riguarda le animazioni abbiamo utilizzato la libreria di GSAP, composta di diversi plugin tra i quali ScrollTrigger, che permette di controllare e avviare le animazioni allo scroll di pagina e solo quando un elemento diventa visibile sullo schermo, e DrawSVGPlugin, che permette di animare gli elementi vettoriali con diversi effetti.
Ecco un video che mostra il sito allo stato finale. Le animazioni arricchiscono il layout e rendono le pagine dinamiche. Lo slider in apertura porta da subito l’utente a focalizzarsi sulle aree di interesse che la cliente desiderava mettere in evidenza e che garantiscono una navigabilità fluida all’interno del sito.
Lo stile grafico che abbiamo scelto è semplice, pulito e nasce dall’accostamento di box colorati ai quali vengono sovrapposti elementi in outline animati che si costruiscono poco a poco allo scorrere della pagina. Per favorire la leggibilità e la fruibilità dei contenuti abbiamo realizzato una grafica di accompagnamento neutra senza rinunciare all’originalità espressa attraverso le illustrazioni completamente personalizzate.
Infine abbiamo realizzato una proposta grafica per il canale Instagram della cliente. Abbiamo progettato una bacheca con diverse tipologie di post (citazioni, ricette, call to action) e li abbiamo sviluppati singolarmente attraverso degli esempi concreti. Lo styling della pagina Instagram ha previsto anche l’ideazione di una struttura per le instastories.
