Cosa si dovrebbe considerare quando si progettano loghi per siti web

Mark Max Henckel Ultimo aggiornamento 21.10.2020
9 Min.
Logo web design
Ultimo aggiornamento 21.10.2020

I loghi per i siti web seguono regole completamente diverse da quelli per la stampa o altre comunicazioni. I requisiti per i loghi e le insegne sono cresciuti. Ti mostriamo le linee guida e gli strumenti per creare il tuo logo web.

C'è un confine molto permeabile tra il web design e il graphic design. I designer grafici spesso si concentrano sulla stampa, progettando cancelleria aziendale, poster, annunci e loghi. I web designer, d'altra parte, progettano siti web, newsletter, banner e, naturalmente, loghi. Alcuni mescolano entrambe le aree di business, offrono design per la stampa E per il web. Per cui per il cliente finale non è riconoscibile chi può e forse dovrebbe fare cosa. Poi i grafici, che sono più a loro agio nella stampa, creano disegni per i siti web - e mettono i loghi di stampa sul web. D'altra parte, è piuttosto l'eccezione che i web designer sviluppino interi design aziendali.

Dovrebbe essere ovvio per chiunque abbia un "occhio grafico" o una professione di grafico che un logo su un sito web ha requisiti diversi da uno su carta da lettere o su un edificio aziendale. Con l'avvento degli smartphone e dell'internet mobile, i requisiti per i loghi e le insegne (queste sono piccole grafiche che possono essere usate per i loghi) sul web sono ancora una volta cambiati e sono diventati più specifici - ma anche più severi. Alla fine, non è così complicato. Eppure ci vuole una certa esperienza e aplomb per sviluppare un buon logo per un sito web.

Tre linee guida per creare un logo web

Ci sono tre punti fondamentali da considerare quando si progetta un logo:

  1. Formato orizzontale: il logo appare in alto a sinistra, è così che gli utenti se lo aspettano. A volte è anche permesso nel mezzo del sito web. Ma per risparmiare spazio prezioso e attirare l'attenzione degli utenti sull'essenziale, ha senso prendere in considerazione le abitudini generali di visualizzazione delle persone - con un logo in formato orizzontale nella parte superiore del lato sinistro.
  2. Strutture chiare: è molto importante considerare la dimensione del logo su uno smartphone o un tablet. Ma anche molti desktop e laptop hanno o una risoluzione molto alta, quindi molto spazio, o una diagonale dell'immagine piuttosto piccola. In entrambi i casi, il logo può apparire piuttosto piccolo. Tuttavia, deve ancora funzionare bene alle piccole dimensioni.
  3. Nessun reclamo: Molti clienti, ma anche progettisti, sentono l'inclinazione a volte irresistibile di mettere un claim sotto il logo. Testo nella foto. Questo ha poco senso. Non solo è una questione di spazio, ma è anche quasi impossibile da leggere sugli smartphone. Senza contare che questo esclude un testo prezioso dall'indicizzazione di Google (SEO).

Mi rendo conto che queste tre semplici "regole" per creare un logo sono discutibili. Perché ovviamente si possono trovare dei contro-esempi o delle marche che più o meno (vogliono) avere le proprie regole. Ma questi sono poi marchi molto speciali e di successo - e anche qui le eccezioni dimostrano la regola.

Ma cosa rende i loghi di successo? Il modo migliore per scoprirlo è guardare i loghi e/o le insegne di aziende di successo e di grandi dimensioni. I loghi più brillanti che conosco sono quelli di Daimler (la stella di Mercedes), Apple (con la mela), VW, BBC o la M di McDonalds. Naturalmente ci sono molti altri esempi. E la maggior parte di loro risale a un tempo in cui non c'era internet. Tuttavia, i loghi si evolvono nel tempo, proprio come fanno i marchi e le aziende.

weblogos

Idealmente, ci sono loghi che si adattano ai diversi formati di uscita. Anche i loghi preferiti appena menzionati sono fulgidi esempi di questo. Funzionano ovunque e si adattano ai rispettivi media con i loro requisiti specifici. Logico: una carta intestata ha bisogno di qualcosa di diverso da un'insegna al neon su una casa, e un sito web ha condizioni diverse da un biglietto da visita.

Signet & word mark in rete

Questo post non è un workshop completo su come creare un logo perfetto. C'è certamente di più che leggere un post sul blog. Ma dovrebbe aiutarvi a capire meglio la questione del logo sul vostro sito web - e per questo a trovare soluzioni di maggior successo.

Solo un rapido riassunto: Cos'è un logo? Wikipedia dice:

"Un logo è un segno grafico che rappresenta un soggetto specifico. Questo può essere un'azienda, un'organizzazione, un individuo o un prodotto".

