UX/UI Design - Restyling grafico di un sito web
Definire cosa farà il prodotto prima di progettare come lo farà.
Da Web & Graphic Designer quale sono e per deformazione professionale, ogni qualvolta visito un sito web, guardo una pubblicità in tv, mi imbatto in una locandina ecc, non posso fare a meno di criticare, sia a livello estetico che funzionale ciò che vedo. Questa mattina è accaduto ciò entrando nel sito www.surfer.com.
Com'è nata l'idea
Appena entrato nella home del sito il mio primo pensiero è stato: "Questa home è troppo scarna e il sito non è ottimizzato sul caricamento" (ho fatto anche tante altre valutazioni tecniche e professionali).
Trattandosi di un sito blog i più penseranno che più la grafica è semplice e meglio riusciranno a navigare gli utenti all'interno di un sito. Non posso sicuramente affermare il contrario ma ricordiamoci che viviamo nel mondo dell'apparire e catturare l'utente con immagini e grafiche accattivanti può fare la differenza. Inoltre negli ultimi anni le immagini hanno preso il sopravvento sui testi e la maggior parte dei siti moderni si presentano con un video o un immagine enorme utile a catturare l'attenzione del visitatore.
All'inizio di questo articolo hai letto la citazione di Alan Cooper - per chi non lo sapesse è uno degli sviluppatori del linguaggio di programmazione Visual Basic - "Definire cosa farà un prodotto prima di progettare come lo farà" . Questa frase mi ha colpito sin dalla prima volta che l'ho letta, mi è entrata in testa e l'ho resa una delle mie filosofie di vita a livello lavorativo.
Partendo da questa citazione e prendendo in considerazione gli ultimi trend di design come quello dell'utilizzo di immagini enormi - altra filosofia che ho sposato sin da subito e che cerco di applicare in ogni mio lavoro di web & graphic design -, ho aperto il mio adorato Sketch e ho cominciato a ridisegnare l'home page di surfer.com
Lo scopo
Quando avvio un progetto lo faccio, come tutti, con uno scopo ben preciso: catturare l'attenzione di chi osserva il mio operato.
Come già accennato qualche paragrafo fa, surfer.com a mio avviso non riesce a catturare l'attenzione del visitatore e questo, a meno che non parliamo di un fanatico del surf che non bada molto ai dettagli grafici e atterra sul sito per uno specifico scopo, è un difetto non di poco conto. Vi mostro subito lo screen della home attuale del sito in questione.
Breve analisi della home
Dall'immagine appena vista potete vedere quanto sia semplice il design di questa homepage.
Appena entrati nel sito ci imbattiamo in una barra di navbar molto estesa, a fondo nero, ricca di elementi per la navigazione all'interno del sito e troviamo anche le varie icone social. Proseguendo la navigazione troviamo l'ultimo articolo/video postato e subito dopo ci imbattiamo in altri articoli ovviamente divisi per categoria. Insomma, un sito semplice ma che a mio avviso non si sposa in alcun modo con il mondo al quale fa riferimento.
Fatta questa analisi ho incominciato il mio lavoro di restyling fatto solo e unicamente come esercitazione per migliorare le mie skills e per arricchire il mio portfolio lavori.
Processo di elaborazione
Innanzi tutto ho preso in considerazione il fatto che i colori - sempre secondo la mia esperienza e il mio modo di concepire il design e la grafica - di surfer.com sono completamente sbagliati. Stiamo parlando infatti, come si evince dal nome, di un sito blog dedicato al mondo del surf. Quindi perché non utilizzare una palette di colori che richiama i colori del mare? Ho deciso di partire dal Classic Blue - colore dell'anno 2020 scelto da Pantone - e da lì ho utilizzato altre sfumature di blu, immagini che richiamassero il più possibile una delle palette ideali suggerite da Pantone all'interno del suo sito - consultabile qui - un gradiente in overlay sull'immagine in background.
Ho scelto di ridurre il numero di elementi all'interno della barra di navigazione e l'ho resa trasparente - se si trattasse di un sito vero e proprio il background si andrebbe a vedere solo dopo uno scroll di 100px -.
Il primo post che troviamo all'interno del sito surf.com è un video e per rispettare l'attuale homepage del sito ho inserito un icona al di sopra del dell'immagine principale che faccia capire all'utente che può riprodurre il video. Ovviamente ho ripreso il titolo e il sottotitolo del video originale, decorandoli con delle sottolineature spesse e con un box bianco che potesse rendere leggibile il sottotitolo.
Subito dopo ho deciso di inserire il carousel degli articoli del blog navigabile grazie all'utilizzo delle frecce inserite subito dopo l'immagine in evidenza.
E le icone social che attualmente troviamo nella navbar? Le icone sociali ho deciso di spostarle in basso a destra inserendo un'unica icona di share che - sempre se si trattasse di un sito navigabile - farebbe comparire le icone social di surfer.com
Questo è a grandi linee il processo creativo che seguo tutte le volte in cui mi trovo a dover effettuare un lavoro di restyling per un sito web. Può capitare che questo processo differisca in alcuni punti - sicuramente potrebbe essere più lungo e complicato - in quanto ogni progetto è differente e ha vita propria.