CercaEsegui ricerca
Web Design e UXD
7 elementi chiave per una moderna progettazione web

7 elementi chiave per una moderna progettazione web

1 ottobre 20147 elementi chiave per una moderna progettazione web

Ogni anno vediamo emergere sempre nuovi elementi nel campo della progettazione web. Anche se non è necessario includerli tutti nello stesso progetto, ognuno di essi contribuisce in maniera decisiva all’efficacia di conversione del tuo sito.

Fonte: Hubspot

Ora passiamo in rassegna i 7 importanti elementi che puoi includere nel design del tuo sito

1: Tipografia

Molte aziende si dotano di una particolare famiglia, stile e dimensione di un font che contribuisce alla propria identificazione in maniera immediata agli occhi dei clienti. Negli ultimi tempi il numero dei font utilizzati dai siti è cresciuto, i designers hanno ora una più ampia gamma di font nella quale scegliere quello più adatto ad ogni singolo progetto.

La tipografia di The New Yorker è riconosciuta dai suoi lettori sparsi per il mondo a causa del suo stile unico e appariscente.

thenewyorker

 

Perché è utile?

La tipografia crea un filo conduttore attraverso tutti i contenuti presenti nel sito che aiuta i lettori a navigare in maniera efficiente. Per esempio The New Yorker indirizza i visitatori da una sezione all’altra basandosi su tipografia e dimensione dei caratteri.

Quando crei il tuo marchio, è importante considerare la tipografia. Questo permetterà ai tuoi clienti di identificare immediatamente il tuo sito e il tuo marchio.

2: Design flat

Il design flat è conosciuto per la sua semplicità visiva. Invece di utilizzare effetti 3D e altre tecniche di design, il design flat utilizza semplici illustrazioni con colori brillanti.

Ad esempio Wistia's. Come si può vedere dall’immagine, viene utilizzato un look in stile minimale che si focalizza sul contenuto invece che sul design, rendendo al contempo il sito più pulito.

wistia

Perché è utile?

Perché si focalizza sui contenuti e utilizza uno stile minimalistico con più spazio bianco (detto “aria”). Sempre più designer stanno creando siti con più spazi bianchi per focalizzare l’attenzione sui contenuti invece che sovraccaricare l’interfaccia con elementi di design.

3:  Effetti rollover

Gli effetti rollover ti aiutano a capire dove sei nella pagina, quando posizioni il cursore su una parte del sito che ha questo tipo di effetti, di solito cambia colore oppure si illumina evidenziando quello che stai cercando.

Ad esempio sul sito AmeriFirst. Quando fai scorrere la barra di navigazione o i bottoni in basso, cambiano colore facendoti capire immediatamente dove stai cliccando.

amerifirst_hover

Perché è utile?

Gli effetti hover sono utili per aumentare la qualità dell’esperienza utente. Il design non è intrusivo e aiuta i visitatori a riconoscere dove stanno per cliccare.

4: Scorrere direttamente alle sezioni

Alcuni siti internet sono progettati in modo da indirizzare ogni link ad una specifica sezione nella stessa pagina. Ad esempio, UrbanBound

La navigazione su Urban bound utilizza questi spunti e, se clicchiamo sulla sezione “success stories” fa scorrere lentamente la pagina fino a tale sezione.

urbandbound

Nella sezione success stories, evidenzia il testo nella navigazione così da rendere immediatamente riconoscibile la posizione dell’utente. Lascia inalterata la navigazione per permettere al visitatore di socrrere nelle altre parti della pagina.

urbanbound_success-stories.png

Perché è utile?

Per prima cosa, si ha tutto su di una pagina, non servono numerose pagine da caricare per trovare i contenuti che cerchi. Solitamente l’ordine dei medesimi è compilato seguendo l’importanza per il visitatore.

È anche un vantaggio per i visitatori che ritornano sul sito. Potrebbero cercare delle informazioni viste di sfuggita in un momento precedente e scorrendo arriverebbero facilmente verso la sezione che stanno cercando.

5: Immagini grandi del prodotto

Molti siti business to business stanno cominciando a inserire immagini in formato grande dei loro prodotti. Questo elemento è un altra taccica importante di design che vedremo applicata sempre di più.

Diamo un’occhiata alla pagina di HubSpot nella sezione Content Optimization System (COS) per esempio.

Come si può vedere dai tre esempi sottostanti, ci sono immagini di grandi dimensioni, una per ogni parte diversa del prodotto. Le immagini sono anche responsive, specifica importante per i visitatori dai dispositivi mobili.

cos1-1

cos2-1

cos3-1

Perché è utile?

Immagini di grandi dimensioni aiutano i designers ad evidenziare le differenti caratteristiche di un prodotto in maniera più efficiente.

Aiutano anche i visitatori a pensare al prodotto visivamente, per avere una solida idea di quello che fanno le diverse caratteristiche dello stesso, invece che limitarci solamente all’uso delle parole scritte.

6: Video sul prodotto

In aggiunta all’utilizzo di immagini grandi, le aziende stanno anche cominciando ad inserire video sui proprio prodotti per parlare dei benefici e anche delle nuove caratteristiche che li caratterizzano.

Ad esempio General Electric:

 generalelectric_video1-1

generalelectric_video2-1

Perché è utile?

il 92% dei clienti B2B guarda video online e il 43% li guarda mentre sta cercando prodotti o servizi per il proprio business. Le aziende B2B devono quindi creare video sui loro prodotti perché i loro stessi utenti li desiderano.

Utilizzando, ad esempio, delle videoguide passo-passo, l’azienda può facilmente spiegare come utilizzare i propri prodotti o servizi.

7: Immagini responsive

Le immagini responsive si adattano ad ogni schermo per ottimizzare l’esperienza utente sui vari dispositivi mobili.

Il sito Uber's utilizza dei grandi sfondi responsive congiuntamente ad altri elementi di design, studiati apposta per offrire una visualizzazione ottimale su qualsiasi tipo di schermo.

Desktop:

uber_desktop

Mobile:

uber_mobile

Perché è utile?

I tuoi visitatori arrivano da qualsiasi dispositivo, che sia tablet, smartphone, desktop, notebook ecc... ed ognuno di essi deve poter usufruire dei tuoi contenuti in maniera ottimale, ciò porterà ad un innalzamento del livello dell’esperienza utente e anche a nuove conversioni.

 

Fonte: Hubspot

Stampa

2014 Img Internet srl,  via Moretto da Brescia 22 - 20133 Milano tel +39 02 700251 - fax +39 02 7002540
Privacy e Cookie Policy