6 Fattori dominanti nel web design: 6° Illustrazioni

6 Fattori dominanti nel web design: 6° Illustrazioni

La sesta puntata della nostra rubrica sulle tendenze che domineranno il web design è dedicata agli elementi di sfondo e alle illustrazioni. Scopriamo insieme perché devono essere di alta qualità.

Illustrazioni, elemento fondamentale per la personalizzazione

Un sito dallo sfondo personalizzato sicuramente ha il pregio di distinguersi dalla massa e di assumere una particolare caratterizzazione che ne delinea l’identità, per questo è un elemento molto importante.

Per tale scopo esistono le cosiddette “immagini stock” ovvero quelle trovate direttamente sul web che si possono scaricare o acquistare abbastanza facilmente.
Tuttavia queste, essendo immagini “preconfezionate”, non pensate appositamente per un’esigenza specifica, catturano sempre meno l’attenzione degli utenti e non impattano in modo decisivo sull’esperienza di fruizione del sito.elementi di sfondo
Al contrario, immagini uniche e di alta qualità permettono una vera e propria personalizzazione delle pagine web e consentono di farsi apprezzare maggiormente dai visitatori che le consultano.
Una delle tendenze del web design, quindi, è quella di usare per lo sfondo immagini che siano il più possibile originali e personalizzate.
Se si ha un po’ di dimestichezza in materia di grafica una scelta consigliabile può essere quella di realizzare personalmente le immagini, altrimenti si può declinare il compito ad un grafico professionista.
Agli sfondi è anche possibile aggiungere elementi multimediali personalizzati come video o immagini animate.
Chiaramente bisogna sempre considerare quanto questi elementi possano influire sulle performance del sito di destinazione.

Anche le immagini da inserire nel testo sono un elemento da non trascurare assolutamente.
Le immagini possiedono un linguaggio efficace ed incisivo e inoltre hanno il potere di caricare il testo di maggiore significato, talvolta chiarendo contenuti che possono risultare al primo sguardo molto complessi.
Una selezione accurata delle immagini e delle illustrazioni, quindi, garantisce una comunicazione più efficace.
Anche in questo caso vale lo stesso discorso delle immagini di sfondo: le parole d’ordine sono “originalità” e “personalizzazione”.

Con questa puntata si conclude la nostra rubrica: siete pronti a creare il sito web dei vostri sogni?
Per un lavoro perfetto può essere utile rinfrescarsi la memoria dando un’occhiata alle puntate precedenti.
Le trovate qui:

1 – Il Layout
2 – Lo Storytelling interattivo
3 – Lo Scrolling
4 – I Tempi di caricamento 
5 – Il Font

6 Fattori dominanti nel web design: 5° Font

6 Fattori dominanti nel web design: 5° Font

Semplice, sinuoso, solido o artistico: il carattere utilizzato per le intestazioni o per la scrittura dei contenuti è molto importante per conferire un tono particolare a quanto si vuole comunicare. La scelta del font più adatto è un momento piuttosto delicato per quanto riguarda il design del sito web: meglio renderlo attraente o più facilmente leggibile? Preferibile utilizzare sempre lo stesso, o variare a seconda della sezione? Ecco qualche semplice consiglio che potrebbe aiutare nella scelta migliore.

Il Font: una scelta da non sottovalutare

font

“Non esistono font belli o brutti, ma solo font adeguati o inadeguati a un progetto” (Daniel Will-Harris)

Il primo passo verso la scelta del font più adatto deve essere l’elaborazione di una chiara idea di ciò che si vuole comunicare con il testo selezionato. La priorità deve essere il suscitare un’emozione in chi legge e ciò di cui dobbiamo essere certi è precisamente quale emozione abbiamo intenzione di scatenare. La dimensione ed il carattere del testo sono un’ottimo trampolino per veicolare nel lettore la reazione adatta al nostro messaggio, che sia la sobrietà, la passione, la curiosità o la sfarzosità. Nulla deve essere affidato al caso, sia per quanto riguarda il testo vero e proprio che nell’estetica. I due fattori fondamentali per rendere la nostra strategia di comunicazione coerente all’idea che vogliamo trasmettere sono la fruibilità del contenuto e la leggibilità del testo in funzione dell’argomento trattato. Come affermato dal famosissimo designer Daniel Will-Harris: “Non esistono font belli o brutti, ma solo font adeguati o inadeguati al progetto.” Sante parole!

