Stai cercando un’ispirazione per realizzare la grafica di siti web? In questo articolo vediamo 5 esempi, con stili completamente diversi, a cui puoi ispirarti.
Se cerchi una guida completa su come realizzare la grafica di un sito web, abbiamo scritto un articolo dedicato che puoi trovare qui.
Prima di analizzare i 5 esempi vediamo quali sono i portali principali che possiamo utilizzare per prendere ispirazione nella realizzazione di un sito web.
Il primo portale in cui trovare ispirazione è awwwards.
Awwwards raccoglie tantissimi siti che vengono votati dagli utenti per categorie selezionate oltre ad assegnare un premio giornaliero. I siti presentati sono progetti reali, già presenti online, che hanno però grafiche elaborate in grado di rispettare comunque i principi base di usabilità.
Il secondo portale è Behance.
Behance viene utilizzato dai creativi di tutto il mondo per presentare il proprio portfolio, raccogliendo su questa piattaforma i propri progetti.
Oltre a siti web su behance è possibile trovare altre tipologie di lavori creativi, come progetti di branding, graphic design e fotografia.
Il principale problema di Behance è che non tutti i progetti sono reali, visto che alcuni creativi presentano anche progetti personali che poi non sono stati realmente sviluppati.
Il terzo portale è Dribble.
Anche Dribble è una piattaforma che raccoglie tantissimi progetti creativi, a cui si può accedere solamente ricevendo un invito da un utente già presente all’interno della piattaforma.
Dribble, come Behance, presenta sia progetti reali che fittizi, e di conseguenza alcuni dei siti web presenti sulla piattaforma sono poco affidabili dal punto di vista dell’usabilità.
Passiamo ad analizzare la grafica di 5 siti web a cui ispirarsi.
Pristineacres.com
Pristineacres.com è il sito web di un’azienda che si occupa di progettazione per l’esterno, valorizzando gli spazi esterni a disposizione.
Questo sito rappresenta un esempio di grafica razionale ed elegante, perfettamente in linea con il brand che rappresenta.
I pulsanti e gli elementi della pagina sono inseriti in forma squadrate, mantenendo una costruzione geometrica ed estremamente organizzata.
Per i titoli viene utilizzato un font serif, che dona al sito un tono elegante, mentre per il corpo del testo e per i pulsanti il font scelto è un sans serif.
Nella homepage una linea continua accompagna lo scrolling della pagina, guidando gli utenti in un percorso rettilineo dall’inizio alla fine.
Esempio grafica siti web: Bethebuzz.co
Bethebuzz.co è il sito web di un’agenzia di marketing digitale, go to market & content.
Questo sito web presenta una grafica decisamente più “brutalista”.
Sullo sfondo sono utilizzate sfumature dai colori estremamente accesi, con dei box bianchi a tutto schermo nei quali sono inseriti i contenuti principali delle pagine.
I font utilizzati sono tutti non graziati, e in alcuni titoli sono presentati in dimensioni estremamente grandi. Il testo è quindi utilizzato come elemento grafico utile per aumentare l’impatto visivo nelle varie sezioni del sito web.
Anche le animazioni utilizzate sono estremamente d’impatto, rendendo la navigazione dinamica con sezioni che scorrono linearmente e altre che invece hanno uno scrolling più articolato.
Myrendezvous.ca
Myrendezvous.ca è il sito web di una catena di barbershop con un design moderno e hipster, pienamente in linea con il brand.
Partiamo da analizzare i colori utilizzati all’interno di questo sito web: grandi bande arancio e nero sono alternate a delle immagini in alta qualità che ricoprono tutto lo schermo o una parte di esso.
Il font utilizzato in quasi tutto il sito web è graziato, utilizzato anche nello stile Italic in diversi titoli presenti all’interno dell’homepage.
Come per il sito precedente le dimensioni dei titoli sono estremamente grandi e il testo rappresenta un elemento grafico fondamentale dell’intera interfaccia.
Le animazioni presenti sono leggere ma rendono la navigazione, nel suo complessivo, più fluida. Nel complesso un sito ben progettato con uno stile estremamente caratterizzato.
Esempio grafica siti web: Nodcoding.com
Nodcoding.com è il sito web di un percorso formativo estremamente pratico dedicato ad aspiranti sviluppatori.
La grafica del sito web è basata su toni leggeri ed ammorbiditi, con l’utilizzo di forme stondate e colori pastello.
In generale il sito risulta molto coerente in tutte le sue parti: animazioni, illustrazioni e font mixano un aspetto moderno e geometrico a visual che richiamano il mondo dei bambini e della scuola.
Non saremmo sorpresi, infatti, nel trovare alcuni degli elementi grafici utilizzati sulla copertina di un libro delle elementari o delle medie.
Le animazioni sono una vera chicca: estremamente coerenti, simulano in ogni task di interazione con l’utente movimenti simili a fluttuazioni e rimbalzi, mantenendo lo stile leggero e allo stesso tempo coinvolgente.
Hartmanncapital.com
Hartmanncapital.com è il sito web di un’azienda specializzata in investimenti tecnologici, come Crypto, XR, Gaming and AI.
La grafica del sito web ha dei tratti veramente chiari:
- Colori, animazioni e linee che mimano aspetti astratti digitali ed eleganti;
- Font sans-serif non geometrici;
- Le immagini riprendono l’utilizzo di luci e ombre, con un chiaro richiamo agli sfondi del sito.
Questo mix crea un aspetto generale tecnologico, elegante e una coordinazione perfetta tra i vari elementi che compongono le pagine.
In definitiva lo stile rappresenta pienamente le linee guida del brand e il mercato di riferimento.