Web Design Critique # 13: Annual Design Awards
Ogni settimana diamo un'occhiata a un nuovo sito Web e analizziamo il design. Indicheremo sia le aree che hanno funzionato bene sia quelle che potrebbero usare un po 'di lavoro. Infine, finiremo chiedendoti di fornire il tuo feedback.
Il sito di oggi è Annual Design Awards.
Esplora Envato Elements
Se desideri inviare il tuo sito Web per essere presentato in una futura critica al design, bastano pochi minuti. Facciamo pagare $ 24 per criticare il tuo design - molto meno di quanto pagheresti per un consulente per dare un'occhiata al tuo sito! Puoi saperne di più qui.
A proposito degli Annual Design Awards
“The Annual Design Awards (soprannominato ANNDAS) è un riconoscimento globale di comunicazioni visive all'avanguardia, istituito per premiare i contributi eccezionali nel settore del design. Abbiamo riunito alcuni dei talenti più straordinari e figure rispettate da tutto il mondo per giudicare questo evento globale che mira a diventare i principali premi di design e stabilire standard internazionali. ”
Ecco uno screenshot della homepage:
Design generale
Voglio iniziare dicendo che questo è già un sito fantastico. Adoro il nero in combinazione con i pop di arancia. Questa singola ripetizione di un colore brillante aiuta ad attirare l'attenzione degli utenti sulle parti importanti della pagina.
Il layout è solido e contiene molto spazio bianco. Inoltre, il volume visivo degli oggetti è ben disperso in modo da evidenziare le aree importanti.
Fortunatamente, sembra che la gente che giudica il design degli altri abbia un forte senso del design stesso! Ora che abbiamo analizzato il tutto, analizziamolo pezzo per pezzo.
Area logo
Partiamo dal posto più ovvio: in alto a sinistra. Qui vediamo il logo degli Annual Design Awards una sorta di grafica a cerchio radiante.
Il logo è semplice ma efficace. Suggerisce un pubblico giovane e spigoloso non troppo appassionato di linee pulite e noioso minimalismo (il sito è in realtà abbastanza pulito, ma in un modo subdolo).
I cerchi sono un'idea audace eseguita in modo sottile (fatto con gusto). È un elemento di design davvero semplice che aiuta ad attirare la tua attenzione sul logo e, di conseguenza, sul nome del sito. Questo non funzionerebbe su un sito disordinato, ma questa pagina è abbastanza semplice da non creare confusione visiva e invece raggiungere il suo scopo perfettamente.
Navigazione
L'area di navigazione è abbastanza semplice, solo un po 'di testo sopra una barra orizzontale con interruzioni per ogni sezione.
Mi piace molto la scelta del carattere qui. Sembra qualcosa di personalizzato con @ font-face, quindi sono rimasto sorpreso quando ho dato una sbirciatina al codice e ho visto che era semplicemente il corsivo della Georgia.
Passare il mouse sopra una sezione per evidenziare la barra in arancione. Questo è carino, ma sembra un po 'strano che il testo non faccia altrettanto (questo è abbastanza pignolo ma su siti fantastici devo parlare di qualcosa!).
Posso capire perché il designer non ha cambiato il testo e probabilmente sarebbe un po 'difficile leggere un piccolo testo arancione su sfondo nero. Forse una leggera trasformazione CSS per ruotare il testo al passaggio del mouse sarebbe di aiuto. Non è un grosso problema se viene ignorato sui browser più vecchi e sarebbe un bel cenno allo stile del logo.
Presentazione
Adoro le presentazioni JavaScript, quindi penso che questa sezione sia fantastica. L'immagine scorre a sinistra quando ne viene visualizzata una nuova e il testo ha un piacevole effetto di dissolvenza. Mi piacciono molto anche il bordo trasparente e i segni di ritaglio.
Tuttavia, il pulsante play e pause qui non mi sta tagliando. Ho visto una grafica che volevo rivedere ma non avevo modo di tornare indietro. Di conseguenza sono stato costretto ad aspettare che si ripresentasse (cosa che ha richiesto del tempo).
Consiglio di mettere una linea di piccole icone circolari che si collegano a ciascuna immagine. È semplice e sottile e offre all'utente sia la sensazione di dove si trovano nella presentazione sia un certo controllo sulla visualizzazione di immagini specifiche.
Sezione di ingresso
La sezione successiva è dove gli utenti normalmente si iscriverebbero per entrare, tuttavia, per il momento questo è chiuso come indicato dal grafico della nota adesiva.
Il sticky viola completamente il design (intenzionalmente) e lo rende in modo da non perdere il fatto che gli invii siano chiusi. Funziona bene e informa immediatamente gli utenti delle informazioni che devono conoscere.
La grafica sotto lo sticky è comunque un po 'fonte di distrazione. I prezzi sembrano stranamente posizionati, con uno che si imbatte in quella scatola rettangolare a sinistra e l'altro che non si imbatte in esso. Non sono sicuro esattamente cosa sta succedendo qui, ma sembra un po 'fuori.
Piè di pagina e modulo di contatto
L'ultima area che vedremo è la parte inferiore della pagina in cui è possibile registrarsi per ricevere informazioni. Ci sono anche i collegamenti piè di pagina standard e le informazioni social sotto il modulo di contatto.
Mi piace che il modulo di contatto sia inserito qui anziché in una pagina dedicata e che ci siano solo due campi da compilare. Ho notato che le etichette dei campi scompaiono quando si fa clic nella casella e non ritornano quando si fa clic senza digitare nulla. Questo presenta un piccolo problema di usabilità mentre stavo facendo clic sulla pagina ma non ero sicuro di quale casella fosse per il nome e quale fosse per l'e-mail al mio ritorno.
Infine, l'area del piè di pagina sembra fantastica, ma mi piacerebbe vedere un po 'di spazio tra le parole "Seguici" e l'icona di accompagnamento. In questo momento sono un po 'schiacciati insieme.
Il tuo turno!
Ora che hai letto i miei commenti, chiedi aiuto e dai ulteriori consigli al designer. Facci sapere cosa pensi sia fantastico del design e cosa pensi possa essere più forte. Come sempre, ti chiediamo anche di essere rispettoso del progettista del sito e di offrire chiari consigli costruttivi privi di insulti aspri.
Interessato ad avere il tuo sito criticato? Puoi saperne di più qui.
