Guida ai principali errori grafici in un Sito Web, da non commettere

Condividi
Condividi su linkedin
LinkedIn
Condividi su facebook
Facebook
Condividi su twitter
Twitter
Condividi su whatsapp
WhatsApp
Condividi
Condividi su linkedin
Condividi su facebook
Condividi su twitter
Condividi su whatsapp
Guida ai principali errori grafici in un Sito Web da non commettere. Gli errori grafici comuni che non devono essere fatti professionalmente.
Cosa troverai in questo articolo

Guida ai principali errori grafici in un Sito Web da non commettere. Gli errori grafici comuni che non devono essere fatti professionalmente.

Realizzare un Sito Web Professionale, come ho già scritto più e più volte, non è sicuramente una pratica da sottovalutare né tantomeno semplice da realizzare.

Esistono regole tecniche ed accorgimenti creativi standard, se così vogliamo definirli, ma non è tutto.

In questa guida cercherò di prendere in considerazione le occorrenze più rilevanti in termini di errori da non commetteremai!

Perché un Sito Web è importante per l’Azienda?

Un Sito Web Professionale è un lavoro assolutamente artigianale, quasi sartoriale e, come tale, deve essere eseguito ad hoc.

In rete, esistono molti Siti Web che sono disastri assoluti, macchie nere della categoria e spesso perché sono stati realizzati da non addetti ai lavori o, semplicemente, con poca esperienza nel settore.

Tuttavia, ci sta. Il punto è che molti di questi rappresentano Aziende più o meno note e, di conseguenza, ne rappresentano il Brand.

Di certo di parte ma io stesso, quando atterro su un Sito Web, se noto evidenti errori o se mi accorgo che è stato fatto palesemente con i piedi, diffido immediatamente e passo oltre.

Questo cosa comporta?

Un potenziale mancato introito da parte dell’Azienda che l’ha realizzato vuoi attraverso il proprio organico, vuoi tramite agenzie esterne.

Deve essere ben chiaro il concetto:

Un Sito Web rappresenta il Brand e, come tale, deve essere gradevole, autorevole, ispirare fiducia e deve essere ben strutturato e organizzato.

Quali sono gli errori più comuni nella realizzazione di un Sito Web?

Diciamo che ne esistono di tutti i tipi a partire da errori tecnici per finire con quelli grafici passando per quelli relativi ai contenuti.

Data l’enorme estensione sarebbe impossibile citarli tutti e, quindi, prenderò in esame i più classici ed evidenti.

In questo secondo articolo vedremo insieme quali sono i principali errori grafici comuni da non commettere in un Sito Web.

I principali errori grafici da evitare in un Sito Web

Colori dei link errati

L’usabilità di un Sito Web, ovvero come questo si presta ad essere usato e navigato da un utente, passa anche e soprattutto dalla corretta visualizzazione dei collegamenti ipertestuali, anche detti link.

Un link è composto da un codice html che deve comprendere una URL di riferimento (href) un’istruzione per indicare dove aprire questo collegamento (target), un attributo testuale che spieghi di cosa si sta parlando (title) e da altre eventuali informazioni per indicarne il tipo.

A livello visivo, poi, un link deve essere formattato e pensato al fine di trasmettere immediatamente all’utente che si tratta di un collegamento. Vengono utilizzati stili grafici (CSS) formattati in istruzioni di codice secondo le regole del W3C.

Molto spesso, il suo stile viene sottovalutato e, quindi, diventa difficile capire velocemente se esistono e dove sono i link all’interno di una pagina/articolo.

Errori grafici | Usiamo i link in modo corretto 

Soluzione

Per prima cosa cerca sempre di utilizzare l’accent (colore fondamentale) del logo del tuo Brand. In base a quello costruisci intorno, sfondi, cromie e design.

Difficile che tu abbia un logo il cui accent sia il nero assoluto ma, anche fosse, evita di usare lo stesso colore per link e testi. Se usi un colore in esadecimale (HEX) come #000000 per i link, usa magari lo #777777 per il testo o viceversa. Ricerca sempre il contrasto adeguato senza esagerare e, per quanto possibile, cerca sempre di utilizzare la decorazione underscore ovvero la sottolineatura. Un link sottolineato risulterà sempre più visibile all’occhio umano di uno che non lo è. Tuttavia, puoi anche pensare di usare stili diversi come ad esempio scrivere i link in MAIUSCOLO e non sottolineati con l’underscore che appare quando ci vai sopra con il mouse.

Con gli stili … ci si può sempre divertire …

Immagini di sfondo errate

Usare sfondi come immagini, video o slider animate non è strettamente necessario ma, di sicuro, aumenta il piacere visivo di un Sito Web.

Tuttavia, è sempre bene ricordarsi di progettare questi media nel modo corretto, evitando che siano troppo pesanti, troppo invasivi o di dimensioni sbagliate.

Principali errori grafici | Immagini di sfondo errate 

Soluzione

Come puoi vedere dall’esempio sopra, tratto dal mio Brand GPArT, la prima immagine non “riempie” la larghezza totale del Sito Web. Ci potrebbe anche stare come dimensione predefinita ma, quello screenshot, è stato ricavato utilizzando un display da 27″ con risoluzioni altissime.

Quindi, se e quando usi un’immagine di sfondo, accertati sempre che riesca ariempiretutta la dimensione dello schermo indipendentemente dalla sua grandezza.

Per far questo ti vengono in contro i CSS @responsive. Adatta, centratura e dimensione dell’immagine in base alla dimensione della sorgente di utilizzo.

Quei buchi neri a fianco sono davvero orrendi e sono sinonimo di imperfezione e mancanza professionale.

Immagini errate

I principali errori grafici delle immagini inserite in una pagina/articolo riguardano il peso, le dimensione e la correttezza della URL di riferimento.

