Fw

Wordpress Creative Developer

Siti ai Raggi X: Epic Agency + [Sondaggio]

  • Analisi Siti
  • -

Appuntamento eccezionalmente di giovedì, con la rubrica Siti ai Raggi X, dove si analizzano siti di qualità da cui prendere ispirazione per i propri lavori.

Oggi vediamo Epic Agency, sito che ho “preso” da una recente raccolta di design creativi stilata da Smashing Magazine.

Analisi sito Epic Agency

Il sito rappresenta la web agency Epic, un team di 5 persone che sviluppano siti di altissimo livello.

Primo impatto

La prima cosa che ho notato è stata l’immagine dell’elmo, e inizialmente non avevo capito quale fosse l’argomento del sito. Poi ho visto il logo e letto lo slogan accanto all’elmo e ho pensato: che geni!

Quindi impatto assolutamente positivo che mi ha fatto venire una voglia matta di andare avanti nella navigazione.

Inoltre voglio riprendere brevemente un argomento che è emerso nel gruppo dei web designer italiani su Facebook, dove secondo Annalisa Riggio un layout lo si può definire vincente se presenta un particolare che tutti memorizzeranno: in questo caso l’elmo è  un elemento che difficilmente ci si scorda.

Aspetti positivi

Menu di navigazione: molto originale l’idea di mettere delle piccole frasi sopra e sotto per ogni voce di menu. Di solito ci si limita a scrivere le solite voci di menu, ma basta poco per renderle accattivanti e incuriosire maggiormente l’utente.

Analisi sito epic agency - Menu

Organizzazione: come in altri siti analizzati, l’home page già racconta molte cose al visitatore. Informazioni sulla web agency, gli ultimi lavori e gli ultimi articoli presi dal blog sono subito visibili in poco spazio.  Da apprezzare l’uso della tipografia, come ad esempio nella scritta WE ARE (AN) EPIC AGENCY.

Analisi sito epic agency - Organizzazione home

Portfolio: ottima l’idea di abbassare l’opacità alla pagina e di illuminare solo l’area dove si passa con il mouse. Inoltre viene permesso all’utente di vedere i siti nei dettagli, oppure solamente una lista. Vedremo nelle tecniche utilizzate come è stato ottenuto l’effetto dell’opacità.

Analisi sito epic agency - Portfolio

Pagina Servizi: ogni pagina presenta qualche spunto da cui prendere ispirazione. Forse la pagina dei servizi è la più originale, dove oltre all’elenco vengono mostrate alcune statistiche sul lavoro svolto fin’ora in modo molto creativo, con animazioni, scritte in verticale, icone, tutto studiato nei minimi dettagli.

Analisi sito epic agency - Servizi

Form Contatti: il form dei contatti non propone le solite etichette per i diversi campi, ma anche in questo caso delle domande meno formali che invogliano di più l’utente nell’inserire i propri dati. Intelligente l’idea di limitare l’oggetto del messaggio a tre possibilità, che fa capire quali sono i motivi per cui contattare la web agency.

Analisi sito epic agency - Contatti

Aspetti negativi

Trovare degli aspetti negativi è davvero un’impresa, ma ci provo.

Pulsante back to top: nel portfolio il pulsante back to top trae in inganno. Uno si aspetta di tornare a inizio pagina, e invece si viene rimandati in home page. Corretto

Newsletter e link social: i link social e il form di iscrizione alle newsletter, sono un po’ sacrificati nel footer e rendono più difficile la diffusione sui social. Inoltre il link di facebook porta all’home page di facebook: si vede che l’aspetto social interessa relativamente alla web agency.

Analisi sito epic agency - Social e newsletter

Tecnihe utilizzate

jQuery si è utilizzato moderatamente, per i link alle immagini, e per il portfolio.

Link immagini: passando sopra le immagini compare il link. Questa è un’ottima soluzione in quanto si fa capira all’utente quale sarà la pagina di destinazione.

Ecco come si è proceduti

Codice HTML (di una foto)

Codice jQuery (il codice si commenta da solo)

var roll_over = function() {
		$(this).children('.over').show();
}
var roll_out = function() {
		$(this).hide();
}
$('.roll').bind('mouseenter', roll_over);
$('.over').bind('mouseleave', roll_out);

Portfolio: qui invece si è usato jQuery per abbassare l’opacità nei div e “illuminando” quello su cui abbiamo il puntatore del mouse. Per ottenere questo effetto ti consiglio di andare a leggere questo tutorial.

Conclusioni

Tra tutti i siti analizzati fin’ora Epic Agency è quello che più di tutti mi ha colpito positivamente e che mi ha dato i maggiori spunti su cui riflettere e prendere da esempio per futuri progetti.

Da notare l’utilizzo di jQuery ridotto all’osso, dimostrazione che a volte  con i soli html e css si possono ottenere risultati straordinari.

9 Commenti

  1. Thank you for the nice words and the analysis.
    As for the cons of our website, we already have corrected the “back to top” issue and the facebook link

  2. Your welcome Henry 😉

    I really love your site. It gave me a lot of ideas for future projects. Congratulation for great work!

    Facebook link doesn’t work for me yet and I emptied my cache browser.

  3. Ciao Fede!! ho trovato questo sito che, penso sia interessante “sottoporre” ai raggi X.

    http://www.kosmos.it/

    Fammi sapere cosa ne pensi.

  4. Ciao Alberto e benvenuto nel blog 😉

    Ti ringrazio per la segnalazione, molto bello il sito, però nella rubrica non intendo analizzare siti in Flash 😉

  5. Innanzitutto complimenti fede per il tuo sito e le tue eccellenti descrizioni.
    Giornalmente prendo spunto dalle tue pagine e non saprei davvero come ringraziarti, sai essere preciso, sintetico ed estremamente professionale.
    Scusa l’intro un pò “da lecchino” ma ci tenevo..xDD

    In ogni caso ottima recensione di EpicAgency, sono drogato di questo sito, è geniale sotto ogni punto di vista.
    Forse questo è il miglior sito su cui hai scritto una recensione.

  6. Ciao Emanuele e benvenuto nel blog 😉

    Ti ringrazio molto per i complimenti e sono d’accordo con te sul sito Epic Agency: è di sicuro il migliore che ho analizzato fin’ora 😉

  7. […] Siti ai Raggi X – Epic Agency […]

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *