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 è il portfolio personale di Scott Block, un web designer del Maryland.
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 Scott
"Vivo a Columbia, nel Maryland, a breve distanza da Baltimora e dalla capitale della nazione. Quando avevo dodici anni, ho unito la mia passione per i corvi di Baltimora con il mio crescente interesse per la tecnologia e ho iniziato a creare siti sui Ravens. Da allora, ho diligentemente affinato le mie capacità e ora realizzo siti Web per varie persone 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:
Anche se qui c'è sicuramente un potenziale, ci sono molte cose che vorrei sistemare su questa pagina. Diamo un'occhiata a uno a uno.
Combinazione di colori
I colori usati sul sito di Scott creano una tavolozza abbastanza bella quando vengono rimossi singolarmente come mostrato di seguito.
Tuttavia, non sono pazzo per la distribuzione dei colori. Sembrano implementati a caso in punti sulla pagina semplicemente per motivi di variazione invece di essere applicati con lo scopo e la logica. Pensa a ciascuna scelta di colore che fai e come si lega al resto del contenuto della pagina.
Logo
La sua posizione in alto a sinistra del sito rende questo logo la prima cosa che gli utenti vedono quando visitano il palco. Vuoi cogliere questa opportunità per fare una prima impressione forte. Sfortunatamente, sento che questo logo si sta avvicinando.
Riesco a vedere come le lettere dei blocchi vengano lavorate nelle lettere, presumibilmente per legarle al cognome del designer, ma non funziona. L'SB ha una leggibilità piuttosto scarsa e sembra un po 'datato.
Navigazione e intestazione nel suo complesso
L'area di navigazione è abbastanza semplice, solo del testo con divisori orizzontali e una sottolineatura per indicare la pagina corrente. Sono tutto per mantenere la navigazione semplice, quindi penso che quest'area sia ben fatta.
Quando si passa con il mouse su un collegamento nella navigazione, viene visualizzata un'icona sotto il logo di Scott Block. Questo è un effetto pulito che non ho mai visto eseguito in questo modo (con l'effetto hover così lontano dal collegamento).
Quando prendi l'area dell'intestazione nel suo insieme, ci sono alcuni problemi notevoli che potrebbero usare l'indirizzamento. Come ho detto sopra, l'effetto dell'hover dell'icona è pulito, ma sta causando alcuni problemi. Quando non stai passando il mouse su un link nella navigazione, c'è un grosso punto vuoto accanto alla copia dell'intestazione che ti fa chiedere perché non è allineato con niente.
Un modo possibile per aiutare questo è applicare un'icona allo stato predefinito che cambia a un'altra icona quando si passa con il mouse su un collegamento e si torna all'icona originale quando termina il passaggio del mouse. Sfortunatamente, quando è presente l'effetto di spostamento dell'icona, il logo e l'icona creano uno stack verticale scomodo.
Nel complesso, lo spazio negativo in quest'area potrebbe utilizzare una ristrutturazione completa. Oltre al problema con l'icona mancante, il logo principale occupa troppo spazio verticale e crea strani spazi vuoti.
Area in primo piano
Mi piace la ripetizione in un disegno e posso vedere come gli angoli di questa sezione rispecchiano quello del logo, ma poiché non sta funzionando nel logo, lo stesso vale qui. La natura inclinata delle intestazioni è un po 'strana, così come lo schema 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. Quando si passa con il mouse su una sezione, viene creata un'ombra esterna. Il web ci ha insegnato a riconoscere tale attività come un'indicazione che ciò che stiamo sorvolando è un'area cliccabile. Tuttavia, queste aree non sono selezionabili e causano loro la sensazione di creare confusione per l'utente.
footer
Il piè di pagina è abbastanza semplice, ma di nuovo vediamo che potrebbe usare un bel po 'di raffinazione.
Prima di tutto, il pulsante si trova in una posizione scomoda. Quando si progetta, sii sempre cauto nell'appiccare le cose nei buchi solo perché hai spazio. Un forte allineamento a sinistra è stabilito qui dal testo ma poi rovinato dalla posizione del pulsante.
Inoltre, l'animazione del passaggio del mouse è un po 'troppo. Qui viene utilizzato un image sprite e c'è un'animazione tra i due stati del pulsante in cui è possibile vedere una parte dell'immagine scorrere come l'altra. Non è facile dire cosa sta succedendo all'inizio ed è quindi un po 'sconcertante.
Raccomandazioni generali
Ho presentato alcune critiche severe sopra e sento che sarebbe meglio provare a legare tutto insieme. Ecco i miei suggerimenti:
Per iniziare, ridisegnare il logo in qualcosa di più moderno e orizzontale. Quindi stabilisci un allineamento duro a sinistra fino in fondo alla pagina. Allineare l'area di navigazione e il blocco di copia al di sotto della pagina e forse spostare il nuovo logo a destra.
Varia la dimensione del testo sulla pagina per creare titoli chiari e copie di supporto. Tutto è attualmente molto grande. Ricorda: quando rendi tutto speciale, niente è speciale.
Getta le forme attuali nella sezione in primo piano e l'elenco puntato gigante (incorpora i tuoi servizi da qualche altra parte). Crea un'anteprima di un singolo progetto in evidenza che si estende lungo tutta l'area del contenuto.
Infine, rielaborare il piè di pagina in modo che l'allineamento a sinistra sopra sia onorato.In altre parole, togli quel bottone dall'angolo destro.
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.