Finora tutto bene. Un logo può essere un marchio di parole, come COCA COLA, GOOGLE o ACER. Può essere un sigillo, come PLAYBOY, SHELL e MERCEDES. Ma il più delle volte, i loghi consistono in un marchio di parole E in un segno. Negli esempi di firme di cui sopra, c'è sempre una variante con e senza il marchio della parola.

Questo vale anche, per esempio, per McDonalds con la caratteristica M che tutti conoscono. Il logo McDonalds è disponibile con il nome e con il claim (mi piace), ma la M è sempre lì. Sul sito di McDonalds, per le ragioni menzionate sopra, hanno risolto in modo tale che troverete questo M solo in alto a sinistra della navigazione - e la navigazione si sposta man mano che si scorre. Solo che la M è ancora lì ad un certo punto. Lo trovo intelligente e poco ingombrante, perché la cosa più importante è sempre visibile: il sigillo, la "M".

Guardiamo il logo sul sito del WWF, per prendere un esempio dal regno più politicamente corretto. Il famoso panda, che potrebbe anche stare in piedi da solo, è posto sopra le lettere WWF, l'abbreviazione del World Wildlife Fund. Penso che il sito web sia abbastanza ben fatto (TYPO3, a proposito), ma si rifiutano di inchiodare la navigazione principale. Questo è risolto in modo intelligente. Occupa un po' di spazio, ma contiene tutto l'essenziale.

Attraverso la tecnologia del mega menu, mostri tutto quello che c'è da vedere nella pagina al secondo livello nella navigazione. Se chiami il mega menu con il mouseover, solo il panda rimane visibile. È un logo verticale, ma la sua implementazione è molto buona. Anche questo logo viene da un'epoca in cui non c'erano siti web. Sono sicuro che il WWF avrebbe creato un logo diverso oggi - uno in formato orizzontale.

Esempi con il logo in formato orizzontale sul sito web

RAIDBOXES è ovviamente un esempio. Un segno di parola, in formato orizzontale ovviamente - altrimenti non si potrebbe leggere. Definisco questo logo un successo. Perché ha un alto valore di riconoscimento, che è l'essenza di un buon logo. Inoltre, funziona anche in piccolo sui dispositivi mobili. Questo è vero per molti siti dell'internet moderno, come Google, Facebook, Amazon, Microsoft, YouTube e molti altri.

RAIDBOXES logo
Il logo di RAIDBOXES

Possiamo dire la stessa cosa WordPress .org sul sito. Ci sono delle specifiche per la visualizzazione del logo WordPress che sono visibili a tutti: una guida di stile. Il logo ha la W come un sigillo e il marchio di parole in formato orizzontale, ma anche verticale. Sul sito web, il logo verticale è ovviamente omesso. Per buone ragioni, il logo con il sigillo non è solo mostrato in orizzontale, ma anche relativamente grande sopra la navigazione. Anche qui, il menu non è fisso, il che non toglie l'usabilità del sito.

Esempi di pagine con WordPress

Un altro affascinante sito web che ci serve da esempio è VOGUE America. Trovo l'implementazione coerente e appropriata al marchio. Ma piuttosto debole nella navigazione fissa dopo lo scorrimento. Perché il grande logo al centro scompare e appare in Klein in alto a sinistra, dove ci aspettiamo che sia. Questa è una sfida generale con i marchi di parole che devono essere ridimensionati sul sito web. I bordi si "sfilacciano" e diventano sfocati. Lo stesso fenomeno può essere osservato con SPIEGEL Online (SPON). Per entrambi, la scusa può essere che i loghi sono stati creati prima dell'era di Internet. La stessa cosa di VOGUE si può vedere anche con la rivista americana TIME, che gira su WordPress .

Ha un aspetto un po' diverso all'open NASA, anch'esso alimentato da WordPress e anche con un logo. Tuttavia, circondato da un bell'elemento grafico. Questo logo - questa volta all'interno di una navigazione fissa - è abbastanza grande da mostrare l'elemento di un'orbita ancora riconoscibile. Lo trovo riuscito, anche se si può vedere lo sfrangiamento delle lettere anche qui. Ecco perché non sono un fan dei marchi di parole puri, preferisco le insegne con abbreviazioni.

BBC AMERICA è anche un sito WordPress . Ha fatto un lavoro brillante con il design e il logo. Sì, sono un fan della BBC. Ma trovo anche il logo brillante e memorabile - come esempio di successo di loghi in formato orizzontale. A proposito, questo sito fa anche a meno di una navigazione fissa dopo lo scorrimento - qui il contenuto è in primo piano.

Creare (aver creato) un buon logo per il web

Così ora potete vedere molto chiaramente che i loghi non sono una stregoneria e a volte sono molto semplici. Derivano il loro genio dalla semplicità e dalla coerenza per riflettere un marchio indipendente. Un buon logo è quindi molto facile da fare, ma non facile da pensare o da trovare.

