Vi siete mai chiesti perché una persona preferisce un sito web a un altro quando entrambi raggiungono lo stesso obiettivo? Quando si tratta di inclinare un utente e di imprimere il sito web nella coscienza dell’utente, il design del sito web gioca un ruolo importante. Tuttavia, il design di siti web non è mai stato e non sarà mai una procedura teorica da manuale. Il design dei siti web, come tutto ciò che è legato alla tecnologia, si evolve con il tempo ed è influenzato da una varietà di fattori.
In questo pezzo, esamineremo alcuni dei design di siti contemporanei più popolari, così come quelli che forniscono una migliore esperienza utente. Dato che ora siamo confinati nelle nostre case e usiamo i browser più che mai, un sito web meglio progettato si rivelerà incredibilmente efficiente per l’azienda e manterrà una base di utenti fedeli. Infine, spero che questi principi modifichino la vostra prospettiva su certe questioni e vi aiutino a migliorare il design del vostro sito.
Stile Minimalista
La prima cosa da tenere a mente durante lo sviluppo di un sito web al giorno d’oggi è mantenere il design semplice e includere solo le caratteristiche che sono assolutamente essenziali sulla pagina di destinazione. Il resto dei tuoi componenti può essere organizzato su varie pagine o in menu succinti, ma la landing page dovrebbe avere uno stile semplice.
L’unica giustificazione per questa tecnica è che meno elementi sembrano più puliti e ordinati sulla pagina web. Le poche scelte della pagina aiutano anche ad attirare l’attenzione dell’utente su certi compiti lasciando uno spazio minimo per la distrazione. Di conseguenza, se si impiegano design di base, c’è una forte possibilità che l’utente legga ciò che si vuole che legga se il colore e le dimensioni sono accettabili.
Reattività
La reattività di un sito web è qualcosa che non può essere trascurato. Dal 2017, i dispositivi mobili hanno continuamente rappresentato più della metà di tutto il traffico internet. I dispositivi mobili hanno rappresentato il 50,8% di tutto il traffico internet mondiale nel terzo trimestre del 2020. Nella parte precedente, abbiamo anche osservato quanto sia impaziente una persona mentre naviga su internet. Questo significa che trascurare la natura reattiva del tuo sito web mette a rischio più della metà del tuo traffico e dei tuoi visitatori.
Anche se la reattività non è essenziale per ogni sito web. Supponiamo che ci sia un sito web bancario con diverse funzionalità bancarie per i clienti della banca. In questo caso, è ovvio che gli utenti opereranno utilizzando i sistemi della banca. Tuttavia, la reattività è fondamentale per un sito web generale, poiché Google ha iniziato a penalizzare i siti web che non sono mobile-friendly come parte della sua strategia mobile-first. Di conseguenza, studiate i vostri consumatori, scegliete un dominio e poi andate avanti.
Layout che è mobile-friendly
Molte persone sono perplesse sulla differenza tra un sito web responsive e uno mobile-friendly. Tuttavia, non sono la stessa cosa in realtà. Un sito responsive assicura che si adatti a risoluzioni inferiori e superiori, dimensioni dello schermo e altri fattori, e si comporti in modo appropriato. Per esempio, su uno schermo più piccolo, ridimensionando il rapporto degli elementi o utilizzando l'”elemento immagine” per scegliere l’immagine adatta a quel dispositivo, o eventualmente impostando alcune media queries e lasciando che facciano il loro lavoro. Un layout mobile-friendly differisce da un design responsivo del sito web in quanto, piuttosto che ridimensionare i pulsanti, il design mobile-friendly considera quanto spazio è necessario in modo che il pulsante errato non venga colpito. Un responsive website design ridurrà i risultati della ricerca alle stesse dimensioni di un desktop, tuttavia un layout mobile-friendly può modificare l’approccio a colonne in risultati a più colonne a seconda delle dimensioni dello schermo.
In una parola, il responsive design si preoccupa solo del sito web e non delle sensazioni dell’utente mobile. Un design di layout user-friendly considera come l’utente vedrà questi pezzi, come navigherà in modo efficace, e così via. Devi prenderti cura di entrambi come sviluppatore web, e il sito risultante deve essere responsive e mobile-friendly.
Menu di Navigazione Verticale
Dal punto di vista del web design, i menu di navigazione sono abbastanza significativi e hanno bisogno di particolare attenzione. I menu di navigazione sono l’unico modo per l’utente di saperne di più su ciò che il tuo sito web ha da offrire. Tuttavia, mantenere i menu di navigazione è un compito difficile. La flessibilità orizzontale e verticale è necessaria per i menu di navigazione. Un menu di navigazione verticale è un esempio di un concetto di design comune. Inoltre, la reattività è una considerazione nel design del menu poiché più piccola è la dimensione dello schermo, più difficile è vedere e cliccare con le mani.
Menu di Hamburger
Per ottenere menu di navigazione reattivi sui dispositivi mobili, una soluzione comune di web design è quella di utilizzare menu hamburger. I menu ad hamburger sono diventati così comuni nella costruzione di siti web che gli utenti hanno già familiarità con loro e capiscono come funzionano. Nonostante il fatto che i design siano limitati sui dispositivi mobili, non si limitano a impiegare design di menu di navigazione distintivi.
L’esperienza migliora drasticamente quando la navigazione a grappolo viene rimossa. Il menu è rappresentato da una pila di linee in una piccola area, permettendo al tuo sito web più spazio per mostrare contenuti multimediali e migliorando la sua attrattiva. Quasi tutti i siti web più importanti al giorno d’oggi impiegano il menu Hamburger per facilitare la navigazione degli utenti.
Design Con Superfici Piane e Semi-Piatte
I design piatti sono l’antitesi dei metodi di design skeuomorfi, che erano popolari in passato ma ora sono limitati. Oggi, abbiamo adottato il metodo di design piatto, ed è stato un enorme successo! Nel web design, lo skeuomorfismo si riferisce alla rappresentazione della tua funzione collegandola ad una cosa reale in modo che le persone possano relazionarsi senza doverlo dire direttamente. Per esempio, una busta può essere usata per rappresentare il significato dell’applicazione in una e-mail. Molte caratteristiche, come ombre, effetti 3D, e una sovrabbondanza di intricatezza, si vedono nei design skeuomorfi. I design skeuomorfi hanno una sensazione di lusso, dal momento che assomigliano a oggetti del mondo reale. Il design skeuomorfo è mostrato nell’immagine qui sotto:
Design con superfici piane e semi-piatte
Il design skeuomorfo è l’opposto del design piatto. Non prestiamo attenzione alle sfumature o agli impatti nei design piatti. Il design piatto di un sito web aderisce alla nostra filosofia di design semplice. I design piatti sono ugualmente accolti dal pubblico degli anime giapponesi, almeno finché possono esprimere adeguatamente il contenuto. I design piatti sono semplici da realizzare e possono essere utilizzati per tutto, dai loghi alle pubblicità alle foto procedurali. I design skeuomorfi sono difficili da individuare al giorno d’oggi poiché sono così diffusi. Nel web design, l’approccio del design piatto è visto nell’immagine qui sotto.
All’inizio degli anni 2000, una macchina fotografica a rullo è stata usata per illustrare l’applicazione della macchina fotografica, cioè relativa a un oggetto del mondo reale che utilizza un design piatto.
I design semi-piatti, conosciuti anche come design Flat 2.0, sono nel mezzo dello spettro del design skeuomorfo e piatto. I design semi-piatti usano lo stesso approccio creativo dei design piatti ma includono alcune caratteristiche per renderli più attraenti, chiari e puliti. I design semi-piatti e piatti sono entrambe tecniche comuni, e il design piatto è la strada da percorrere se hai qualcosa da trasmettere sul tuo sito web!
Immagini di Eroi
La grafica degli eroi è stata abbastanza popolare negli ultimi anni. Ad essere onesti, come sviluppatore web, non riuscivo a pensare a nessuna ragione logica per utilizzare le foto eroe sui miei siti web quando le ho viste per la prima volta. Le immagini eroe sono come i caselli sull’autostrada quando si è sotto pressione per il tempo e l’efficienza. Sono grandi e occupano molta larghezza di banda perché sono sempre alla massima qualità. Tuttavia, la verità rimane che le foto eroe attirano gli utenti e offrono loro un’impressione migliore del tuo sito web rispetto ad altri siti. Le foto eroe sono anche incredibilmente attraenti, e se hai un prodotto da offrire, non c’è niente di meglio per il tuo utente che le immagini eroe. Anche se il prodotto è povero nella realtà, sembrerà più brillante e più costoso nella foto. In questi casi, usare le immagini eroe nel web design può essere incredibilmente vantaggioso, ma lo sviluppatore e il team devono prendere la decisione finale.
Immagini di Prodotti Giganti
La chiave per avere un sito web di successo è essere estremamente specifici su ciò che stai offrendo. Molte aziende B2B stanno iniziando a mostrare enormi foto di prodotti sui loro siti web per promuovere caratteristiche o elementi specifici del loro prodotto, come avrete osservato.
Le qualità di un prodotto sono accentuate quando è mostrato in una grande immagine. L’utente finale è pienamente consapevole di ciò che sta succedendo sulla pagina, e il prodotto ha l’intera e indivisa attenzione dell’utente, che è, naturalmente, l’obiettivo finale di un sito web ben progettato.
Pulsanti che indirizzano le persone a intraprendere un’azione
Un pulsante call-to-action, spesso conosciuto come CTA, è un pulsante personalizzato che viene utilizzato per attività specifiche definite dagli sviluppatori o dai clienti. I pulsanti CTA sono cruciali poiché sono l’azione chiave che un cliente o uno sviluppatore vuole che l’utente faccia. Qualsiasi tipo di distrazione si tradurrebbe in tassi di conversione dell’obiettivo più bassi. Di conseguenza, le strategie contemporanee di web design hanno bisogno del posizionamento di un pulsante CTA che sia ovvio, privo di distrazioni e che attiri le persone attraverso i suoi dintorni. Forse la foto di un eroe!
Pulsanti che non esistono
Un altro comune e importante pulsante d’azione su una pagina web è il pulsante fantasma. I pulsanti fantasma sono traslucidi (da cui il nome), mancano di un colore di riempimento distinto, hanno bordi estremamente piccoli e si fondono con lo sfondo.
Cosa succede quando i pulsanti CTA e i pulsanti fantasma coesistono sulla stessa pagina, per esempio? Dovremmo, per esempio, impiegare pulsanti fantasma come pulsanti CTA? Queste sono alcune domande che vengono poste spesso, ed è sempre una buona idea sapere come funzionano. Si dice che un utente preferisca i pulsanti CTA che sono appariscenti e luminosi (come indicato dallo studio). Di conseguenza, i pulsanti CTA e fantasma sono incompatibili, e non possiamo utilizzare lo stesso pulsante per entrambi. Quindi, che tipo di compromesso dobbiamo fare? I pulsanti CTA e i pulsanti fantasma possono essere utilizzati e posizionati insieme, ma dato che l’utente sarà attratto dalla CTA, dovreste legare la vostra azione obiettivo primaria alla CTA mentre il pulsante fantasma serve come backup. In questo modo, né il vostro obiettivo né la vostra azione chiave soffrono, e il vostro sito web riceve meno visitatori.
Vale anche la pena notare che le CTA non dovrebbero mai essere usate come pulsanti fantasma. Poiché i pulsanti fantasma non possono essere accentuati con i colori, questo errore di design del sito causerà la distrazione dell’utente. Come illustrato nell’immagine qui sopra, la combinazione ottimale è quella di metterli entrambi fianco a fianco e permettere all’utente di scegliere quale direzione vuole percorrere.
Schema di Colore
La tavolozza dei colori, lo schema dei colori o la combinazione di colori è un’altra caratteristica popolare del web design attuale. A prima vista, la tavolozza dei colori sembra essere il colore di sfondo del nostro sito web o il colore di sfondo della pagina di destinazione principale. Se queste erano le vostre idee, avete in qualche modo ragione. Nel web design, la tavolozza dei colori non appartiene a nessun componente del sito, ma piuttosto all’intero prodotto. Forse il tuo colore di sfondo è un rosso scuro che è esteticamente poco attraente, ma usare un’immagine di colore nero con una scritta bianca può attirare lo spettatore. La tavolozza dei colori è cruciale per uno sviluppatore di siti web, poiché è stata sottoposta a studi approfonditi e ha dato risultati positivi.
La combinazione di colori che scegli sul tuo sito web potrebbe rappresentare una varietà di connotazioni, come il blu per la fiducia e la sicurezza, il giallo per gli articoli gourmet, il rosso per la fiducia, e così via. Quando queste caratteristiche sono rappresentate nell’utente, egli vede il sito web in modo diverso, con conseguente aumento del valore del marchio e delle conversioni di vendita.
Disegno di Biglietti D’auguri
Con lo stile di design del sito web più semplice che comincia a prendere piede, l’uso delle carte è diventato sempre più frequente. Le schede aiutano i visitatori a consumare il tuo materiale un po’ più facilmente combinando testo e immagini in un unico componente accattivante.
Le schede individuali aiutano la distribuzione visiva dei dati, permettendo ai visitatori di accedere rapidamente a pezzi di informazioni senza essere sopraffatti.
Video di breve durata
Un’altra tecnica meravigliosa per catturare gli utenti e tenerli sul tuo sito web per un lungo periodo è quella di utilizzare brevi filmati. Su un sito web, ci sono due tipi di cortometraggi (principalmente). Un’opzione è quella di presentare la merce in un modo simile a quello che fa Amazon. Il secondo è un filmato di apertura che introduce la tua attività, servizio, o qualsiasi cosa tu stia vendendo sul tuo sito web.
Quando tali filmati sono inclusi nel processo di web design, risultano in conversioni di obiettivi più alti. Questo si verifica quando i video diventano più interessanti ed esteticamente attraenti. Inoltre, a differenza delle fotografie o del materiale, i video e le dimostrazioni dei prodotti avvicinano lo spettatore al prodotto o al servizio. Questo aumenta la fiducia dell’utente nel tuo marchio, ed è più disposto a investire in te, anche se i tuoi costi sono un po’ eccessivi.
Grafica in SVG
SVG, o Scalable Vector Graphics, è un approccio bidimensionale per utilizzare un linguaggio di markup per creare grafica vettoriale su una pagina web. Gli SVG sono un formato scalabile e leggero che è ampiamente utilizzato per la compressione dei dati senza perdita. SVG sta diventando sempre più popolare per l’uso all’interno delle pagine web come risultato di tutte queste cause, e la sua quota di utilizzo sta crescendo di giorno in giorno. Le aziende e le società amano SVG per il design del loro logo, dato che ha solo pochi KB di dimensione. Questo contribuisce a un tempo di download più veloce, e gli SVG sono ora supportati da tutti i principali browser.
L’accettazione degli SVG al giorno d’oggi si vede nella tabella qui sopra. Per identificare quali aziende usano SVG, cliccate con il tasto destro del mouse sul loro logo e scegliete “salva immagine con nome” per vedere l’estensione.svg.
C’è molto spazio vuoto.
Lo spazio bianco è uno stile di design minimalista che è spesso ammirato al giorno d’oggi. Lo spazio bianco si riferisce a mettere poco materiale sulla pagina e lasciare molto spazio vuoto. Questo metodo richiede maggiori informazioni ed è più adatto alla prima pagina. Il vantaggio di impiegare il white space web design è che l’utente non può sfiorare il materiale disordinato perché ce n’è meno ed è più concentrato. Il materiale lungo può distrarre l’utente, con il risultato che l’utente non ottiene le informazioni necessarie.
Poiché il nostro cervello umano si è evoluto, lo spazio bianco sembra anche pulito e ordinato, cosa che ci piace. L’utente ricorda il sito web come risultato di questa ammirazione, e invece di sfrecciare tra vari elementi e possibilità, l’utente rimane sulla pagina.
Tipografia
La tipografia impiegata nel web design è incentrata su tutto il contenuto testuale del sito web. Il carattere che stai usando, l’altezza del carattere che stai usando, l’interlinea, il colore del carattere, la lunghezza della linea, e così via sono tutti esempi di tipografia. Lo scopo ultimo della tipografia è che il contenuto scritto del tuo sito web sia facilmente comprensibile. Altrimenti, l’utente userà rapidamente il pulsante indietro.
Il carattere utilizzato sul sito web è l’aspetto più significativo della tipografia. Quando si sviluppa un sito web, ci sono tre criteri essenziali da tenere a mente. Innanzitutto, il carattere dovrebbe essere facilmente accessibile e comprensibile. Così ovvio che l’utente potrebbe anche non notarlo e cominciare a concentrarsi sul carattere piuttosto che sull’informazione. In secondo luogo, il numero totale di caratteri usati nel sito non dovrebbe mai superare i due, e credo che usare un solo carattere sia l’opzione ideale. Infine, se hai le risorse e il tempo da dedicare allo sviluppo del marchio, è sempre preferibile utilizzare il tuo carattere piuttosto che quello predefinito. Il tuo carattere è un’estensione del tuo marchio. Anche se stanno leggendo informazioni promozionali su un sito web di terzi, dovrebbero essere in grado di associare il carattere alla tua azienda.
In termini di dimensioni dei caratteri, le seguenti sono le gamme raccomandate:
- La dimensione del carattere sui dispositivi mobili dovrebbe essere tra i 12 e i 16 punti.
- La dimensione del carattere per i dispositivi tablet dovrebbe essere tra 15 e 19 punti.
- La dimensione del carattere su un dispositivo desktop dovrebbe essere tra 16 e 20 punti.
Tuttavia, dovrebbero essere utilizzati insieme alle vostre intuizioni, come 20 punti per i titoli e così via. Spetta ai designer e ai clienti scegliere la dimensione del carattere e il colore per le foto degli eroi e altre attrazioni basate sui caratteri, che devono essere esteticamente attraenti. Il tipo di font, d’altra parte, non può essere compromesso.
Compatibile con tutti i principali browser
Quando un sito web non appare correttamente (come dovrebbe) su più browser, versioni di browser o sistemi operativi, si sviluppano problemi di compatibilità cross-browser. I problemi di compatibilità cross-browser sorgono come risultato dei diversi motori di base dei browser. Browser diversi decidono anche quali caratteristiche vogliono mantenere e quali rimuovere dai loro sistemi. Se un sito web usa ancora tali caratteristiche o non è stato aggiornato a quelle più recenti, non renderà correttamente, e molti affari ne risentiranno.
Il test cross-browser è una linea guida di base da seguire quando si valuta la compatibilità cross-browser. Il test cross-browser può essere fatto manualmente o tramite servizi online. Tutto dipende da chi è il tuo pubblico di riferimento e qual è lo scopo finale del tuo sito web. Per esempio, se stai creando un sito web per i lavoratori di una banca, generalmente non avrai bisogno di siti responsive. La tua matrice di browser dipenderà anche da casi come il nostro, dove molto probabilmente useranno Internet Explorer o Mozilla Firefox, come la maggior parte delle banche. Di conseguenza, create, testate e iterate fino ad avere un sito web che sia cross-browser compatibile.
Accessibilità del Sito Web
L’accessibilità di un sito web è un aspetto del web design che permette a tutti, compresi quelli con menomazioni, di accedere ed esplorare un sito web. I gadget elettronici, come i telefoni cellulari, includono sempre più spesso tali possibilità. Queste impostazioni dovrebbero essere compatibili con il tuo sito web. Una di queste opzioni di accessibilità che si avvale dell’ascolto del testo scritto è la lettura dei contenuti.
Includendo l’accessibilità del sito web nel vostro sito, sarete in grado di espandere il vostro pubblico generale e ottenere un certo riconoscimento per integrare le persone con disabilità. L’accessibilità del sito web può anche aiutare coloro che non hanno disabilità a connettersi con vari dispositivi nei loro account, così come le persone con capacità di invecchiamento.
Caricamento più veloce ottimizzato
I clienti sono sempre grati per un servizio rapido. È il motivo per cui molti consumatori scelgono Amazon Prime per la sua consegna più veloce. Lo stesso si può dire della velocità con cui si carica un sito web. Secondo uno studio di Google, se un sito web impiega più di tre secondi per caricarsi, il 53% dei consumatori lo abbandonerebbe.
Questo mette sotto pressione gli sviluppatori del sito web per fornire parti che si caricano rapidamente. Questa caratteristica dell’attuale web design è collegata a molti altri componenti di questa lista e comporta l’uso di strategie intelligenti per offrire intere informazioni rapidamente. Uno di questi approcci può essere il rendere la metà superiore della pagina rapidamente o rendere la pagina leggera utilizzando un design molto semplice. Inoltre, Google ha iniziato a penalizzare i siti web che impiegano più tempo a caricare nel suo fattore di indicizzazione. Di conseguenza, se tutte le altre caratteristiche sono uguali, un sito web più lento può essere posizionato dietro gli altri.
Ottimizzato per il SEO
Vogliamo mostrare il nostro prodotto al mondo intero dopo aver finito di sviluppare il sito web. Il metodo più semplice per raggiungere questo obiettivo è essere elencati negli indici di Google e di altri motori di ricerca, facendo sapere alla gente che esistiamo! Per farlo, dobbiamo ottimizzare il nostro sito web secondo le linee guida del motore di ricerca. L’assegnazione di un meta tag, il tag doctype e i tag di intestazione corretti sono solo alcuni di questi. C’è una pletora di altre regolazioni di ottimizzazione del sito web e del codice che si possono trovare su internet. Tuttavia, ricordatevi sempre di ottimizzare il vostro sito web per i motori di ricerca prima di rilasciarlo, poiché questo è un componente cruciale del web design attuale. Dopo tutto, a cosa serve se nessuno vede mai quello che abbiamo fatto?
Conclusione
Siamo arrivati alla conclusione di questo pezzo dopo aver digerito molti consigli. Tuttavia, tutti sono stati cruciali e importanti per la vostra professione e le vostre pratiche di sviluppo, poiché vi hanno familiarizzato con le tendenze e i miglioramenti attuali del web design. Devi aver afferrato un concetto essenziale che molte cose girano intorno al giorno d’oggi leggendo tutto questo post: il design minimalista. Le moderne strategie di web design includono design minimalisti, e come regola generale, se hai qualcosa che vuoi che il tuo utente veda, impiega un design semplice. Una tela bianca con una frase di carattere autodidatta in 30-40 punti neri e una grafica piatta che indica il testo non può essere trascurata.
Lo stesso si può dire dei vari metodi di design. Di conseguenza, se avete un sito web o state pensando di svilupparne uno, studiate i punti e progettate una struttura chiara per esso. Tenete a mente che il sito web dovrebbe fare appello a una vasta gamma di demografie, compresi giovani e anziani, abili e disabili, utenti di cellulari e tablet, e così via. Una volta che hai il design in mano, ottimizza il sito web per i motori di ricerca, lancia il sito web, e poi, siediti e divertiti!