Il percorso per la scelta della grafica testuale giusta è lungo e pieno di ostacoli. Proprio per questo motivo la via della sperimentazione è sempre una scelta azzeccata: provare e riprovare, tentando di mettersi nei panni del lettore e cercando di capire quale messaggio possa arrivare a prescindere dalle nostre reali intenzioni. Non è semplice riuscire a non essere scontati andando però sopra le righe in maniera coerente: proprio per questo lo studio alle spalle del progetto deve essere reale e durare a lungo. Non facciamoci spaventare, il tempo trascorso nell’inquadrare con precisione la propria idea non è mai perso. Il consiglio è quello di provare, per quanto possibile, a variare l’utilizzo del font a seconda della sezione apposita del tuo sito: siamo certi che non tutto ciò che hai da comunicare abbia la stessa importanza, né tanto meno che ogni area del tuo sito abbia l’obiettivo ti suscitare la stessa reazione. Cambia quindi il tuo carattere a seconda della sezione, cercando in ogni caso di rimanere coerente con il filo conduttore che vuoi dare al tuo progetto.

Inventa, crea e cerca sempre di stupire, ma ricorda: non perdere di vista il tuo vero target, vale a dire le persone a cui il tuo progetto è indirizzato. Agisci secondo ciò che ti ispira, finalizzando sempre il tuo lavoro in direzione del pubblico che miri a conquistare. Continua a seguirci per non perderti l’ultima puntata del nostro viaggio nel mondo del graphic design. Se ti sei perso le precedenti puntate, eccoti i nostri suggerimenti su Layout, Storytelling, Scrolling e Tempi di Caricamento.

6 Fattori dominanti nel web design: 4° Caricamento

6 Fattori dominanti nel web design: 4° Caricamento

Eccoci giunti alla quarta puntata della nostra rubrica sulle tendenze del web design. Oggi parliamo di un elemento da non trascurare: i tempi di caricamento delle pagine web. Se qualche anno fa il tempo di caricamento di un sito non era un elemento che influiva in modo determinante sulla sua qualità, oggi le cose sono decisamente cambiate.

Tempi di caricamento: un fattore fondamentale per l’attenzione dell’utente

Chi visita un sito internet, infatti, si aspetta tempi di risposta molto veloci ed è stato stimato che circa il 47% degli utenti abbandona il sito se sono necessari più di 3 secondi per aprire una pagina.

Inoltre tempi di caricamento eccessivi determinano: loading
– minor numero di pagine consultate
– minori vendite dei siti e-commerce
– minori download di applicazioni
– minori possibilità che un utente ritorni sul sito

La lentezza del caricamento di un sito può dipendere da fattori esterni al sito stesso, come la lontananza del server dall’utente oppure dal traffico registrato in particolari momenti.
Altri fattori invece dipendono dalla “pesantezza” degli elementi multimediali.