Design grafico o no: puoi creare un buon logo per te e per i tuoi clienti con il tuo occhio graficamente allenato e alcune semplici regole. Certo: il modo più semplice sarebbe quello di assumere un grafico. Questo è il modo più sicuro e garantito di massima qualità - le eccezioni dimostrano la regola. Ma è anche l'opzione più costosa. Sul web, abbiamo indovinato, ci sono portali che esternalizzano questi servizi all'estero. Così si può comprare un buon design grafico in paesi con un salario orario più basso ad alta qualità. Per esempio, dall'Ucraina, dall'India, dall'Indonesia, dal Sud America, ma anche dagli Stati Uniti, ecc. Gli svantaggi sono la situazione giuridica in caso di controversie, la comunicazione e quindi a volte il coordinamento.

Dato che io stesso ho un occhio grafico e voglio fare il più possibile da solo, ho preso un approccio diverso con il mio logo su PUBLISHING ON THE NET. Ho cercato e ho trovato un sigillo su Envato. Ho pensato che sarei riuscito a costruire un logo per esso. Perché il sigillo che mi piaceva aveva il contenuto sbagliato. Un logo deve assolutamente adattarsi al soggetto e al carattere della tua azienda. Così ho trovato un segno @ che volevo usare, ma con una "P" nel cerchio @. All'inizio, mi sono cimentato da solo - ma non ho abbastanza esperienza con i vettori in Illustrator. Così, senza ulteriori indugi, ho chiesto allo sviluppatore del cartello via Envato se poteva farlo per me - e a quale costo. Era possibile e il costo era assolutamente ragionevole. Ora ho questa "P" con il marchio della parola in formato orizzontale:

Esempio di logo online
Il logo di PUBLIZIEREN IM NETZ

Strumenti di ricerca

Questo è esattamente lo stesso approccio che uso per i miei clienti. Se il design del logo è desiderato, suggerisco prima di tutto di scegliere un segno che corrisponda all'idea di business e al nome. Non uso solo Envato o Envato Elements per fare questo. Cerco anche su Google per i loghi, o su Iconfinder, iStockPhoto e altri fornitori di piccola grafica. Poi li mostro al cliente, ne scelgo uno o due insieme a lui e costruisco un logo in formato orizzontale.

Importante: fate attenzione al copyright, il vostro logo non deve avvicinarsi troppo a uno già esistente. Anche se comprate dei cartelli, dovete controllare la licenza: è valida per il vostro scopo professionale senza restrizioni temporali e spaziali? E anche per l'uso come logo?

I buoni loghi sono semplici ed esprimono l'idea di business il più possibile. Funzionano sul sito web perché sono in formato orizzontale. Possono essere visualizzati in bianco e nero. E possono essere visualizzati su una carta intestata o un biglietto da visita - leggermente modificati e adattati, forse con un claim sotto.

Riassunto

Creare un buon logo è relativamente facile. Avete bisogno di un concetto chiaro e di un'idea molto buona. Puoi prendere ispirazione da altri marchi e siti web di successo. Parlare con i tuoi colleghi e amici può anche aiutarti a trovare un'idea semplice e brillante. Ma siamo onesti: non deve essere brillante, adeguato può essere sufficiente, buono sarebbe più che sufficiente. Puoi cercare loghi o sigle su piattaforme grafiche.

Naturalmente, i personaggi più o meno astratti dovrebbero avere qualcosa a che fare con la professione che rappresentano. Per cui anche qui ci possono essere combinazioni divertenti. O derivazioni coerenti, per esempio quando pensiamo alla famosa mela di APPLE. Chi avrebbe pensato di prendere una mela con un morso mancante. Ma questo piccolo divertente "perturbatore" rende questo logo così ingegnoso.

Spero che ora abbiate qualche indizio per creare un prossimo grande logo per il World Wide Web. Vi auguro buona fortuna e buon divertimento.

Immagini: Jeff Sheldon, Rohan Vijay

Hai delle domande su Design di loghi per siti web? Sentitevi liberi di usare la funzione di commento. Vuoi essere informato sui nuovi articoli sul web design e sul marketing online? Allora seguici su Twitter, Facebook o tramite la nostra newsletter.

Mark Max Henckel - Webdesigner di Amburgo. Media designer di formazione (stampa), lavora come web designer dal 2000. Prima a mobile.de, dal 2003 lavoratore autonomo. Da 2005 blogger su diversi argomenti su diversi blog propri. Come freelance dal 2007 e 2008 presso SPIEGEL ONLINE, coinvolto nel lancio di einestages.de all'interfaccia tra programmazione e redazione. Più tardi alla società di marketing SPIEGEL Quality Channel (Spiegel QC/Spiegel Media). Freelancer per libri.de e varie agenzie grafiche e informatiche. Dal 2008 specializzato in WordPress .

Articoli correlati

Commenti su questo articolo

Scrivi un commento

Il tuo indirizzo e-mail non sarà pubblicato. I campi obbligatori sono contrassegnati con *.