Ogni settimana diamo un'occhiata a un nuovo sito Web e analizziamo il design. Indicheremo sia le aree che sono fatte bene sia quelle che potrebbero usare del lavoro. Finalmente, finiremo chiedendoti di fornire il tuo feedback.
Il sito di oggi è Annual Design Awards.
Se desideri inviare il tuo sito web in una futura Critica del design, ci vogliono solo pochi minuti. Facciamo pagare $ 24 per criticare il tuo design - molto meno di quanto paghi per un consulente per dare un'occhiata al tuo sito! Puoi saperne di più qui.
A proposito di Annual Design Awards
"Gli Annual Design Awards (soppressi ANNDAS) sono un riconoscimento globale delle comunicazioni visive all'avanguardia, create per premiare i contributi eccezionali nel settore del design. Abbiamo riunito alcuni dei più incredibili talenti e figure rispettate di tutto il mondo per giudicare questo evento globale che mira a diventare i premi premier del design e stabilire standard internazionali.
Ecco uno screenshot della homepage:
Design generale
Voglio iniziare dicendo che questo è già un sito di grande effetto. Adoro il nero in concomitanza con il pop arancione. Questa singola ripetizione di un colore brillante aiuta a richiamare gli occhi degli utenti sulle parti importanti della pagina.
Il layout è solido e contiene molto spazio bianco. Inoltre, il volume visivo degli oggetti è ben distribuito in modo che le aree importanti siano evidenziate.
Fortunatamente, sembra che le persone che giudicano il design degli altri abbiano un forte senso del design! Ora che abbiamo analizzato il tutto, scomporlo pezzo per pezzo.
Area del logo
Iniziamo nel posto più ovvio: in alto a sinistra. Qui vediamo il logo di Annual Design Awards una sorta di grafica a cerchi radianti.
Il logo è semplice ma efficace. Suggerisce un pubblico giovane e spigoloso che non ama troppo le linee pulite e il minimalismo noioso (il sito è in realtà abbastanza pulito, ma in un modo subdolo).
I cerchi sono un'idea audace eseguita in modo sottile (con gusto). È un elemento di design davvero semplice che aiuta a richiamare la tua attenzione sul logo e di conseguenza sul nome del sito. Questo non funzionerebbe su un sito ingombrante ma questa pagina è abbastanza semplice da non creare confusione visiva e raggiungere invece il suo scopo perfettamente.
Navigazione
L'area di navigazione è abbastanza semplice, solo del testo sopra una barra orizzontale con interruzioni per ogni sezione.
Mi piace molto la scelta del font qui. Mi sembra una cosa fatta su misura con @ font-face, quindi sono rimasto sorpreso quando ho sbirciato il codice e ho visto che era semplicemente Georgia italic.
Passando il mouse su una sezione si evidenzia la barra in arancione. Questo è bello, ma è un po 'strano che il testo non faccia qualcosa di buono (questo è piuttosto pignolo ma su siti dall'aspetto fantastico devo parlare di qualcosa!).
Posso capire perché il progettista non ha modificato il testo e sarebbe probabilmente un po 'difficile leggere un piccolo testo arancione su uno sfondo nero. Forse una leggerissima trasformazione CSS per ruotare il testo al passaggio del mouse potrebbe aiutare. 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 verso sinistra quando ne viene visualizzata una nuova e il testo ha un buon effetto di dissolvenza. Mi piace molto anche il bordo trasparente e i crocini di registro.
Tuttavia, il pulsante play e pause qui non lo sta tagliando per me. Ho visto una grafica che volevo guardare di nuovo ma non aveva modo di tornare indietro. Di conseguenza sono stato costretto ad aspettare che tornasse di nuovo (che ha richiesto un po 'di tempo).
Raccomando di mettere una linea di icone di piccoli cerchi che si collegano ad ogni immagine. È semplice e sottile e dà all'utente sia la sensazione di dove sono nella presentazione, sia un certo controllo sul vedere le immagini specifiche.
Sezione di entrata
La sezione successiva è quella in cui gli utenti dovrebbero normalmente iscriversi per entrare, tuttavia, questo è chiuso per ora come indicato dal grafico delle note adesive.
L'appiccicoso viola completamente il design (intenzionalmente) e fa in modo che non si possa perdere il fatto che le presentazioni sono chiuse. Funziona bene e informa immediatamente gli utenti delle informazioni che devono sapere.
La grafica sotto l'appiccicoso è un po 'di distrazione però. I prezzi sembrano stranamente posizionati, con uno che sbatte contro il rettangolo sulla sinistra e l'altro che non vi sbatte contro. Non sono sicuro di quello che 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. C'è anche il link standard footer e le informazioni social sotto il modulo di contatto.
Mi piace il fatto che il modulo di contatto sia inserito qui piuttosto che su 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 si torna quando si fa clic senza digitare nulla. Questo presenta un po 'di problemi di usabilità dato che 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 footer è fantastica, ma mi piacerebbe vedere un po 'di spazio tra le parole? e l'icona di accompagnamento. In questo momento sono un po 'schiacciati insieme.
Il tuo turno!
Ora che hai letto i miei commenti, inseriscici e dacci una mano dando al designer qualche ulteriore consiglio. Facci sapere cosa pensi sia importante per il design e cosa pensi possa essere più forte. Come sempre, ti chiediamo di essere rispettoso del designer del sito e di offrire una consulenza chiara e costruttiva priva di insulti.
Interessato ad avere criticato il tuo sito? Puoi saperne di più qui.