Abbiamo già parlato di quanto immagini, video ed altri elementi multimediali possano valorizzare i contenuti dei testi, costituendo una vera e propria guida che ne vivacizzi la lettura.
Tuttavia, se da un lato è indispensabile che le creazioni grafiche siano di ottima qualità, dall’altro elementi troppo pesanti possono rallentare il caricamento delle pagine e incidere negativamente sull’esperienza di consultazione del sito da parte dell’utente, soprattutto se pensiamo che molti di essi vi accedono da mobile o non possono sempre usufruire di una connessione dalle massime prestazioni. In questo scenario appare chiaro come la scelta di questi elementi è un fattore da valutare con attenzione.
Valutate, quindi, quali elementi sono davvero utili a migliorare la fruizione dei contenuti e quali invece possono rivelarsi superflui e quindi sono da eliminare.
Inoltre, per una fruizione più agile, è bene che questi elementi siano caricati solo se chi visita il sito lo decide espressamente: in alcuni casi, ad esempio, sarebbe meglio evitare i video che partono in automatico o le gif animate che fanno altrettanto, lasciando al visitatore la facoltà di scegliere se visualizzarli o meno; allo stesso modo è possibile considerare l’ipotesi di creare link di collegamento dove accedere a contenuti multimediali specifici.
In questo modo la fruizione è gestita dall’utente il quale, oltre a godere di una migliore esperienza di navigazione, nel momento in cui scegliere cosa vedere, sarà disposto ad aspettare anche qualche secondo in più nell’attesa del caricamento!

Continuate a seguire la nostra rubrica e scoprite quali sono le altre tendenze ad essere le più influenti nel mondo del web design.
Se avete perso le altre puntate della nostra rublica dedicate al Layout, allo Storytelling Interattivo e allo Scrolling potete recuperarle cliccando sui link.

6 Fattori dominanti nel web design: 3° Scrolling

6 Fattori dominanti nel web design: 3° Scrolling

Siamo giunti alla terza puntata del nostro percorso lungo le tendenze che domineranno il web design. Oggi vi parleremo di un fattore molto importante: lo Scrolling. Avere le idee chiare circa il messaggio che si vuole mandare al pubblico è in un certo senso la pietra miliare della comunicazione. Che contributo voglio dare a chi mi legge? Quali informazioni voglio che raggiungano per prime? Che idea voglio dare di ciò che sono e ciò che faccio? La presentazione dei contenuti è dunque un passaggio fondamentale per far capire ai visitatori cosa offro, in che modo lo sto facendo ed in che modo possono trovare agevolmente ciò di cui hanno bisogno.

Lo Scrolling, un aiuto per “esplorare” il sito web

Lo scrolling nella home page ha un ruolo importante nell’aiutare chi visita il sito nello spostarsi da un settore all’altro, ricercando le aree di suo interesse che poi può raggiungere cliccando. Solitamente la tendenza è proprio quella di stimolare un’interazione da parte del lettore: accedo al sito, esploro la pagina iniziale, clicco sul contenuto che mi interessa. Ciò però implica un grande lavoro alla base da parte di chi il sito l’ha creato nello stabilire una gerarchia tra i contenuti offerti, in modo da posizionarli strategicamente in base alle esigenze proprie e del target a cui si mira.

Scrolling infinito

Quando le idee non sono invece così chiare o al contrario si ritengono tutti i contenuti offerti degni di nota allo stesso modo, può subentrare un fattore decisivo nel riuscire ad adattare alle proprie esigenze l’impostazione del sito web. Trattasi dello scrolling infinito, che permette al visitatore di accedere a tutte le informazioni presenti semplicemente scorrendo lungo un’unica e lunghissima pagina. Questa tecnica era momentaneamente passata di “moda”, ma nel nuovo anno potrebbe prepotentemente tornare alla ribalta. Perché? Semplicemente perché è il formato utilizzato anche dai social. Pensate alla home page di Facebook o Instagram: basta scorrere lungo lo schermo ed appariranno man mano i contenuti e le informazioni che siete curiosi di conoscere. Anche lo scrolling infinito ha, però, le sue regole. Come prima cosa c’è bisogno di definire con precisione i vari contenuti, facendo si che i singoli elementi siano facilmente identificabili da chi legge. E’ necessario quindi evitare sovrapposizioni di paragrafi che potrebbero rendere il tutto eccessivamente confuso, deviando dall’idea di ordine e linearità di cui uno scrolling del genere ha bisogno. La domanda è: uno scorrimento eccessivamente essenziale seppur pulito, può far correre il rischio di annoiare il visitatore? Domanda pertinente, ma anche a questo problema c’è una risposta.

Scorrimento parallax

