Ogni settimana diamo un'occhiata a un nuovo sito Web e analizziamo il design. Indicheremo sia le aree che sono fatte bene che quelle che potrebbero utilizzare del lavoro. Finalmente, finiremo chiedendoti di fornire il tuo feedback.
Il sito di oggi è la homepage di Ray Cheung, auto-descritta semplicemente come un imprenditore online.
Se desideri inviare il tuo sito web in una futura Critica del design, ci vogliono solo pochi minuti. Facciamo pagare $ 49 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 Ray Cheung
"Invece di creare siti Web per i clienti, mi piace lavorare sui miei progetti; Partendo da un'idea, progettando da zero con qualche ispirazione lungo il percorso, codificando e diffondendola in tutto il mondo, mi dà un grande senso di realizzazione. Attualmente sto gestendo siti web autosviluppati con circa due milioni di visitatori al mese, tutti allo scopo di condividere risorse utili alle persone.
Ecco uno screenshot della homepage:
Impressioni iniziali
Ray Cheung è un uomo che ha bisogno di pochissime istruzioni sul design. Non ha una, ma molte iniziative web di grande successo, tutte molto belle e la sua homepage non fa eccezione.
Il tema generale è piuttosto interessante: uno sfondo di legno con una pila di carte per contenere il contenuto. Tuttavia, invece di usare una trama di carta, Ray ha utilizzato uno sfondo di campo stellare. Sembra pazzesco ma l'effetto complessivo è abbastanza bello! Mi piace quando i designer fanno qualcosa di inaspettato piuttosto che correre con una tendenza.
L'effetto di impilamento della pagina ricorda un popolare tema Tumblr, ma le somiglianze si fermano qui perché il layout e il design generali sono abbastanza diversi.
A colpo d'occhio mi piace molto quello che Ray ha fatto qui. Entriamo e osserviamo più da vicino alcune sezioni.
Texture e colore
Come ho già detto, le trame dello spazio e del legno sono una combinazione improbabile, ma entrambe sono molto ben progettate e sembrano funzionare perfettamente insieme. Mi piace la tavolozza dei colori scuri che risulta dai due:
Caratteri
Quando hai un tema visivo abbastanza audace, può essere opprimente combinarlo con una tipografia pazzesca. L'idea generale è che non vuoi troppi oggetti in competizione per attirare l'attenzione.
Alla luce di ciò, Ray ha fatto una scelta solida per essere conservatore con i suoi caratteri. Tutta la tipografia è composta da caratteri tipografici sans-serif facilmente leggibili. L'intestazione del sito principale è in grassetto, seguita da una variante ultra leggera (forse troppo leggera). Queste e le intestazioni della sezione condensata in grassetto sono immagini con la copia del corpo reale in Arial. Sarebbe bello vedere l'integrazione di @ font-face per portare alcuni di questo tipo dal vivo, ma le immagini sono piuttosto piccole, quindi non penso che sia un grosso problema (anche se montare uno sprite o due non farebbe male) .
Navigazione
Tra queste critiche e la nostra galleria di design, ho dato un'occhiata a a tonnellata di progetti di siti web nel corso degli anni. Non capita spesso di vedere un trucco che non ho mai visto prima. La navigazione di Ray mi ha davvero sorpreso. Non credo di aver mai visto questo particolare effetto.
Il design di questa sezione è semplice e funziona magnificamente con la pagina generale. Adoro il contrasto dei pulsanti leggermente estrusi e la sezione interna sotto di essi.
Quando fai clic su uno degli ultimi due pulsanti, la pagina scorre automaticamente per portarti in quella sezione, un'idea piuttosto tipica. Tuttavia, gli altri due pulsanti si collegano a due sezioni che sono già nella parte superiore della pagina, quindi quando fai clic su queste loro rispettive sezioni scuoti effettivamente avanti e indietro in un'animazione fluida. È un effetto piuttosto semplice che rende il sito più dinamico e quasi vivo e amichevole.
sezioni
La pagina è suddivisa in due colonne verticali. I vari progetti su cui Ray ha lavorato e sulla sinistra sono varie piccole sezioni di contenuti: About Me, My Skills, Reading and Recognitions.
Ogni sezione è sormontata da un'intestazione e una piccola icona, un'altra piccola caratteristica che mi fa pensare istantaneamente a Tumblr.
Queste sezioni sono chiaramente distinte e facili da approfondire individualmente. Ognuno ha un design unico ma si uniscono bene insieme. Una piccola cosa che prenderei in considerazione in "My Skills? la sezione sta colorando le barre orizzontali per abbinare le loro rispettive parti del grafico circolare. Ciò aiuterebbe la coerenza delle due immagini e comunicherà immediatamente il modo in cui sono connesse.
Scorrimento intelligente
Un'altra cosa che mi piace davvero di questo sito è come Ray ha pensato attraverso la funzionalità di scorrimento. La colonna di sinistra termina con il modulo di contatto e la colonna di destra è significativamente più lunga. Mentre scorri verso il basso la pagina, l'intera pagina scorre uniformemente come ci si aspetterebbe fino a quando non si preme il modulo di contatto. A questo punto, la colonna di sinistra smette di scorrere e la colonna destra continua.
Tocchi come questi mostrano solo quanto tempo è stato speso pensando a come rendere il sito più user friendly.
Luci spente!
Una delle poche cose di cui non ero abbastanza sicuro sul sito era il passaggio vicino alla parte superiore per spegnere le luci. Mi aspettavo che una volta colpito questo interruttore, il tema sarebbe cambiato in qualche modo. Forse lo sfondo di legno svanirebbe nel nero rivelando più stelle o qualcos'altro ugualmente interessante.
Tuttavia, quando premi l'interruttore, questo è ciò che ottieni:
Capisco il messaggio qui: risparmia energia spegnendo le luci. Tuttavia, l'implementazione è un po 'imbarazzante. Questa pagina non ti dà modo di tornare al sito nel caso in cui stavi premendo il pulsante per vedere cosa ha fatto, né ti indirizza da nessun'altra parte come uno degli altri progetti di Ray o alcune risorse sul risparmio energetico.Un altro elemento di confusione è la batteria? Sta per esaurirsi? messaggio nel footer del sito. Questo potrebbe essere collegato al messaggio nell'intestazione, ma non è chiaro.
Penso che le intenzioni siano buone qui, ma il risultato sta abbattendo la mia percezione della qualità del sito e penso che se verranno mantenute queste dovranno essere ripensate.
Conclusione
In chiusura, penso che Ray abbia creato una grande pagina web qui per presentarti a se stesso. La pagina indica chiaramente chi è e cosa fa e sembra fantastico farlo. Il layout è logico e facile da seguire, il design è unico e interessante e il contenuto è, per la maggior parte, rilevante.
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 anche di essere rispettoso nei confronti del designer del sito e di offrire una consulenza chiara e costruttiva priva di insulti ostili.