Critica al web design n. 11: Scott Block
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 è il portfolio personale di Scott Block, un web designer del Maryland.
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 di Scott
“Vivo a Columbia, nel Maryland, a breve distanza da Baltimora e dalla capitale della nazione. Quando avevo dodici anni, ho combinato la mia passione per i corvi di Baltimora con il mio crescente interesse per la tecnologia e ho iniziato a creare siti sui corvi. Da allora, ho affinato diligentemente le mie capacità e ora realizzo siti Web per vari individui e organizzazioni. Ora sono abile nel combinare html con css, javascript, php e ajax, per creare siti Web belli e funzionali. ”
Ecco la homepage del sito:
Sebbene ci sia sicuramente qualche potenziale qui, ci sono molte cose che vorrei correggere in questa pagina. Vediamoli uno per uno.
Combinazione di colori
I colori utilizzati sul sito di Scott creano una tavolozza abbastanza bella quando vengono rimossi individualmente come mostrato di seguito.
Tuttavia, non vado pazzo per la distribuzione dei colori. Sembrano implementati casualmente in punti della pagina semplicemente per motivi di variazione anziché essere applicati con scopo e logica. Pensa a ogni scelta di colore che fai e al modo in cui si lega al resto del contenuto della pagina.
Logo
La sua posizione in alto a sinistra sul sito rende questo logo la prima cosa che gli utenti vedono quando visitano il palco. Vuoi cogliere l'occasione per fare una prima impressione forte. Sfortunatamente, sento che questo logo sta per scadere.
Vedo come vengono lavorate le forme a blocchi nelle lettere, presumibilmente per legare al cognome del designer, ma non funziona. L'SB ha una scarsa leggibilità e sembra un po 'datato.
Navigazione e intestazione nel suo insieme
L'area di navigazione è abbastanza semplice, solo un po 'di testo con divisori orizzontali e una sottolineatura per indicare la pagina corrente. Sono tutto per mantenere la navigazione semplice, quindi penso che questa zona sia ben fatta.
Passando il mouse su un collegamento nella navigazione, viene visualizzata un'icona sotto il logo Scott Block. Questo è un effetto ordinato che non ho mai visto eseguito in questo modo (con l'effetto hover così lontano dal link).
Quando si considera l'intera area dell'intestazione, ci sono alcuni problemi importanti che potrebbero utilizzare l'indirizzamento. Come ho detto sopra, l'effetto hover dell'icona è pulito, ma sta causando alcuni problemi. Quando non si passa con il mouse su un collegamento nella navigazione, c'è un grande spazio vuoto accanto alla copia dell'intestazione che ti fa chiedere perché non è allineato con nulla.
Un modo possibile per aiutare questo è applicare un'icona allo stato predefinito che cambia in un'altra icona quando si passa con il mouse su un collegamento e ritorna all'icona originale al termine del passaggio del mouse. Sfortunatamente, quando è presente l'effetto hover icona, il logo e l'icona creano uno stack verticale imbarazzante.
Nel complesso, lo spazio negativo in quest'area potrebbe utilizzare una ristrutturazione completa. Oltre al problema con l'icona mancante, il logo principale occupa solo troppo spazio verticale e crea strani spazi vuoti.
Area in primo piano
Mi piace la ripetizione in un design e posso vedere come gli angoli di questa sezione rispecchino quelli del logo, ma poiché non funziona davvero nel logo, lo stesso vale qui. La natura inclinata dei titoli sembra un po 'strana così come il motivo incrociato creato dai colori qui.
Inconsciamente, il tuo cervello vuole collegare i due elementi dello stesso colore, ma qui le due aree non sono correlate.
Inoltre, ci sono una serie di effetti al passaggio del mouse su quest'area che non servono a nulla. Passando il mouse sopra una sezione, viene creata un'ombra discendente. Il web ci ha insegnato a riconoscere tale attività come un'indicazione che ciò su cui stiamo passando il mouse è un'area cliccabile. Tuttavia, queste aree non sono selezionabili e causano la sensazione che fossero solo fonte di confusione per l'utente.
footer
Il footer è abbastanza semplice, ma ancora una volta vediamo che potrebbe usare un po 'di raffinazione.
Prima di tutto, il pulsante è in una posizione scomoda. Durante la progettazione, fai sempre attenzione a non conficcare le cose solo perché hai spazio. Un forte allineamento a sinistra viene stabilito qui dal testo ma poi rovinato dal posizionamento del pulsante.
Inoltre, l'animazione del passaggio del pulsante è un po 'troppo. Qui viene utilizzato uno sprite di immagini e c'è un'animazione tra i due stati dei pulsanti in cui è possibile vedere una parte dell'immagine scorrere mentre l'altra scorre. Non è facile dire cosa sta accadendo all'inizio e quindi è un po 'sconcertante.
Raccomandazioni generali
Ho presentato alcune critiche piuttosto dure sopra e penso che sarebbe meglio provare a legare tutto insieme. Ecco i miei suggerimenti:
Per iniziare, ridisegna il logo in qualcosa di più moderno e orizzontale. Quindi stabilire un allineamento a sinistra fino in fondo alla pagina. Allinea l'area di navigazione e il blocco di copia sotto di essa sul lato sinistro della pagina e forse sposta il nuovo logo a destra.
Varia le dimensioni del testo nella pagina per creare titoli chiari e copia di supporto. Tutto è attualmente molto grande. Ricorda: quando rendi tutto speciale, niente è speciale.
Elimina le forme attuali nella sezione in primo piano e l'elenco gigante puntato (incorpora i tuoi servizi altrove). Crea un'anteprima di un singolo progetto di grandi dimensioni che si estende su tutta l'area del contenuto.
Infine, rielaborare il piè di pagina in modo che l'allineamento a sinistra sopra sia rispettato. In altre parole, togli quel pulsante dall'angolo a destra.
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.