every last drop

La pagina iniziale del sito everylastdrop.co.uk, esempio perfetto di scorrimento parallax

In moltissimi siti web moderni lo scorrimento parallax è stato considerato come giusto compromesso tra la linearità dello scrolling infinito e l’interattività dello storytelling. Gli effetti visivi mantengono alta l’attenzione del visitatore che, per di più, è spinto a continuare lo scroll per sapere come la “storia” che stiamo provano a raccontare per coinvolgerlo vada a finire. L’evoluzione della pagina progredisce di pari passo con le interazioni, trattenendo (o provando a trattenere) l’utente incollato allo schermo. Un esempio? Date un’occhiata al sito Every Last Drop: vi sfidiamo a non arrivare fino in fondo!

Anche in soluzioni come questa, però, ci sono ostacoli da affrontare. Cosa fareste se ad ogni scroll un fastidioso buffering della pagina vi impedisse di andare avanti nella vostra esplorazione della pagina? Quasi sicuramente la abbandonereste dopo pochi minuti. L’ottimizzazione del caricamento è dunque una priorità per chi vuole utilizzare lo scrolling infinito…ma di questo ci occuperemo nella prossima puntata! Continuate a seguirci e nel mentre, se le avete perse, recuperate le due precedenti puntate sul layout e lo storytelling interattivo.

6 Fattori dominanti nel web design: 2° Storytelling

6 Fattori dominanti nel web design: 2° Storytelling

Vi presentiamo la seconda puntata dedicata alle 6 tendenze che quest’anno domineranno il mondo del web design. Oggi è la volta dello Storytelling interattivo. Un sito internet, una volta che è stato raggiunto dall’utente, deve affrontare una sfida molto ardua: quella di catturare la sua attenzione e tenerlo incollato allo schermo del computer.
Per questo è importante che offra contenuti di qualità.
I contenuti di qualità devono raccontare senza stancare, informare senza annoiare, comunicare senza stufare e si ottengono quando le informazioni di base, ad esempio quelle sulla storia aziendale, sui prodotti in vendita o sui valori condivisi non solo sono scritte in modo semplice ed efficace, ma riescono anche a coinvolgere chi le sta leggendo.
Quando questi contenuti assumono un’impronta narrativa e vengono impostati in modo da raccontare una vera e propria storia in grado di emozionare il lettore parliamo di Storytelling .

Storytelling, quando le parole non bastano

A volte, soprattutto se le informazioni sono tante o particolarmente ostiche, le parole da sole non bastano.
In questo caso lo Storytelling va ottimizzato.
Un metodo per ottimizzare lo Storytelling e dare ai contenuti quel tocco in più rendendo la loro fruizione più fluida e accattivante è quello di arricchire il testo scritto con contenuti multimediali:
è così che lo storytelling diventa interattivo.

Video, immagini e animazioni avranno il compito di guidare il lettore nell’esplorazione del sito, vivacizzando un testo che altrimenti potrebbe risultare troppo noioso, o movimentando una pagina evitando che sia troppo statica o banale. Un ottimo esempio di Storytelling interattivo lo troviamo sul sito Museum of Mario in cui è possibile scoprire l’evoluzione del personaggio Super Mario Bros tramite testi e animazioni con cui poter interagire.

Super Mario

Lo Storytelling interattivo lega il visitatore alla pagina e ne incoraggia una reazione positiva.
Bisogna però fare attenzione ad evitare elementi multimediali troppo pesanti, che potrebbero rallentare le performance del sito. Lo Storytelling interattivo può essere strutturato in diversi modi e avvalersi di elementi differenti a seconda dei risultati che si vogliono ottenere. Con lo Scrolling Infinito, ad esempio si possono raggiungere risultati davvero sorprendenti.
Ma questa è un’altra Story: seguiteci e lo scoprirete nel nostro prossimo articolo.

Se vi siete persi la prima puntata dedicata al Layout? No problem, basta un click per recuperare!

6 Fattori dominanti del web design: 1° layout