Magari, distratti, magari incuranti, può capitare di cancellare un’immagine precedentemente caricata e usata senza, però, eliminare il suo riferimento allegato alla pagina/articolo. Ne consegue che, quando la pagina viene caricata, la URL, ancora presente, cerca di caricare l’oggetto e … noi vediamo un errore e uno spazio vuoto.

Inoltre, quando carichi un’immagine, ricordati sempre di non superare mai i limiti di peso consentiti, pena il rallentamento del caricamento della pagina stessa. E ancora, rispetta sempre le dimensioni dello spazio dove verrà inserita l’immagine; dimensioni errate vogliono dire sfruttamento maggiore delle risorse del server per effettuare il ridimensionamento al volo e, quindi, un rallentamento del Sito Web.

Principali errori grafici | Immagini errate 

Soluzione

Per quanto riguarda il primo problema, quando cancelli un’immagine dal pannello “media” di WordPress, ricordati di eliminare ogni suo riferimento contenuto all’interno delle pagine/articoli.

Diversamente, per gli altri due problemi, ricordati sempre che il peso di un’immagine non dovrà mai superare i 150/200 Kb massimi. Inoltre se devi inserire un’immagine in uno spazio largo 400 px, dovrai caricare un media che sia largo al massimo 400 px.

Qualora volessi usare un’immagine già caricata precedentemente e usata come sfondo e, quindi, di dimensioni importanti, non usarla mai da inserire anche in spazi più piccoli. Preparane una versione con le dimensioni corrette.

Mancanza dell’attributo ALT

Sia per le immagini che per i link, esistono attributi di codice come il title e l’alt, utili a fornire informazioni circa l’argomento trattato, il contesto collegato o il contenuto di un’immagine.

Poiché Google non è ancora in grado di capire da solo il soggetto di un’immagine, dobbiamo aiutarlo a comprenderlo. Come? Usando l’attributo alt (alternative) che sta per testo alternativo.

Errori grafici | Attributo ALT 

Soluzione

Questo attributo è molto importante e non solo ai fini SEO ma anche e soprattutto per limitare i danni nel momento in cui l’immagine di riferimento non venga visualizzata; il Sito Web è lento, è stata cancellata o si sta consultando una pagina/articolo progettata per utenti con difetti alla vista.

Ricordati, quindi, di inserire sempre l’attributo alt. Puoi farlo attraverso gli editor visuali o manualmente da codice come segue alt=”descrizione dell’immagine”.

La cosa importante è che tu lo faccia.

Menu troppo lungo

A meno che tu non stia lavorando su una dimensione full-width di un Sito Web, di certo, la parte del contenuto principale sarà compresa tra i 1280 e i 1800 px. Pertanto, avendo a disposizione una larghezza fisica fissa, è sempre buona norma cercare di non inserire troppe voci di menu.

Fregarsene, significa stravolgere il design del tema di un Sito e, salvo avere specifiche conoscenze tecniche per sistemare la cosa, ne sarebbe penalizzato tutto il look-and-feel.

Errori grafici | Menu troppo lunghi 

Soluzione

Cerca sempre di limitare il numero di voci del menu principale, sfruttando, magari, i relativi sottomenu. Se poi, proprio non ne puoi fare a meno, allora cerca di formattare il tutto attraverso i CSS e andando a modificare caratteri, spazi, dimensioni e design.

Palette dei colori errate

Il concetto è pressoché identico a quello relativo al colore dei link. Anche qui si parte dall’accent del logo del Brand e poi, attraverso strumenti e tool, ne vengono determinate eventuali cromie per il Sito Web.

Un’accozzaglia di colori diversi, link che non rispettano i colori istituzionali di una Brand o tonalità mischiate, non trasmettono di certo professionalità ed autorevolezza alla tua Azienda.

Principali errori grafici | Schema colori errato 

Soluzione

Presta molta attenzione a questo punto perché è di fondamentale importanza per te e il tuo Brand. Ricordati che più un Sito Web è coerente, pulito, preciso e usabile e maggiore sarà la possibilità che possa generare traffico ed interesse.

Se non sai quali colori o schemi web usare, puoi sempre rivolgerti ad un Web Designer esperto oppure cercare di usare da solo tool come quello fornito da COOLORS. Carica un’immagine del tuo logo e lui farà il resto

Ovviamente ti suggerirà gli schemi colore web più adatti ma sarai sempre tu a decidere se e come … sicuramente un’ottima partenza.

Conclusioni

Bene, anche la seconda parte di questa guida agli errori da evitare in un Sito Web è terminata.

Mi auguro di esserti stato d’aiuto e nel caso, ti ricordo … sono a tua disposizione.

Per ora … a presto e grazie.

Condividi su linkedin
Condividi su facebook
Condividi su twitter
Condividi su whatsapp
Gian Luca Partengo

Gian Luca Partengo

Professionista del Web e del Marketing da oltre 20 anni. Ha lavorato per importanti Agenzie e Aziende italiane e ha creato e seguito passo a passo il Brand di numerosi Clienti. Oggi sviluppa progetti altamente professionali a partire da un'analisi sullo stato di salute di un Sito Web e della sua SEO Organica, fornendo anche consulenza a privati e aziende.

Potrebbero Interessarti anche ...

Partners

BRiDWEB ringrazia e suggerisce …

Get in Touch

Ci sono molti modi per iniziare una conoscenza o rimanere in contatto e BRiDWEB ti mette a disposizione i migliori: modulo di contatto, e-mail, WhatsApp o chiamata.
Scegli tu quale usare.
BRiDWEB | Brand Identity Web | Web Identity Professionale | Brand Identity Professionale

è il momento di far volare il tuo Sito Web.
Che ne dici, facciamo due chiacchiere?