Critica di progettazione Web n. 30: Gray Ang
Benvenuti nella nostra trentesima critica del design! Ogni settimana diamo un'occhiata a un nuovo sito Web e analizziamo il design. Indicheremo entrambe le aree che hanno funzionato bene oltre a quelle che potrebbero usare un po 'di lavoro. Infine, finiremo chiedendoti di fornire il tuo feedback.
Il sito di oggi è Gray Ang, il portfolio personale di un web designer in Malesia.
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.
Informazioni su Gray Ang
“Mi chiamo Gray e sono un web designer e sviluppatore front-end con sede a Kuala Lumpur, in Malesia. Ricerco, pianifico, progetto e codice siti Web. Sono un buon amico di Photoshop e HTML / CSS / jQuery e rendo felici clienti, utenti e macchine. "
Ecco uno screenshot della homepage:
Come puoi vedere, il sito è costruito su uno sfondo colorato con una nuvola di tag a opacità ridotta contenente elementi come "web design" e "CSS3". Quello che non ottieni dallo screenshot è che anche lo sfondo ha un elemento animato. Ci sono diversi cerchi sfocati che galleggiano e sfrecciano dietro il contenuto. Fai clic su uno degli screenshot seguenti per fermarti al sito e vederlo in azione.
Questo sito è in realtà abbastanza piccolo e semplice, quindi daremo un'occhiata a ciascuna delle pagine e analizzeremo come l'estetica influisce sull'esperienza dell'utente.
Casa
Apprezzo decisamente il lavoro che ha riguardato l'estetica del sito. L'impostazione ambientale è piuttosto bella. Tuttavia, il problema con la creazione di uno sfondo così complesso è che alla fine devi posizionare il contenuto sopra di esso, e questo può essere un compito molto difficile.
Le parole grandi e sbiadite in background riducono la leggibilità del testo sulla homepage. Il paragrafo principale non è assolutamente impossibile da leggere, ma il design è piuttosto impegnato nell'area del testo, costringendo gli utenti a lavorare un po 'più duramente di quanto farebbero normalmente.
Inoltre, il rosso usato come colore al passaggio del mouse e il punto di enfasi tende a perdersi sullo sfondo. Questo è comprensibile in quanto non è semplicemente facile trovare un colore che contrasta bene con uno sfondo multicolore. Tuttavia, vuoi comunque evitare la dissonanza visiva.
La soluzione più semplice a tutti questi problemi, e in effetti la maggior parte di quelli che discuteremo oggi, potrebbe essere semplicemente quella di posizionare uno sfondo nero leggermente trasparente dietro tutto il contenuto. Ciò darà al contenuto più di una solida base su cui basarsi e consentirà al progettista di mantenere lo sfondo attuale.
Potresti anche considerare di aggiungere una sorta di grafica dell'intestazione a questa pagina. Mi è piaciuto molto come si è distinta la foto nella pagina "Informazioni" e penso che l'idea possa essere duplicata qui.
Di
Qui vediamo un'altra pagina che è abbastanza attraente, ma soffre degli stessi problemi menzionati sopra. Mi piace l'interessante layout al lavoro qui però. La navigazione rimane fissa mentre l'altro contenuto scorre e la pagina viene suddivisa in colonne chiaramente separate e ben organizzate.
La pagina Informazioni si divide in tre pagine secondarie separate: introduzione, ripresa e "cose che faccio". Ciò consente al progettista di adattarsi a un bel po 'di contenuto, mantenendo la navigazione principale super semplice.
Lavori
La pagina "Opere" è una splendida disposizione di miniature e testo che a loro volta portano a pagine di progetti dedicati come quella mostrata di seguito. Le miniature hanno un bel trattamento con bordi spessi che li aiuta a distinguersi dallo sfondo e la citazione in alto a sinistra è abbastanza grande e audace da essere leggibile.
Trovo che il giusto allineamento della grande citazione sia un po 'imbarazzante però. Tutto sulla pagina ha un forte allineamento a sinistra e, sebbene spesso sia efficace infrangere intenzionalmente una regola come questa, non penso che funzioni qui. La forma generale del paragrafo è irregolare, il che rende piuttosto difficile la lettura con un allineamento corretto.
Contatto
L'ultima pagina del sito è la pagina "Contatti". Questo contiene alcuni paragrafi di testo e un modulo di contatto semplice ma elegante. La prima cosa che ho notato qui è che la citazione nella parte superiore della pagina sembra un po 'fuori. Potresti provare ad allinearlo a sinistra indipendentemente dalle virgolette in modo che la "T" in "The" e la "m" in "miglia" formino una linea dura. Questo dovrebbe aiutare l'allineamento a sinistra un po 'più forte di quanto non faccia attualmente.
Inoltre, i campi nel modulo sono così trasparenti che sono quasi invisibili. Ancora una volta, questo può sembrare carino ma l'usabilità ne risente. Ricorda che l'estetica di una pagina ha un obiettivo primario: evidenziare il contenuto in modo attraente. Il tuo design dovrebbe servire ad aumentare l'usabilità, non sacrificarlo in nome dello stile.
Quando si fa clic su un campo per iniziare a digitare, l'opacità aumenta e diventa molto più evidente. Suggerirei di impostare questa opacità sullo stato predefinito e di aumentarla ulteriormente quando è selezionata.
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 eventuali insulti aspri.