6 Fattori dominanti del web design: 1° layout

Il 2017 è ormai iniziato e lo sviluppo del web design è diventato sempre più rapido. Quali sono i fattori che ne influenzano l’evoluzione? Chi lavora nel mondo del design ha un obbligo morale e professionale molto ferreo: rimanere costantemente aggiornato ed adattarsi alle tendenze del momento. Questo concetto conta ancor di più nel mondo del web, dove tutto cambia e si trasforma con velocità impressionante. Se tempo fa le tendenze del web design avevano una durata più o meno lunga, oggi tutto scorre in maniera molto più fluida, con il bisogno di rimanere sempre sul pezzo ed avere il fiuto talvolta di agire da precursori. Il numero di persone che navigano in internet si è allargato in maniera spaventosa e la dimensione di un sito web deve dunque essere ad immagine e somiglianza dell’utente che intende visitarlo. Le parole d’ordine sono dunque due: informazioni e fruibilità.

Chi visita un sito deve riuscire non solo a trovare tutto ciò che cerca, ma deve farlo anche in maniera semplice ed immediata. Proprio per questo motivo un sito web deve essere strutturato per poter reagire in maniera dinamica e flessibile agli stimoli di chi ne usufruisce, a partire dal dispositivo che utilizza fino alla presentazione dei contenuti che vuole consultare. La nuova frontiera è dunque quella del RESPONSIVE DESIGN, influenzato da una serie di fattori che ne potrebbero garantire il successo nel prossimo futuro. Noi ne abbiamo individuati sei ed oggi inizieremo presentandovi il primo: il layout.

Due Layout per andare sul sicuro

Il primo passo che bisogna affrontare quando creiamo il nostro sito web è la struttura grafica. Come regolarci? In base a quanto affermato in precedenza, ciò a cui dobbiamo pensare è come permettere in maniera semplice ed immediata all’utente di reperire le informazioni che offriamo. Proprio per questo motivo con il layout è consigliabile non esagerare in creatività e stravaganza: concentrati sulla linearità ed evita la complessità. Un sito che a prima vista appare chiaro ed ordinato invoglia ancor di più chi lo visita ad esplorarlo in tutte le sue parti, proprio perché diventa un’operazione non solo interessante ma anche facile. Quale utilizzare allora? I layout migliori per questo scopo e che molto probabilmente saranno quelli di numerose interfacce nel 2017 sono sostanzialmente due.

web-design-layout

Card based design, uno dei layout che spopolerà nel 2017

Il primo è il cosiddetto “menu hamburger”: un menu a tendina che offre una presentazione chiara dei contenuti, attraverso un pulsante semplicissimo da trovare. Inizialmente rappresentava la soluzione ideale per i dispositivi mobili, ma per la sua praticità è stato adattato anche ad interfaccia per desktop. Perché hamburger? Il pulsante del menu ricorda vagamente gli strati di un panino “≡“. Ah, gli americani…

La seconda tendenza da seguire è quella della Card based design: la pagina è strutturata in box cliccabili con pulsanti che invitano l’utente all’azione per accedere al contenuto. Questo tipo di design ha fondamentalmente due enormi vantaggi, entrambi riconducibili alla versatilità: il primo è quello di poter adattare le grafiche dei box in base all’estetica del prodotto che si presenta, adattandolo alle esigenze di chi vuole magari leggere articoli informativi o acquistare degli oggetti concreti. Il secondo è quello di poter agevolmente spostare i box all’interno delle varie sezioni del sito, seguendo appunto la tendenza e mettendo in risalto un prodotto rispetto a un contenuto a seconda del momento e del gradimento dei visitatori.

Attraverso queste due proposte, i principi del RESPONSIVE DESIGN vengono seguiti al meglio, conferendo dei vantaggi agli utenti del sito e, di conseguenza, a chi il sito l’ha concretamente creato. Continua a seguirci e scopri gli altri cinque fattori da non prendere sotto gamba. Alla prossima puntata!